3e:null 3f:["$","title",null,{"children":"Map Comparison 2014 - 2022 | Boian Spassov | Observable"}] 45:T981,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: 14, 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; } }46:[] 43:{"id":"57ecfc54fba3ab3b","slug":null,"title":"Map Comparison 2014 - 2022","thumbnail":"ee7379c2790dd298a0dc37717fac5985b4adab72097d9a4afd988c76b05781e1","access_level":"public","create_time":"$D2023-08-14T11:56:26.732Z","update_time":"$D2023-08-14T11:56:26.732Z","view_time":null,"first_public_time":"$D2023-08-14T11:56:26.732Z","has_unpublished_edits":null,"fork":{"id":"3447d94cb75efe2a","slug":null,"title":"Map Comparison 2014 - 2024","owner":{"id":"f2c21786e0c9f50c","login":"cadasa","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"7730210b4bd624d6","login":"locbit","name":"Boian Spassov","avatar_url":"https://avatars-next.observableusercontent.com/0b9090b3f2beb50c8f1d4ec746062e9f4edeb4bfdd7d1d900f883723aa19a202","tier":"starter_2024","bio":"","following":false},"version":290,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b4bc492420d1eda9","login":"locbit","name":"Boian Spassov","avatar_url":"https://avatars-next.observableusercontent.com/0b9090b3f2beb50c8f1d4ec746062e9f4edeb4bfdd7d1d900f883723aa19a202","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"b4bc492420d1eda9","login":"locbit","name":"Boian Spassov","avatar_url":"https://avatars-next.observableusercontent.com/0b9090b3f2beb50c8f1d4ec746062e9f4edeb4bfdd7d1d900f883723aa19a202","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Map Comparison 2014 - 2022","cells":[{"id":0,"value":"title = md`# Map Comparison 2014 - 2022`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"dashboard = html` \n \n \n \n \n

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

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

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"viewof select_before = Inputs.select(\n new Map([\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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"viewof select_after = Inputs.select(new Map([[\"2022-11-02\", 7110],[\"2020-05-20\", 32645],[\"2019-06-26\", 645], [\"2014-06-11\", 31144],[\"2014-02-20\", 10],]), {value: 7110, label: \"Right Image\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"viewof location = Inputs.text({\n label: \"Enter Your City\",\n submit: true,\n placeholder: \"Glaciar del Aneto\"\n //value: \"Stavanger\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"location","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`\n\\`Control\\` + \\`mouse scroll\\` to zoom in/out and turn around.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"### Additional Layers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"### Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"compare = require('https://bundle.run/mapbox-gl-compare@0.4.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"coors = location ? getcoords(location) : [0.65, 42.6375]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"//mutable coors = getcoords(location) //:[position.coords.longitude, position.coords.latitude]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"// To apply base styles when the notebook is downloaded/exported\nsubstratum({invalidation})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"import {substratum} from \"@categorise/substratum\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"