2d:null 2e:["$","title",null,{"children":"mapbox-gl-compare example | Ricky Reusser | Observable"}] 33:T409,viewof maps = { // Note that we minimize cell dependencies and assign styles in the // `styleUpdateTrigger` cell so that we don't need to reinstantiate // the maps just to change the style. The same goes for applying map // dimensions. var before = new mapboxgl.Map({ container: container.before }); var after = new mapboxgl.Map({ container: container.after }); // Huge race condition. Wait 500ms for maps to load. FIXME. new Promise(resolve => setTimeout(resolve, 500)).then(() => { const compare = new mbglCompare(before, after, container.container, { mousemove: false, orientation: 'vertical' }); // Avoid duplicate instances by cleaning up when cell is re-evaluated invalidation.then(() => { before.remove(); after.remove(); compare.remove(); }); // Return the maps as the (viewof) cell output container.container.value = { before, after, compare }; container.container.dispatchEvent(new CustomEvent('input')); }); return container.container; }34:[] 31:{"id":"a8a07283711cb406","slug":"mapbox-gl-compare-test","title":"mapbox-gl-compare example","thumbnail":"5b06d6a43e0ef9efc289f6c5d9db40c62ae1b424a81d5db70bb87ee07305a37a","access_level":"public","create_time":"$D2021-06-22T20:38:55.485Z","update_time":"$D2021-08-31T20:57:05.439Z","view_time":null,"first_public_time":"$D2021-06-22T21:06:31.728Z","has_unpublished_edits":null,"fork":true,"stars":7,"starred":false,"owner":{"type":"team","id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/49c18a2ac0092176d4ea8348a1dd538e0b460b086b89d602b8d21ffe0821d92e","tier":"starter_2024"},"version":295,"publish_version":295,"role":null,"authored":false,"authors":[{"type":"individual","id":"908c4be2279a714e","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/fa41989f47bb986723af5b9c22176cb503748426f56e565000ea93acd9eab86c","tier":null}],"members":[{"type":"individual","id":"908c4be2279a714e","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/fa41989f47bb986723af5b9c22176cb503748426f56e565000ea93acd9eab86c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":{"id":"f9a9c82bc8ea4992","slug":"mapbox-dev-tests","title":"Mapbox","owner":{"id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser"}},"type":"notebook","body":{"title":"mapbox-gl-compare example","cells":[{"id":146,"value":"md`# mapbox-gl-compare example\n\nA test of [mapbox-gl-compare](https://github.com/mapbox/mapbox-gl-compare), imported manually as in Observable via [@rreusser/mapbox-gl-compare](https://observablehq.com/@rreusser/mapbox-gl-compare).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"mapboxgl = {\n const mbgl = await require('https://api.mapbox.com/mapbox-gl-js/v2.3.0/mapbox-gl.js');\n if (!mbgl.accessToken) {\n mbgl.accessToken = access_token;\n const href = await require.resolve(\n 'https://api.mapbox.com/mapbox-gl-js/v2.3.0/mapbox-gl.css'\n );\n document.head.appendChild(html``);\n }\n return mbgl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"viewof access_token = Text({\n value:\n \"pk.eyJ1IjoicnJldXNzZXIiLCJhIjoiY2tsNzNnN2xwMXJ3bTJxcWplaHptZmtmNiJ9.4jyhYK5B3nCMw2NTD761hg\",\n label: 'Access token'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"viewof beforeStyle = Text({\n value: 'mapbox://styles/mapbox/light-v9',\n label: 'Style A'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"viewof afterStyle = Text({\n value: 'mapbox://styles/mapbox/dark-v9',\n label: 'Style B'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"viewof hash = Text({\n label: 'location hash input',\n value: '#4.280/40.93690/-2.63698/0.00/0.00'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"viewof hashOutput = {\n const map = maps.before;\n const hash = getHash(map);\n const hashOut = html``;\n const container = html`

${hashOut}

`;\n hashOut.value = '#' + hash;\n container.value = parseHash(hash);\n map.on('idle', () => {\n const hash = getHash(map);\n container.value = parseHash(hash);\n hashOut.value = '#' + hash;\n hashOut.dispatchEvent(new CustomEvent('input'));\n });\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"mapDimensions = [width, Math.floor(width * 0.7)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"container = {\n const before = html`

`;\n const after = html`

`;\n const container = html`

${before}${after}

`;\n return { container, before, after };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"styleUpdateTrigger = {\n // Update the style and wait 500ms until it's fully loaded... can probably do better\n return new Promise(function(resolve, reject) {\n maps.before.setStyle(beforeStyle);\n maps.after.setStyle(afterStyle);\n setTimeout(resolve, 500);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"resizeTrigger = {\n // Resize the map without instantiating a new map\n container.container.style.width = `${Math.floor(mapDimensions[0])}px`;\n container.container.style.height = `${Math.floor(mapDimensions[1])}px`;\n maps.before.resize();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"hashUpdateTrigger = {\n // Depend on hash and update the map whenever the hash input changes\n if (!hash.length) return;\n const loc = parseHash(hash);\n [maps.before, maps.after].forEach(map => {\n map.setZoom(loc.zoom);\n map.setCenter(loc);\n map.setBearing(loc.bearing);\n map.setPitch(loc.pitch);\n });\n return loc;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md`## Definitions and imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"import { mbglCompare, mbglCompareCSS } from '879d15b85952b843'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"import { Text } from '@observablehq/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"function parseHash(hash) {\n hash = hash.replace(/^#/, '');\n const parts = hash\n .split('/')\n .map(x => (isNaN(parseFloat(x)) ? 0 : parseFloat(x)));\n while (parts.length < 5) parts.push(0);\n const [zoom, lat, lng, bearing, pitch] = parts;\n return { zoom, lat, lng, bearing, pitch };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"function getHash(map) {\n const zoom = map.getZoom().toFixed(3);\n const lng = map.getCenter().lng.toFixed(5);\n const lat = map.getCenter().lat.toFixed(5);\n const bearing = map.getBearing().toFixed(2);\n const pitch = map.getPitch().toFixed(2);\n return `${zoom}/${lat}/${lng}/${bearing}/${pitch}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"mbglCompareCSS","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"