31: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; }32:[] 2f:{"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"},{"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"},{"id":9,"value":"viewof access_token = Text({\n value:\n \"pk.eyJ1IjoicnJldXNzZXIiLCJhIjoiY2tsNzNnN2xwMXJ3bTJxcWplaHptZmtmNiJ9.4jyhYK5B3nCMw2NTD761hg\",\n label: 'Access token'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"viewof beforeStyle = Text({\n value: 'mapbox://styles/mapbox/light-v9',\n label: 'Style A'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"viewof afterStyle = Text({\n value: 'mapbox://styles/mapbox/dark-v9',\n label: 'Style B'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":167,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":22,"value":"mapDimensions = [width, Math.floor(width * 0.7)]","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":55,"value":"md`## Definitions and imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"import { mbglCompare, mbglCompareCSS } from '879d15b85952b843'","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"import { Text } from '@observablehq/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":42,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"mbglCompareCSS","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}