{ const container = html`

`; yield container; // Create map instance with CARTO light basemap const map = new mapboxgl.Map({ container, style: { version: 8, sources: { "basemap-tiles": { type: "raster", tiles: [ "https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png", "https://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png", "https://c.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png", "https://d.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png" ], tileSize: 256, attribution: '© OpenStreetMap, © CARTO' } }, layers: [ { id: "basemap", type: "raster", source: "basemap-tiles", minzoom: 0, maxzoom: 20 } ] } }); // Center map on query result map.fitBounds(stitchedFeatureCollection.bbox, { animate: false, padding: 32 }); map.on("load", () => { // Add query result as source map.addSource("geojson", { type: "geojson", data: stitchedFeatureCollection }); // Fill polygons blue, with highlight on mouseover map.addLayer({ id: "polygons", type: "fill", source: "geojson", paint: { "fill-color": "steelblue", "fill-opacity": [ "case", ["boolean", ["feature-state", "mouseover"], false], 0.5, 0.1 ] } }); // Add blue outline map.addLayer({ id: "outline", type: "line", source: "geojson", paint: { "line-width": 2, "line-color": "steelblue", "line-opacity": 0.5 } }); // Show attributes on mouseover const popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); map.on('mousemove', 'polygons', ({ features, lngLat }) => { if (features.length) { map.getCanvas().style.cursor = 'pointer'; map.removeFeatureState({ source: 'geojson' }); features.forEach(feature => { map.setFeatureState(feature, { mouseover: true }); }); const tables = features.map( ({ properties }) => html` ${[...Object.entries(properties)].map( ([key, value]) => html` ` )}

${key}	${value}

` ); popup .setLngLat(lngLat) .setHTML(html`

${tables}

`.outerHTML) .addTo(map); } }); map.on('mouseleave', 'polygons', () => { map.getCanvas().style.cursor = ''; map.removeFeatureState({ source: 'geojson' }); popup.remove(); }); }); // Clean up the map's resources whenever this cell is re-evaluated invalidation.then(() => map.remove()); }