animation = { run; while (!viewof map.value) { yield; } const map = viewof map.value; const { x: width, y: height } = map.getSize(); yield html`${loadingPlaceholder(width, height)}`; const center = map.getCenter(); const zoomSteps = viewof zoomSteps.value; const zoomTo = map.getZoom(); const zoomFrom = Math.max(map.getMinZoom(), zoomTo - zoomSteps); const steps = Array.from({ length: zoomTo - zoomFrom + 1 }, (_, i) => ({ zoom: zoomFrom + i, index: i })); const loop = viewof loop.value; const stepDuration = viewof stepDuration.value; const totalDuration = steps.length * stepDuration; const fadeInDuration = 0.25; const zoomDuration = 0.25; const levels = []; const scales = new Set(); map.setZoom(map.getMinZoom() + 1, { animate: false }); const leafletControls = viewof map.querySelector( ".leaflet-control-container" ).outerHTML; for (const { zoom, index } of steps) { const delayToAppear = stepDuration * index; map.setView(center, zoom, { animate: false }); const scale = zoom === zoomTo ? 1 : map.getZoomScale(zoom + 1); const scaleStr = String(scale).replace(".", "-"); scales.add(scale); const images = []; for (const { x, y, width, height, url } of getTiles(map)) { const data = await toWebpDataUrl(url); images.push( svg`` ); } levels.push(svg` ${images} `); } const keyframeAt = (time) => `${(100 * time) / totalDuration}%`; const keyframeAfter = (time) => `${(100 * time) / totalDuration + 0.001}%`; const repeatFill = loop ? "infinite" : "forwards"; const animation = svg` `; animation .querySelectorAll("svg") .forEach((node) => node.setAttribute("xmlns", "http://www.w3.org/2000/svg") ); yield animation; }