essais non fructueux de pré-charger les tiles au zoom sur les étapes

web/themes/custom/caravane/assets/js/utils/map-setup.js

@@ -1,4 +1,5 @@
 import { useLayoutStore } from '../stores/layout';
+import REST from '../api/rest-axios';
 
 export function setupMapStore(mapStore, map, settings) {
     mapStore.map = map;
@@ -8,4 +9,58 @@ export function setupMapStore(mapStore, map, settings) {
     mapStore.defaultZoomMobile = settings.settings.minZoom - 1;
     mapStore.map.flyTo([mapStore.defaultMapCenter.lat, mapStore.defaultMapCenter.lng], useLayoutStore().isDesktop ? mapStore.defaultZoomDesktop : mapStore.defaultZoomMobile);
     mapStore.checkReducedMotion();
-}
+}
+
+// not working
+// kept to maybe rework on it later
+export async function preloadEtapesTiles(mapStore, map) {
+    function waitForEvent(el, eventName) {
+        return new Promise((resolve) => {
+            el.once(eventName, resolve);
+        });
+    }
+
+    const tilesSource = map._layers.layer._url;
+
+    const response = await REST.get(`/jsonapi/node/etape/`);
+
+    const defaultZoom = useLayoutStore().isDesktop ? mapStore.defaultZoomDesktop : mapStore.defaultZoomMobile;
+
+    let tilesCached = new Set();
+
+    for (const etape of response.data.data) {
+        const etapeCoords = {
+            title: etape.attributes.title,
+            lat: etape.attributes.field_geofield.lat,
+            lng: etape.attributes.field_geofield.lon,
+        };
+        
+        for (let zoom = defaultZoom; zoom <= mapStore.maxZoom; zoom++) {            
+            map.flyTo([etapeCoords.lat, etapeCoords.lng], zoom, { animate: true, duration: 0.001 });
+            await waitForEvent(map, 'moveend zoomend');
+            
+            let allTilesCached = Object.keys(map._layers.layer._tiles).every(tile => tilesCached.has(tile));
+
+            const tileLayer = Object.values(map._layers).find(layer => layer instanceof L.TileLayer);
+
+            if (!allTilesCached && tileLayer._loading) {
+                await waitForEvent(tileLayer, 'load');
+                Object.keys(map._layers.layer._tiles).forEach(tile => {
+                    if (!tilesCached.has(tile)) {
+/*                         const tileObject = map._layers.layer._tiles[tile];
+                        let img = new Image();
+                        const url = tilesSource
+                                    .replace('{z}', tileObject.coords.z)
+                                    .replace('{x}', tileObject.coords.x)
+                                    .replace('{y}', tileObject.coords.y);
+                        img.src = url; */
+                        tilesCached.add(tile)
+                    }
+                });
+            }
+
+        }
+    }
+    // console.log(tilesCached);
+    mapStore.resetMap(false, 0);
+}