27:null 28:["$","title",null,{"children":"Map compare visual | LiangweiOIO | Observable"}] 2d:T4e4,dom = html`

`2e:T545,mapbox_map_1 = { var map = new mapboxgl.Map({ container: dom.querySelector('#before'), center: [0, -90], pitchWithRotate: true, zoom: 1, style: { version: 8, sources: { mock: { center: [0, 0, 0], format: "pbf", maxzoom: 6, minzoom: 0, name: "Mock", bounds: [-180, -85.738076382392, 180, 84.79842793857], profile: "mercator", basename: "Mock", tilejson: "2.0.0", scheme: "xyz", type: "vector" } }, layers: [ { id: "background-layer", type: "background", paint: { "background-color": "rgba(0,0,0,0)" } } ] } }); map.on('load', f => { map.setRenderWorldCopies(false); map.addSource("countries", { type: 'geojson', data: geojson, tolerance: 0.9 }); map.addLayer({ id: "fills", type: "fill", source: "countries", paint: { "fill-color": "#00DABB" } }); map.addLayer({ id: "borders", type: "line", source: "countries", paint: { "line-color": "#fff", "line-width": 1.2 } }); //end map load cb }); invalidation.then(() => { map.remove(); }); return map; }2f:T544,mapbox_map_2 = { var map = new mapboxgl.Map({ container: dom.querySelector('#after'), center: [0, -90], pitchWithRotate: true, zoom: 1, style: { version: 8, sources: { mock: { center: [0, 0, 0], format: "pbf", maxzoom: 6, minzoom: 0, name: "Mock", bounds: [-180, -85.738076382392, 180, 84.79842793857], profile: "mercator", basename: "Mock", tilejson: "2.0.0", scheme: "xyz", type: "vector" } }, layers: [ { id: "background-layer", type: "background", paint: { "background-color": "rgba(0,0,0,0)" } } ] } }); map.on('load', f => { map.setRenderWorldCopies(false); map.addSource("countries", { type: 'geojson', data: geojson, tolerance: 0.9 }); map.addLayer({ id: "fills", type: "fill", source: "countries", paint: { "fill-color": "#9B51E0" } }); map.addLayer({ id: "borders", type: "line", source: "countries", paint: { "line-color": "#fff", "line-width": 1.2 } }); //end map load cb }); invalidation.then(() => { map.remove(); }); return map; }30:[{"id":"20bffb03f642f7076ea853f8af369986f6b7eba2178d64ff0e8ee5c25887ed46b561efbf7bc0aafc202be1089e0c5c5da0bf41ed4c8c59a8992de6ca6f45728a","href":"https://static.observableusercontent.com/files/20bffb03f642f7076ea853f8af369986f6b7eba2178d64ff0e8ee5c25887ed46b561efbf7bc0aafc202be1089e0c5c5da0bf41ed4c8c59a8992de6ca6f45728a","name":"Subtract.svg","type":"image/svg+xml","lastModified":1676788404943.563,"size":391},{"id":"fcf99dd89a07f644af2433e6129d63a2d793858a184b0de982170bfb8374d24d368a3d8e0047a537880ce75ea052c23c2b03e3243bec1189b099d453d1eaec3a","href":"https://static.observableusercontent.com/files/fcf99dd89a07f644af2433e6129d63a2d793858a184b0de982170bfb8374d24d368a3d8e0047a537880ce75ea052c23c2b03e3243bec1189b099d453d1eaec3a","name":"custom.geo.json","type":"application/json","lastModified":1676788404943.563,"size":577300}] 2b:{"id":"8fedc35ac28d3a07","slug":null,"title":"Map compare visual","thumbnail":"6f410d73c342787019a2704d563c6b7e8738d930bf9607c8fe4c34e8e90f169f","access_level":"public","create_time":"$D2023-02-19T06:33:24.943Z","update_time":"$D2023-02-19T06:34:14.232Z","view_time":null,"first_public_time":"$D2023-02-19T06:33:24.943Z","has_unpublished_edits":null,"fork":{"id":"b50737b0f4f3c978","slug":"map-compare-visual","title":"Map compare visual","owner":{"id":"ebdd8a722ae381e2","login":"a10k","name":"Alok Pepakayala"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5b1f845af070d16a","login":"liangweioio","name":"LiangweiOIO","avatar_url":"https://avatars-next.observableusercontent.com/3b431401e188c19af0c2179ded1d97a2859f4388e4169e94bc8ebec04b269a41","tier":"starter_2024"},"version":192,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d8b9f18ecdde6a17","login":"liangweioio","name":"LiangweiOIO","avatar_url":"https://avatars-next.observableusercontent.com/3b431401e188c19af0c2179ded1d97a2859f4388e4169e94bc8ebec04b269a41","tier":null}],"members":[{"type":"individual","id":"d8b9f18ecdde6a17","login":"liangweioio","name":"LiangweiOIO","avatar_url":"https://avatars-next.observableusercontent.com/3b431401e188c19af0c2179ded1d97a2859f4388e4169e94bc8ebec04b269a41","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Map compare visual","cells":[{"id":0,"value":"md`# Map compare visual`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"md`### Map setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"mapbox_compare_maps = {\n var map = new mapboxgl.Compare(\n mapbox_map_1,\n mapbox_map_2,\n dom.querySelector('#comparison-container'),\n {\n // Set this to enable comparing two maps by mouse movement:\n //mousemove: true\n //orientation: 'horizontal'\n }\n );\n\n invalidation.then(() => {\n map.remove();\n });\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"md`### Data: world map geojson`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"geojson = FileAttachment('custom.geo.json').json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"mapboxgl = {\n window.mapboxgl = await require('mapbox-gl@1.9.1');\n return require('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.4.0/mapbox-gl-compare.js').catch(\n () => {\n return window.mapboxgl;\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2c:"$2b:body"