profile: show first base layer per default

Otherwise it does look very empty when you open the page.

1 files changed, 42 insertions, 26 deletions

diff --git a/fietsboek/templates/profile.jinja2 b/fietsboek/templates/profile.jinja2
index 1363216..34bb2de 100644
--- a/fietsboek/templates/profile.jinja2
+++ b/fietsboek/templates/profile.jinja2
@@ -42,35 +42,51 @@
 
 {% block latescripts %}
 <script>
-  var map = L.map('userMap').setView([52.520008, 13.404954], 2);
+  (function() {
+    const renderMap = document.getElementById("userMap") !== null;
+    if (!renderMap) {
+      return;
+    }
 
-  baseLayers = {};
-  overlayLayers = {};
+    const map = L.map("userMap").setView([52.520008, 13.404954], 2);
 
-  {% if heatmap_url %}
-  overlayLayers[{{ _("page.profile.heatmap") | tojson }}] = L.tileLayer({{ heatmap_url | tojson }}, {
-    maxZoom: 19,
-  });
-  {% endif %}
-  {% if tilehunt_url %}
-  overlayLayers[{{ _("page.profile.tilehunt") | tojson }}] = L.tileLayer({{ tilehunt_url | tojson }}, {
-    maxZoom: 19,
-  });
-  {% endif %}
+    baseLayers = {};
+    overlayLayers = {};
+
+    {% if heatmap_url %}
+    overlayLayers[{{ _("page.profile.heatmap") | tojson }}] = L.tileLayer({{ heatmap_url | tojson }}, {
+      maxZoom: 19,
+    });
+    {% endif %}
+    {% if tilehunt_url %}
+    overlayLayers[{{ _("page.profile.tilehunt") | tojson }}] = L.tileLayer({{ tilehunt_url | tojson }}, {
+      maxZoom: 19,
+    });
+    {% endif %}
+
+    let defaultLayer = null;
+
+    for (let layer of TILE_LAYERS) {
+        if (layer.type === "base") {
+            baseLayers[layer.name] = L.tileLayer(layer.url, {
+                maxZoom: layer.zoom,
+                attribution: layer.attribution,
+            });
+            if (defaultLayer === null) {
+                defaultLayer = baseLayers[layer.name];
+            }
+        } else if (layer.type === "overlay") {
+            overlayLayers[layer.name] = L.tileLayer(layer.url, {
+                attribution: layer.attribution,
+            });
+        }
+    }
 
-  for (let layer of TILE_LAYERS) {
-      if (layer.type === "base") {
-          baseLayers[layer.name] = L.tileLayer(layer.url, {
-              maxZoom: layer.zoom,
-              attribution: layer.attribution,
-          });
-      } else if (layer.type === "overlay") {
-          overlayLayers[layer.name] = L.tileLayer(layer.url, {
-              attribution: layer.attribution,
-          });
-      }
-  }
 
-  L.control.layers(baseLayers, overlayLayers).addTo(map);
+    // Add the default layer via .addTo directly, otherwise it will not be
+    // selected at the start.
+    defaultLayer.addTo(map);
+    L.control.layers(baseLayers, overlayLayers).addTo(map);
+  })();
 </script>
 {% endblock %}