Don't let map block

Author: ItsiW

html/map.html

@@ -1,6 +1,5 @@
 {% extends "base.html" %}
 {% block extra_head %}
-<script src="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js"></script>
 <link href="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css" rel="stylesheet" />
 
 <style>
@@ -177,7 +176,16 @@
 </div>
 
 <script>
-maplibregl.accessToken = "pk.eyJ1IjoidHJpc2NodGFuZGVyIiwiYSI6ImNsNmZwNXY2MDAxOWEzZG41b213NWJ2ZjIifQ.pMjBga8kA5XQuDw19WQ8TQ";
+// Load MapLibre GL dynamically to prevent render blocking
+function loadMapLibrary() {
+  const script = document.createElement('script');
+  script.src = 'https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js';
+  script.onload = initializeMap;
+  document.head.appendChild(script);
+}
+
+function initializeMap() {
+  maplibregl.accessToken = "pk.eyJ1IjoidHJpc2NodGFuZGVyIiwiYSI6ImNsNmZwNXY2MDAxOWEzZG41b213NWJ2ZjIifQ.pMjBga8kA5XQuDw19WQ8TQ";
 
 var map = new maplibregl.Map({
   container: "map",
@@ -433,5 +441,14 @@ <h3 class="name-popup">${properties.name}</h3>
   preload(...{{ thumbnails }});
 }
 
+}
+
+// Load map library after page loads to prevent blocking
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', loadMapLibrary);
+} else {
+  loadMapLibrary();
+}
+
 </script>
 {% endblock %}