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

67 lines
2.6 KiB
JavaScript

import { useLayoutStore } from '../stores/layout';
import REST from '../api/rest-axios';
export function setupMapStore(mapStore, map, settings) {
mapStore.map = map;
mapStore.defaultMapCenter = map.getCenter();
mapStore.maxZoom = settings.settings.maxZoom;
mapStore.defaultZoomDesktop = settings.settings.minZoom;
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
// may or may not 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);
}