28:null 29:["$","title",null,{"children":"Leaflet Synchro | Patrick Brockmann | Observable"}] 2e:T8a8,maps = { var baseLayers = [ "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png", "https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}.png", "https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}.png", "https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}.png", "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png", "https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.png", "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}.png" ]; var randomIntegerInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; const container = html`

`; yield container; var center = [48.71178299878832, 2.148147171321472]; var zoom = 12; var width = 250; var height = 200; var maps = []; for (var i = 0; i < mapsNb; i++) { var div = document.createElement("div"); div.style.width = width + "px"; div.style.height = height + "px"; div.style.float = "left"; div.id = "map" + i; document.getElementById("mapDiv").appendChild(div); maps["map" + i] = L.map("map" + i); maps["map" + i].setView(center, zoom); var layer = L.tileLayer(baseLayers[i + 1 - (1 % 5)], { maxZoom: 17 }); layer.addTo(maps["map" + i]); } // Synchronize all maps together for (var i = 0; i < mapsNb; i++) { for (var j = 0; j < mapsNb; j++) { if (i != j) { maps["map" + i].sync(maps["map" + j]); } } } // https://github.com/jjimenezshaw/Leaflet.Control.Resizer var resizer = L.control .resizer({ direction: "se", onlyOnHover: true }) .addTo(maps["map0"]); L.DomEvent.on(resizer, "dragend", function (e) { var map0Div = document.getElementById("map0"); for (var i = 1; i < mapsNb; i++) { var mapDiv = document.getElementById("map" + i); mapDiv.style.width = map0Div.style.width; mapDiv.style.height = map0Div.style.height; maps["map" + i].invalidateSize(); } }); }2f:T6ef,L = { const r = require.alias({ leaflet: "leaflet@1.8.0/dist/leaflet-src.js", "leaflet/dist/leaflet.css": "leaflet@1.8.0/dist/leaflet.css", "leaflet-fullscreen": "leaflet-fullscreen@1.0.2/dist/Leaflet.fullscreen.min.js", "leaflet-fullscreen/dist/leaflet.fullscreen.css": "leaflet-fullscreen@1.0.2/dist/leaflet.fullscreen.css", "leaflet-timedimension": "leaflet-timedimension@1.1.1/dist/leaflet.timedimension.min.js", "leaflet-timedimension/dist/leaflet.timedimension.control.min.css": "leaflet-timedimension@1.1.1/dist/leaflet.timedimension.control.min.css", "iso8601-js-period": "iso8601-js-period@0.2.1/iso8601.js", "leaflet.sync": "leaflet.sync@0.2.4/L.Map.Sync.js", "leaflet.control.resizer": "leaflet.control.resizer@0.0.1/L.Control.Resizer.js", "leaflet.control.resizer/L.Control.Resizer.css": "leaflet.control.resizer@0.0.1/L.Control.Resizer.css" }); const L = await r("leaflet"); await Promise.all([ r("leaflet-fullscreen").catch(() => {}), r("leaflet-timedimension").catch(() => {}), r("leaflet.sync").catch(() => {}), r("leaflet.control.resizer").catch(() => {}) ]); if (!L._style) { // apply stylesheets (only once on load) L._style = true; document.head.append(htl.html` `); } return L; }30:[] 2c:{"id":"4cbfcfc2d8cd3222","slug":"leaflet-synchro","title":"Leaflet Synchro","thumbnail":"5b789e468722fd92b8c92dd0e60cc8873e145bd5bb1b2ee048f630474adc2405","access_level":"public","create_time":"$D2022-01-23T16:15:16.945Z","update_time":"$D2022-04-20T09:56:32.954Z","view_time":null,"first_public_time":"$D2022-01-23T16:26:59.305Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"63e96f00663997c7","login":"pbrockmann","name":"Patrick Brockmann","avatar_url":"https://avatars-next.observableusercontent.com/25f3e1483d611e61cc2dc87b5091004972f4ad8dbf4792cd225809597ddb2463","tier":"starter_2024"},"version":397,"publish_version":397,"role":null,"authored":false,"authors":[{"type":"individual","id":"68e18af682792012","login":"pbrockmann","name":"Patrick Brockmann","avatar_url":"https://avatars-next.observableusercontent.com/25f3e1483d611e61cc2dc87b5091004972f4ad8dbf4792cd225809597ddb2463","tier":null}],"members":[{"type":"individual","id":"68e18af682792012","login":"pbrockmann","name":"Patrick Brockmann","avatar_url":"https://avatars-next.observableusercontent.com/25f3e1483d611e61cc2dc87b5091004972f4ad8dbf4792cd225809597ddb2463","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Leaflet Synchro","cells":[{"id":0,"value":"# Leaflet Synchro","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":249,"value":"All maps are synchronized, their size can be controled from the first map (pass mouse over south-east corner)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":317,"value":"viewof mapsNb = Inputs.range([1, 7], {\n value: 4,\n step: 1,\n label: \"Number of maps:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"