2f:T9b8,map_3d = { const scope = DOM.uid().id; const containerBefore = htl.html`

`; const containerAfter = htl.html`

`; const container = yield html`

${containerBefore} ${containerAfter}

`; const mapBefore = initMap(containerBefore, select_before); const mapAfter = initMap(containerAfter, select_after); new compare(mapBefore, mapAfter, container, { // Set this to enable comparing two maps by mouse movement: // mousemove: true }); function initMap(container, layerName) { const map = new mapboxgl.Map({ container, center: center, zoom: select === "Glaciar del Aneto (Spain)" ? 14 : 10, pitch: 0, bearing: 0, style: "mapbox://styles/mapbox-map-design/ckhqrf2tz0dt119ny6azh975y", scrollZoom: true }); map.on("load", () => { map.addLayer({ id: "basemap", type: "raster", source: { type: "raster", tileSize: 256, tiles: [ "https://wayback.maptiles.arcgis.com/arcgis/rest/services/world_imagery/wmts/1.0.0" + "/default028mm/mapserver/tile/" + layerName + "/{z}/{y}/{x}.jpg" ] }, paint: { "raster-fade-duration": 0, "raster-opacity": 0.8 } }); map.addSource("mapbox-dem", { type: "raster-dem", url: "mapbox://mapbox.mapbox-terrain-dem-v1", tileSize: 512, maxzoom: 16 }); // add the DEM source as a terrain layer with exaggerated height map.setTerrain({ source: "mapbox-dem", exaggeration: 2 }); //map.addLayer(layer_contour_labels); //map.addLayer(layer_contours); // add a sky layer that will show when the map is highly pitched map.addLayer(layer_sky); }); return map; } }30:[] 2d:{"title":"Map Comparison 2014 - 2024","cells":[{"id":0,"value":"title = md`# Map Comparison 2014 - 2024`","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"dashboard = html` \n \n \n \n \n \n

\n ${viewof center}\n ${viewof select_before}\n

\n ${viewof location}\n ${viewof select_after}\n

\n ${viewof select}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"viewof select_before = Inputs.select(\n new Map([\n [\"2023-08-31\", 64776],\n [\"2022-11-02\", 7110],\n [\"2020-05-20\", 32645],\n [\"2019-06-26\", 645],\n [\"2014-06-11\", 31144],\n [\"2014-02-20\", 10]\n ]),\n { value: 10, label: \"Left Image\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"viewof select_after = Inputs.select(\n new Map([\n [\"2023-08-31\", 64776],\n [\"2022-11-02\", 7110],\n [\"2020-05-20\", 32645],\n [\"2019-06-26\", 645],\n [\"2014-06-11\", 31144],\n [\"2014-02-20\", 10]\n ]),\n { value: 64776, label: \"Right Image\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"viewof center = {\n const form = html``;\n const formatLocation = ([x, y]) =>\n [\n `${Math.abs(y).toFixed(4)}°${y > 0 ? \"N\" : \"S\"}`,\n `${Math.abs(x).toFixed(4)}°${x > 0 ? \"E\" : \"W\"}`\n ].join(\", \");\n form.b.onclick = async (event) => {\n form.value = await new Promise((resolve, reject) => {\n navigator.geolocation.getCurrentPosition(\n ({ coords: { longitude, latitude } }) => resolve([longitude, latitude]),\n reject\n );\n form.o.value = \"Locating…\";\n });\n form.o.value = formatLocation(form.value);\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.value = Object.assign([coors[0], coors[1]]);\n form.o.value = formatLocation(form.value);\n return form;\n} //Inputs.toggle({label: \"Auto Locate\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"viewof location = Inputs.text({\n label: \"Or enter your city\",\n submit: true,\n placeholder: \"Hanoi\"\n //value: \"Stavanger\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"viewof select = Inputs.select(\n [\"Glaciar del Aneto (Spain)\", \"Columbia Glacier (Alaska)\"],\n { label: \"Or select one\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"location","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`\n\\`Control\\` + \\`mouse scroll\\` to zoom in/out and turn around.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":182,"value":"Wayback is a digital archive, providing users with access to the different versions of World Imagery created over time. Each layer in the archive represents a snapshot of the entire World Imagery map, as it existed on the date it was published. Wayback currently provides access to all published versions of World Imagery, dating back to February 20, 2014. There is an ArcGIS Online item for every version which can be viewed in the[ Wayback Imagery group](https://www.arcgis.com/home/group.html?id=0f3189e1d1414edfad860b697b7d8311#overview).","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"### Additional Layers","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"layer_contour_labels = ({\n id: \"countour-labels\",\n type: \"symbol\",\n source: {\n type: \"vector\",\n url: \"mapbox://mapbox.mapbox-terrain-v2\"\n },\n \"source-layer\": \"contour\",\n layout: {\n visibility: \"visible\",\n \"symbol-placement\": \"line\",\n \"text-field\": [\"concat\", [\"to-string\", [\"get\", \"ele\"]], \"m\"]\n },\n paint: {\n \"icon-color\": \"#fff44f\",\n \"icon-halo-width\": 0.5,\n \"text-color\": \"#fff44f\",\n \"text-halo-width\": 1,\n \"text-opacity\": 0.6\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"layer_contours = ({\n id: \"countours\",\n type: \"line\",\n source: { type: \"vector\", url: \"mapbox://mapbox.mapbox-terrain-v2\" },\n \"source-layer\": \"contour\",\n layout: {\n visibility: \"visible\",\n \"line-join\": \"round\",\n \"line-cap\": \"round\"\n },\n paint: {\n \"line-color\": \"#fff44f\",\n \"line-width\": 1,\n \"line-opacity\": 0.4\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"layer_sky = ({\n id: \"sky\",\n type: \"sky\",\n paint: {\n \"sky-type\": \"atmosphere\",\n \"sky-atmosphere-sun\": [0.0, 0.0],\n \"sky-atmosphere-sun-intensity\": 15\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"### Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoidmluY2VudHNhcmFnbyIsImEiOiJjamxwa3JkaWkwZ3BjM3dudmZmazQwYjI2In0.eUzks_hqH-QVIlnXUKmKsA\";\n const href = await require.resolve(\"https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.css\");\n document.head.appendChild(html``);\n\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"compare = require('https://bundle.run/mapbox-gl-compare@0.4.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"coors = location\n ? getcoords(location)\n : select === \"Glaciar del Aneto (Spain)\"\n ? [0.65, 42.6375]\n : [-147.079, 61.16]","pinned":true,"hidden":false,"mode":"ojs"},{"id":216,"value":"//mutable coors = getcoords(location) //:[position.coords.longitude, position.coords.latitude]","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"getcoords = (location) =>\n d3\n .json(\n `https://nominatim.openstreetmap.org/search.php?city=${location}&format=jsonv2`\n )\n .then((r) => [+r[0].lon, +r[0].lat])","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"// To apply base styles when the notebook is downloaded/exported\nsubstratum({invalidation})","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"import {substratum} from \"@categorise/substratum\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}