diff --git a/webapp/src/stores/tiles.ts b/webapp/src/stores/tiles.ts index 3434543..1941b2c 100644 --- a/webapp/src/stores/tiles.ts +++ b/webapp/src/stores/tiles.ts @@ -13,6 +13,7 @@ export const useTilesStore = defineStore('tiles', () => { const tiles: Ref> = ref({}); const availableTiles: Ref = ref([]); const expirationDateUtc: Ref = ref(null); + const fetchingTiles = new Set(); let tileUrlTemplate: string|undefined = undefined; let tileSizeDegrees: number|undefined = undefined; @@ -32,6 +33,11 @@ export const useTilesStore = defineStore('tiles', () => { const fetchAndAddTile = async (lat: number, lng: number): Promise => { const key = `${lat}/${lng}`; + if (fetchingTiles.has(key)) { + console.debug(`Tile ${key} is already being fetched, skipping fetch`); + return; + } + if (tiles.value[key]) { console.debug(`Tile ${key} is already cached, skipping fetch`); return; @@ -42,9 +48,16 @@ export const useTilesStore = defineStore('tiles', () => { return; } const url = tileUrlTemplate.replace('{lat}/{lon}', key); - const tile = await api.get(url); - - tiles.value[key] = tile.data; + + try { + fetchingTiles.add(key); + const tile = await api.get(url); + tiles.value[key] = tile.data; + } catch (error) { + console.error(`Failed to fetch tile ${key}:`, error); + } finally { + fetchingTiles.delete(key); + } } const fetchVisibleTiles = async (boundingBox: BoundingBox): Promise => { diff --git a/webapp/src/views/Map.vue b/webapp/src/views/Map.vue index 8939432..57ea63b 100644 --- a/webapp/src/views/Map.vue +++ b/webapp/src/views/Map.vue @@ -171,7 +171,6 @@ function updateMarkers() { return; } - console.log('Fetching visible tiles'); fetchVisibleTiles(bounds.value); }