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()); }