{ mutable loadingTiledPoi = true; let container = html`

`; // Give the container dimensions. yield container; // set the targomo client const client = tgmCoreClient("westcentraleurope"); // Create the "map" object with the mapboxgl.Map constructor, referencing // the container div let map = new mapboxgl.Map({ container, center: [7.874608, 46.687638], zoom: 10, style: client.basemaps.getGLStyleURL("Bright"), scrollZoom: false, attributionControl: false }) .addControl(new mapboxgl.NavigationControl()) .addControl( new mapboxgl.AttributionControl({ compact: true, customAttribution: attribution }) ); const POI_URL = `https://api.targomo.com/pointofinterest/{z}/{x}/{y}.mvt` + `?apiKey=${targomoKey()}&group=g_lodging&loadAllTags=true&layerType=node`; map.on("load", async () => { map.addLayer({ id: "poi", type: "circle", source: { type: "vector", tiles: [POI_URL], minzoom: 9 }, "source-layer": "poi", paint: { "circle-radius": { property: "numOfPois", // make circle bigger if POIs are aggregated stops: [ [1, 3], [10, 10] ] }, "circle-color": [ "match", ["get", "groupId"], "alpine_hut", "hsl(360,100%,40%)", "apartment", "hsl(360,100%,42%)", "chalet", "hsl(360,100%,44%)", "camp_site", "hsl(360,100%,46%)", "caravan_site", "hsl(360,100%,48%)", "guest_house", "hsl(360,100%,50%)", "hostel", "hsl(360,100%,52%)", "motel", "hsl(360,100%,54%)", "tourism_hotel", "hsl(360,100%,56%)", "building_hotel", "hsl(360,100%,58%)", "hsl(360,100%,60%)" // all other results - aggregates in this case ] } }); mutable loadingTiledPoi = false; // Create a popup, but don't add it to the map yet. const popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); // Change the cursor to a pointer when the mouse is over the poi layer map.on("mouseenter", "poi", (e) => { map.getCanvas().style.cursor = "pointer"; let description = ""; if (e.features[0].properties.numOfPois > 1) { description += `Multiple POIs
${e.features[0].properties.numOfPois} POIs here,
zoom in to see details`; } else { description += `POI: ${e.features[0].properties.groupId.replace( /^\w/, (c) => c.toUpperCase() )}
${e.features[0].properties["tag-name"]}`; } popup.setLngLat(e.lngLat).setHTML(description).addTo(map); }); // Change it back to a pointer when it leaves. map.on("mouseleave", "poi", () => { map.getCanvas().style.cursor = ""; popup.remove(); }); }); }