update map on load

webapp/src/components/LeafletMap.vue

@@ -63,7 +63,7 @@ function initializeMap() {
     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
   }).addTo(map);
 
-  populateMap();
+  emit('update:bounds', map.getBounds()); // XXX: this event populates the map
 }
 
 function renderCurrentLocation() {
@@ -194,10 +194,6 @@ function registerEvents() {
     emit('update:zoom', map.getZoom());
     emit('update:bounds', map.getBounds());
   });
-
-  map.on('load', () => {
-    emit('update:bounds', map.getBounds());
-  });
 }
 
 /**

webapp/src/stores/tiles.ts

@@ -61,8 +61,13 @@ export const useTilesStore = defineStore('tiles', () => {
   }
 
   const fetchVisibleTiles = async (boundingBox: BoundingBox): Promise<void> => {
-    if (!(tileUrlTemplate && tileSizeDegrees)) {
-      console.warn('Tile URL template is not set, skipping fetch');
+    if (!tileUrlTemplate || !tileSizeDegrees) {
+      console.debug('Tile URL template or tile size is not set, fetching...');
+      await fetchIndex();
+    }
+  
+    if (!tileUrlTemplate || !tileSizeDegrees) {
+      console.warn('Tile URL template or tile size is still not set after fetching index');
       return;
     }
 
@@ -89,8 +94,6 @@ export const useTilesStore = defineStore('tiles', () => {
 
   const allNodes = computed(() => Object.values(tiles.value).flat());
 
-  onBeforeMount(fetchIndex);
-
   return {
     fetchVisibleTiles,
     allNodes,