Defer map initialization

Author: ItsiW

html/map.html

@@ -177,7 +177,9 @@
 </div>
 
 <script>
-maplibregl.accessToken = "pk.eyJ1IjoidHJpc2NodGFuZGVyIiwiYSI6ImNsNmZwNXY2MDAxOWEzZG41b213NWJ2ZjIifQ.pMjBga8kA5XQuDw19WQ8TQ";
+// Defer heavy map initialization until after critical rendering
+function initializeMap() {
+  maplibregl.accessToken = "pk.eyJ1IjoidHJpc2NodGFuZGVyIiwiYSI6ImNsNmZwNXY2MDAxOWEzZG41b213NWJ2ZjIifQ.pMjBga8kA5XQuDw19WQ8TQ";
 
 var map = new maplibregl.Map({
   container: "map",
@@ -433,5 +435,14 @@ <h3 class="name-popup">${properties.name}</h3>
   preload(...{{ thumbnails }});
 }
 
+} // End of initializeMap function
+
+// Initialize map after critical rendering, or when browser is idle
+if (window.requestIdleCallback) {
+  requestIdleCallback(initializeMap);
+} else {
+  setTimeout(initializeMap, 100);
+}
+
 </script>
 {% endblock %}