30:T1267,showGeoJSON = async function*(data, customStyle = [{ id: 'geojson-polygon', type: 'fill', paint: { "fill-color": '#003300', "fill-opacity": 0.5 }, filter: ["==", "$type", "Polygon"] }, { id: 'geojson-point', type: 'circle', paint: { "circle-color": "#11b4da", "circle-radius": 4, "circle-stroke-width": 1, "circle-stroke-color": "#fff" }, filter: ["==", "$type", "Point"] }, { id: 'geojson-line', type: 'line', layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": "#888", "line-width": 3 }, filter: ["==", "$type", "LineString"] }]) { let container = html`

Loading...

` const geoJSONPromise = Promise.resolve(data); container.value = geoJSONPromise; yield container; const geoJSON = await geoJSONPromise; container.querySelector('span').style.display = 'none'; // Create the \`map\` object with the mapboxgl.Map constructor, referencing // the container div let map = new mapboxgl.Map({ container: container.querySelector('div'), center: [ -73.61457, 45.524149 ], zoom: 10, style: darkMode ? 'mapbox://styles/mapbox/dark-v9' : 'mapbox://styles/mapbox/light-v9', // scrollZoom: false }); map.addControl(new mapboxgl.FullscreenControl({container})); map.on('load', () => { map.addSource('geojson', {type: 'geojson', data: geoJSON}); customStyle.forEach(layer => { map.addLayer({...layer, source: 'geojson'}); map.on('click', layer.id, event => { const features = map.queryRenderedFeatures(event.point, {layers: [layer.id]}); if (features.length >= 1) { const feature = features[0]; const [minX, minY, maxX, maxY] = bbox(feature) const popup = new mapboxgl.Popup() .setLngLat([minX + (maxX - minX) / 2, minY + (maxY - minY) / 2]) .setHTML(` ${Object.entries(feature.properties).map(([key, value]) => `` ).join('\n')}

${key}	${value}

`) .addTo(map); } }); }); map.fitBounds(bbox(geoJSON), { padding: 20, animate: false }); }); await Promises.delay(10); map.resize() // Be careful to clean up the map's resources using \`map.remove()\` whenever // this cell is re-evaluated. invalidation.then(() => map.remove()); }31:[] 2e:{"title":"Fetch GeoJSON","cells":[{"id":0,"value":"md`# Fetch GeoJSON\n\nThis notebook is designed to make fetching geojson data nicer in other notebooks. The following cell needs to be imported:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"fetchGeoJSON = async function*(url) {\n yield* showGeoJSON(fetchJSON(url));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"md`i.e. \n~~~javascript\nimport { fetchGeoJSON } from '@gampleman/fetch-geojson'\n~~~\n\nthen using \\`viewof\\` one can get a preview and data in a single call:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"viewof result = fetchGeoJSON('https://gist.githubusercontent.com/gampleman/0903af7279c6c60e6d5c85ca33361960/raw/b21a86ceb808307208970b24045cfe9bc9a6f744/malaysia.geojson?nocache')","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"md`This is built on top of these other functions, that you may wish to use as well:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"fetchJSON = url => fetch(url).then(r => r.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"md`And here are some details:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import {mapboxgl} from '@tmcw/using-mapbox-gl-js'","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"bbox = require('https://bundle.run/@turf/bbox@6.0.1').then(mod => mod.default)","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"result","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"darkMode = document.body.classList.contains(\"observablehq--dark\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}