31:Tb6a,{ mutable loadingBasicReachability = true; let container = html`

`; // Give the container dimensions. yield container; // set the targomo client const client = tgmCoreClient("westcentraleurope"); // definition for OSM subway entrances const osmQuery = [ { key: poiQuery.split("|")[0].split("=")[0], value: poiQuery.split("|")[0].split("=")[1] } ]; // Create the "map" object with the mapboxgl.Map constructor, referencing // the container div let map = new mapboxgl.Map({ container, center: sourcePoint, zoom: 13.5, style: client.basemaps.getGLStyleURL("Light"), scrollZoom: false, attributionControl: false }) .addControl(new mapboxgl.NavigationControl()) .addControl( new mapboxgl.AttributionControl({ compact: true, customAttribution: attribution }) ); map.on("load", async () => { const marker = new mapboxgl.Marker(); marker.setLngLat(sourcePoint).addTo(map); const options = { maxEdgeWeight: 900, travelType: "walk", edgeWeight: "time", format: "geojson", osmTypes: osmQuery }; const pois = await client.pois.reachable(sourcePoint, options); // reachable metro stops map.addLayer({ id: "metro", type: "circle", source: { type: "geojson", data: pois }, paint: { "circle-radius": { base: 4, stops: [ [8, 4], [22, 80] ] }, "circle-color": { property: "edgeWeight", stops: [ [180, "#1a9641"], [360, "#a6d96a"], [540, "#ffffbf"], [720, "#fdae61"], [900, "#d7191c"] ] } } }); mutable loadingBasicReachability = false; map.on("click", "metro", function (e) { var coordinates = e.features[0].geometry.coordinates.slice(); const time = Math.round((e.features[0].properties.edgeWeight / 60) * 10) / 10; const html = `${ JSON.parse(e.features[0].properties.tags).name }
${time} minutes`; // Ensure that if the map is zoomed out such that multiple // copies of the feature are visible, the popup appears // over the copy being pointed to. while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; } new mapboxgl.Popup().setLngLat(coordinates).setHTML(html).addTo(map); }); // Change the cursor to a pointer when the mouse is over the places layer. map.on("mouseenter", "metro", function () { map.getCanvas().style.cursor = "pointer"; }); // Change it back to a pointer when it leaves. map.on("mouseleave", "metro", function () { map.getCanvas().style.cursor = ""; }); }); }32:Tc1b,{ 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(); }); }); }33:T951,{ mutable loadingTiledHex = 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: sourcePoint, zoom: 11, style: client.basemaps.getGLStyleURL("Light"), scrollZoom: false, 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()}&group=bar&group_pub&group_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, "#fc9272", 20, "#de2d26" ], "fill-opacity": 0.75 } }); // 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`; new mapboxgl.Popup().setLngLat(e.lngLat).setHTML(description).addTo(map); }); mutable loadingTiledHex = false; }); }34:Tf66,tiledReachability = { mutable loadingReachableTiled = true; let container = html`

`; // Give the container dimensions. yield container; const source = { lng: 12.483262, lat: 41.901057, id: "Trevi" }; // set the targomo client const client = tgmCoreClient("westcentraleurope"); // container for routed POIs let poiLookup = {}; // Create the "map" object with the mapboxgl.Map constructor, referencing // the container div let map = new mapboxgl.Map({ container, center: source, zoom: 12.5, style: client.basemaps.getGLStyleURL("Light"), scrollZoom: false, attributionControl: false }) .addControl(new mapboxgl.NavigationControl()) .addControl( new mapboxgl.AttributionControl({ compact: true, customAttribution: attribution }) ); // add source to map const marker = new mapboxgl.Marker().setLngLat(source).addTo(map); // groups we want to view/analyze const osmQuery = [ { key: "group", value: "restaurant" }, { key: "group", value: "cafe" } ]; // layerGeometryDetailPerTile, layerMaxGeometryDetailLevel and maxGeometryCount // used to ensure that POIs are not aggregated by proximity, // so we can match them to reachability results const POI_URL = `https://api.targomo.com/pointofinterest/{z}/{x}/{y}.mvt` + `?apiKey=${targomoKey()}&${osmQuery .map((g) => `${g.key}=${g.value}`) .join("&")}&loadAllTags=true` + `&layerType=node&layerGeometryDetailPerTile=50&layerMaxGeometryDetailLevel=50` + `&maxGeometryCount=10000000`; map.on("load", async () => { map.addLayer({ id: "poi", type: "circle", source: { type: "vector", tiles: [POI_URL], minzoom: 9 }, filter: ["==", "numOfPois", 1], "source-layer": "poi", paint: { "circle-radius": 2.5, "circle-color": "#aaa" } }); const curLatLng = marker.getLngLat(); // 30 minutes const maxEdgeWeight = 1800; const options = { maxEdgeWeight: maxEdgeWeight, travelType: travelMode, edgeWeight: "time", osmTypes: osmQuery }; // measure travel time up to 20 minutes from the marker poiLookup = await client.pois.reachable( { id: 0, lat: curLatLng.lat, lng: curLatLng.lng }, options ); // build the circle color expression based on the POI ids let expression = ["match", ["get", "osmId"]]; for (let [key, value] of Object.entries(poiLookup)) { if (value.edgeWeight) { const hue = Math.round((1 - value.edgeWeight / maxEdgeWeight) * 120); const color = `hsl(${hue},70%,50%)`; expression.push(key, color); } } expression.push("#aaa"); map.setPaintProperty("poi", "circle-color", expression); mutable loadingReachableTiled = 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"; const props = e.features[0].properties; let description = ""; description += `POI: ${props.groupId.replace(/^\w/, (c) => c.toUpperCase() )}
${ props["tag-name"] ? props["tag-name"] : "Name not listed..." }`; const walkTime = poiLookup[props.osmId] ? Math.round((poiLookup[props.osmId].edgeWeight / 60) * 10) / 10 : null; description += walkTime ? `
Walk time: ${walkTime} minutes` : ""; 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(); }); }35:T877,/* curl https://api.observablehq.com/document/@targomo/gtfs-points-of-interest | \ jq '. | {slug,thumbnail,title,publish_time,update_time,owner: .owner | {name,login,avatar_url}}' */ extras = [ { slug: "public-transit-bbox-points-of-interest", thumbnail: "5b6be55a3fc4e4489485a755812d23a649bd3403ff304a66102f6549c0a5061c", title: "Public Transit BBox Points of Interest", publish_time: "2022-12-09T13:33:05.630Z", update_time: "2023-01-24T10:51:40.415Z", owner: { name: "Targomo", login: "targomo", avatar_url: "https://avatars.observableusercontent.com/avatar/39645f1242d4403a667e1c0e54a0d6755d36418f30088e89a9c65e6f84f9a3bf" } }, { slug: "points-of-interest-for-reference-map", thumbnail: "6c6852b6206f72ce3eb0d992b42dbd1316c42d85ffd871e68cd764ff53161aba", title: "Points of Interest for Reference Map", publish_time: "2022-12-09T13:29:59.706Z", update_time: "2023-01-24T10:50:23.694Z", owner: { name: "Targomo", login: "targomo", avatar_url: "https://avatars.observableusercontent.com/avatar/39645f1242d4403a667e1c0e54a0d6755d36418f30088e89a9c65e6f84f9a3bf" } }, { slug: "gtfs-points-of-interest", thumbnail: "3186a7976f432e2f184ece7800a3b2cfa047ac3d6b4f879ac7e8ed4097a410f1", title: "GTFS Points of Interest for Reference Map", publish_time: "2022-12-09T13:33:28.258Z", update_time: "2023-01-24T10:51:52.217Z", owner: { name: "Targomo", login: "targomo", avatar_url: "https://avatars.observableusercontent.com/avatar/39645f1242d4403a667e1c0e54a0d6755d36418f30088e89a9c65e6f84f9a3bf" } }, { slug: "exploring-the-15-minute-city", thumbnail: "af988a415ef605bcdb11951aab5be7a1dcad1c0f724d7eccc8571f4e202df29f", title: "Exploring the 15-minute City", publish_time: "2022-10-13T13:43:10.797Z", update_time: "2023-01-24T10:46:47.651Z", owner: { name: "Targomo", login: "targomo", avatar_url: "https://avatars.observableusercontent.com/avatar/39645f1242d4403a667e1c0e54a0d6755d36418f30088e89a9c65e6f84f9a3bf" } } ]36:[] 2f:{"title":"Deep Dive on Points of Interest","cells":[{"id":0,"value":"tgmIntro(\n \"Deep Dive on Points of Interest\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":851,"value":"md`## Global, measured, Points of Interest\nThe Places APIs are resources to locate - as well as measure access to - global POIs. Sourced from [OpenStreetMap](https://www.openstreetmap.org), we have access to worldwide coverage of a wide range of POI types. The [places layers API](https://www.targomo.com/developers/apis/places_layers/) and [places context API](https://www.targomo.com/developers/apis/places_context/) pages collect the available resources.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":857,"value":"md`## What POIs are reachable from a specific location?\nLet's see what _${\n poiQuery.split('|')[1]\n}_ are within a 30 minute walk of the _${\n sourcePoint.label\n}_, with the basic \\`reachability\\` funtionality of the POI service. [_See a basic code sample here_](https://targomo.com/developers/documentation/javascript/code_example/mapboxgl_poi/).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1341,"value":"viewof poiQuery = Inputs.radio(\n [\n { label: \"Cafés\", value: \"amenity=cafe|Cafés\" },\n {\n label: \"Metro stop entrances\",\n value: \"group=subway_entrance|Metro stop entrances\"\n }\n ],\n {\n label: html`Select POI Type`,\n value: \"amenity=cafe|Cafés\",\n // keyof: (d) => d.label,\n format: (d) => d.label,\n valueof: (d) => d.value\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1203,"value":"tgmLoader(\n loadingBasicReachability,\n 5,\n `Paris ${poiQuery.split(\"|\")[1].toLowerCase()} reachable in 15-minute walk`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":866,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":953,"value":"md`## Explore the POI Hierarchy\nThe POI service combines common OSM tags into convenient groups`","pinned":false,"hidden":false,"mode":"ojs"},{"id":956,"value":"poiHierarchy","pinned":false,"hidden":false,"mode":"ojs"},{"id":1023,"value":"md`_Click the red nodes to expand the group_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1001,"value":"chart","pinned":false,"hidden":false,"mode":"ojs"},{"id":1047,"value":"md`as such, setting \\`{\"key\":\"group\", \"value\": \"g_lodging\"}\\` as the OSM query will return POIs from the following tags: *alpine_hut, apartment, chalet, camp_site, caravan_site, guest_house, hostel, motel, tourism_hotel, building_hotel*.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":922,"value":"md`## How about just showing _lots_ of POIs?\nThe POI service can provide POIs as tiled [MVT](https://docs.mapbox.com/vector-tiles/specification/) format, allowing for performant access to large-scale data. Here, we'll look at the aforementioned \n\n\\`{\"key\":\"group\", \"value\": \"g_lodging\"}\\`\n\nquery results, as MVT tiles. [_See a basic code sample here_](https://targomo.com/developers/documentation/javascript/code_example/mvt_poi/).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1200,"value":"tgmLoader(loadingTiledPoi, 5, `Interlaken area accomodations`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1061,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1074,"value":"md`## Aggreate the results\nWith the same data, we can show concentration by aggregating to hexagons`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1196,"value":"tgmLoader(loadingTiledHex, 5, `Bars/Pubs density in Paris`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1078,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1117,"value":"md`## Combine tiles with reachability\nBy linking the reachability results with the MVT tiles, we can show both reachable and un-reachable POIs. [_See a basic code sample here_](https://targomo.com/developers/documentation/javascript/code_example/mapboxgl_poi_combined/).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1146,"value":"viewof travelMode = Inputs.radio(\n [\n { label: \"Walk\", value: \"walk\" },\n { label: \"Bike\", value: \"bike\" }\n ],\n {\n label: html`Select mode of transport`,\n value: \"walk\",\n format: (d) => d.label,\n valueof: (d) => d.value\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1189,"value":"tgmLoader(\n loadingReachableTiled,\n 5,\n `Rome cafés/restaurants reachable in 20 minutes`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1120,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1362,"value":"divingDeeper(extras)","pinned":false,"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.6.0\");\n const href = await require.resolve(\"mapbox-gl@1.6.0/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":249,"value":"sourcePoint = {\n return { id: 1, lat: 48.861133, lng: 2.335332, label: 'Musée du Louvre' };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"travelTimes = [300, 600, 900, 1200, 1500, 1800]","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"travelOptions = {\n return {\n set: (mode, edgeWeights, intersection_mode) => {\n const iMode = intersection_mode? intersection_mode : 'union'\n return {\n travelType: mode,\n travelEdgeWeights: edgeWeights,\n maxEdgeWeight: Math.max(...edgeWeights),\n edgeWeight: 'time',\n serializer: 'json',\n intersectionMode: iMode\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1376,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1178,"value":"md`Loader refs:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1181,"value":"mutable loadingBasicReachability = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":1242,"value":"mutable loadingTiledPoi = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":1245,"value":"mutable loadingTiledHex = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":1248,"value":"mutable loadingReachableTiled = false","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 tgmNotice,\n attribution,\n targomoKey,\n tgmLoader,\n tgmIntro,\n codeStyle,\n divingDeeper\n} from \"@targomo/re-usable-targomo-resources\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1332,"value":"codeStyle","pinned":false,"hidden":false,"mode":"ojs"},{"id":1307,"value":"import { chart, poiHierarchy } from \"@targomo/poi-hierarchy\"","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":"$W36","stdlib":"1","titling":"auto"}