30:T9d6,{ let container = html`

`; // Give the container dimensions. yield container; const client = tgmCoreClient('westcentraleurope', true) // Create the "map" object with the mapboxgl.Map constructor, referencing // the container div let map = new mapboxgl.Map({ container, center: { id: 1, lat: 48.861133, lng: 2.335332, label: 'Musée du Louvre' }, zoom: 12, style: client.basemaps.getGLStyleURL('Light'), attributionControl: false }) .addControl(new mapboxgl.NavigationControl()) .addControl( new mapboxgl.AttributionControl({ compact: true, customAttribution: attribution }) ); // layerGeometryDetailPerTile: Difference between the zoom level of the map and the one used to build the geometries. // layerMinGeometryDetailLevel: Minimum zoom level used to build the geometries. // layerMaxGeometryDetailLevel: Maximum zoom level used to build the geometries. const POI_URL = `https://api.targomo.com/pointofinterest/{z}/{x}/{y}.mvt` + `?apiKey=${targomoKey()}&amenity=bar&amenity=pub&amenity=biergarten&layerType=hexagon&layerGeometryDetailPerTile=5&layerMinGeometryDetailLevel=6&layerMaxGeometryDetailLevel=16`; map.on('load', async () => { map.addLayer({ id: 'poi-hex', type: 'fill', source: { type: 'vector', tiles: [POI_URL], minzoom: 9 }, 'source-layer': 'poi', paint: { 'fill-outline-color': 'rgba(0,0,0,0)', 'fill-color': [ 'interpolate-hcl', ['linear'], ['get', 'numOfPois'], 1, "#ffffcc", 4, "#c7e9b4", 8, "#7fcdbb", 12, "#41b6c4", 16, "#2c7fb8", 20, "#253494" ], 'fill-opacity': 0.75 } }, 'place_other'); // Change the cursor to a pointer when the mouse is over the poi layer map.on("mouseenter", "poi-hex", () => { map.getCanvas().style.cursor = "pointer"; }); // Change it back to a pointer when it leaves. map.on("mouseleave", "poi-hex", () => { map.getCanvas().style.cursor = ""; }); map.on("click", "poi-hex", e => { const description = `${e.features[0].properties.numOfPois} Bars/Pubs/Beergardens`; new mapboxgl.Popup() .setLngLat(e.lngLat) .setHTML(description) .addTo(map); }); }); }31:[] 2e:{"title":"Bars/Pub Density","cells":[{"id":1369,"value":"md`# Bars/Pub Density`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1078,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1380,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":476,"value":"md`

\n## General utilities used for the examples\n\nMost of what you'll find here is similar to how you'd do it outside of [observable](https://observablehq.com), but there are several differences... Refer to our [developer resources](https://targomo.com/developers/documentation/javascript/) for a more direct path!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":794,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@1.13.1\");\n const href = await require.resolve(\"mapbox-gl@1.13.1/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":979,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"import {radio} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"md`__Get re-usable targomo elements__`","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"import {\n tgmCoreClient,\n maptilerKey,\n tgmNotice,\n attribution,\n targomoKey,\n tgmLoader,\n tgmIntro\n} from '@targomo/re-usable-targomo-resources'","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"md`Make sure you get your _own_ API key!`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}