31:Tdef,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; }32:T408,function getTiles(map) { // Inspired by https://github.com/mapbox/leaflet-image // Copyright (c) 2017, Mapbox, BSD 2-Clause License const layers = []; map.eachLayer((layer) => layers.push(layer)); const layer = layers[0]; const bounds = map.getPixelBounds(); const zoom = map.getZoom(); const tileSize = layer.options.tileSize; const tileBounds = L.bounds( bounds.min.divideBy(tileSize)._floor(), bounds.max.divideBy(tileSize)._floor() ); const tilePoints = []; for (let j = tileBounds.min.y; j <= tileBounds.max.y; j++) { for (let i = tileBounds.min.x; i <= tileBounds.max.x; i++) { const point = new L.Point(i, j); if (layer._isValidTile(point)) { tilePoints.push(point); } } } return tilePoints.map((tilePoint) => { const tilePosition = tilePoint .scaleBy(new L.Point(tileSize, tileSize)) .subtract(bounds.min); const url = layer.getTileUrl(tilePoint); return { ...tilePosition, width: tileSize, height: tileSize, url }; }); }33:[] 2f:{"title":"Zyramix – Swiss Edition","cells":[{"id":0,"value":"# Zyramix – Swiss Edition\n\n*See also: [International Edition](https://observablehq.com/@rkaravia/zyramix-international-edition)*\n\nZyramix is a [malamanteau](https://xkcd.com/739/) of [XYZ](https://gist.github.com/tmcw/4954720) and pyramid.\n\nIt lets you create an SVG animation that zooms in to any place in Switzerland as if you were using a [Leaflet](https://leafletjs.com) map.\n\nThe SVG file contains all tile images and styles inline and can be used standalone, e.g. embedded in a [GitHub README](https://github.com/rkaravia/Leaflet.TileLayer.Swiss).","pinned":false,"hidden":false,"mode":"md"},{"id":515,"value":"DOM.download(\n () => {\n const optimizedSvg = svgo.optimize(animation.outerHTML, {\n js2svg: { pretty: true },\n plugins: [\n {\n name: \"preset-default\",\n params: {\n overrides: {\n inlineStyles: false,\n removeHiddenElems: false\n }\n }\n }\n ]\n }).data;\n return new Blob([optimizedSvg], { type: \"image/svg+xml\" });\n },\n \"zyramix.svg\",\n \"Download SVG\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"## Settings\n\nEdit settings below, then click the button to re-generate the animation.","pinned":false,"hidden":false,"mode":"md"},{"id":589,"value":"viewof run = {\n updateSize;\n return Inputs.button(\"Generate animation\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof map = {\n const container = html`

`;\n yield container;\n\n // Create map and attach it to container\n const map = L.map(container, {\n // Use LV95 (EPSG:2056) projection\n crs: L.CRS.EPSG2056,\n maxZoom: 22,\n zoomControl\n });\n map.setMaxBounds(null);\n\n // Add Swiss layer with default options\n L.tileLayer.swiss().addTo(map);\n\n map.setView(L.CRS.EPSG2056.unproject(L.point(2600000, 1200000)), 22);\n\n container.value = map;\n container.dispatchEvent(new CustomEvent(\"input\"));\n\n map.on(\"moveend\", () => container.dispatchEvent(new CustomEvent(\"input\")));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"viewof zoomSteps = Inputs.range([1, 8], {\n label: \"Zoom steps\",\n step: 1,\n value: 7\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":791,"value":"viewof stepDuration = Inputs.range([0.5, 5], {\n label: \"Step duration [s]\",\n step: 0.1,\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":798,"value":"viewof loop = Inputs.toggle({ label: \"Loop\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"viewof zoomControl = Inputs.toggle({ label: \"Zoom control\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"### Map size","pinned":false,"hidden":false,"mode":"md"},{"id":669,"value":"viewof width = Inputs.range([256, 1024], {\n label: \"Width [px]\",\n step: 1,\n value: initialWidth\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":674,"value":"viewof height = Inputs.range([256, 1024], {\n label: \"Height [px]\",\n step: 1,\n value: initialHeight\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"viewof updateSize = Inputs.button(\"Update size\", {\n reduce: (c) => {\n viewof map.style.width = `${viewof width.value}px`;\n viewof map.style.height = `${viewof height.value}px`;\n viewof map.value.invalidateSize();\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"---\n\n## Helpers","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"function toWebpDataUrl(url) {\n const image = new Image();\n return new Promise((resolve) => {\n image.onload = () => {\n const canvas = document.createElement(\"canvas\");\n canvas.width = image.width;\n canvas.height = image.height;\n canvas.getContext(\"2d\").drawImage(image, 0, 0);\n return canvas.toBlob(\n (blob) => {\n const fileReader = new FileReader();\n fileReader.onload = (e) => resolve(e.target.result);\n fileReader.readAsDataURL(blob);\n },\n \"image/webp\",\n 0.7\n );\n };\n image.crossOrigin = \"\";\n image.src = url;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"function loadingPlaceholder(width, height) {\n return `

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"initialWidth = 640","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"initialHeight = 320","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"L = {\n await require.alias({\n // leaflet is a peer dependency of leaflet-tilelayer-swiss\n // See https://talk.observablehq.com/t/set-version-of-peer-dependencies/1816\n leaflet: \"leaflet@1.9.1/dist/leaflet.js\"\n })(\"leaflet-tilelayer-swiss@2.3.0\");\n const L = window.L;\n\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1.9.1/dist/leaflet.css\");\n document.head.appendChild(\n (L._style = html``)\n );\n L._stringifiedCss = await fetch(href).then((response) => response.text());\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"svgo = import(\"https://unpkg.com/svgo@2.8.0/dist/svgo.browser.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":814,"value":"## Footnote\n\nThis is probably my last Observable notebook because I'm not sure I will keep using Observable after the [latest changes in pricing](https://observablehq.com/@observablehq/hello-pro). It was fun while it lasted, bye! 👋","pinned":false,"hidden":false,"mode":"md"}],"files":"$W33","stdlib":"1","titling":"auto"}