30: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(); } }); }31: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; }32:[] 2e:{"title":"Leaflet Synchro","cells":[{"id":0,"value":"# Leaflet Synchro","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":13,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}