31:T4ba,### Clustering The Places Layers API has clustering built-in - at different zoom levels, the points are grouped into single points, with an attribute `numOfPois` indicating how many points are in the cluster. If `numOfPois > 1`, there is clustering. This can be used for labeling cluster size, scaling the point symbology, or filtering for clusters/singletons. This will cluster all points together - which might not be the desired outcome. By adding explicit clusters, we can not only filter by that cluster, but the actual clustering as well. For example, if we define clusters for **S-Bahn** and **U-Bahn**: `https://api.targomo.com/pointofinterest/{z}/{x}/{y}.mvt?c_subway=de-gtfs-stops=subway&c_suburban=de-gtfs-stops=suburban`, S-Bahn stops will not be clustered with U-Bahn stops. We can also influence *when* the clustering happens - `layerGeometryDetailPerTile` is the difference between the current map zoom and the zoom level used for the clustering. The default is 7, so if I am at **z8**, the POIs are being clustered at **z17**. For a more aggressive clustering, I can _reduce_ to (for example) `layerGeometryDetailPerTile=5`. This would mean that the POIs are now being clustered at **z13**.32:Tcc4,{ 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: options.center ? options.center : [9.992476, 53.550112], zoom: options.zoom ? options.zoom : 10, style: client.basemaps.getGLStyleURL( options.style ? options.style : "Basic" ), 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()}&de-gtfs-stops=${type}&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, 2], [10, 8] ] }, "circle-color": options.pointColor ? options.pointColor : "#f0f" } }); // 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) => { console.log(e.features[0].properties); map.getCanvas().style.cursor = "pointer"; let description = ""; if (e.features[0].properties.numOfPois > 1) { description += `Multiple ${type} POIs
${e.features[0].properties.numOfPois} POIs here,
zoom in to see details`; } else { description += `${type.toUpperCase()}: ${ e.features[0].properties["tag-stop_name"] }
Modes served: ${e.features[0].properties["tag-category"] .split(";") .join(", ")}
Routes: ${e.features[0].properties["tag-routes"] .toString() .split(";") .map( (r) => `${r}` ) .join("")}`; } 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(); }); }); }34:[{"id":"34a6910170c0ed1c61324679c8ef8b15fccd6099fd43743c1948f064716b0f84b147c93a6c42ed4c064308a11d9b2e3052ab5277764a7ddbe8414e440fe1bbc3","href":"https://static.observableusercontent.com/files/34a6910170c0ed1c61324679c8ef8b15fccd6099fd43743c1948f064716b0f84b147c93a6c42ed4c064308a11d9b2e3052ab5277764a7ddbe8414e440fe1bbc3","name":"rail.png","type":"image/png","lastModified":1652093194480.69,"size":1394},{"id":"0d310fb99930c6cd68f192c6c221b5dd8a2ea70eaa2e66181d1dccf9ca0151c44df5d786d4bc3bf4ea62bc05c31e838e3ba377cdd2bc44ec533cff61999041b3","href":"https://static.observableusercontent.com/files/0d310fb99930c6cd68f192c6c221b5dd8a2ea70eaa2e66181d1dccf9ca0151c44df5d786d4bc3bf4ea62bc05c31e838e3ba377cdd2bc44ec533cff61999041b3","name":"ferry.png","type":"image/png","lastModified":1652093863348.765,"size":1650},{"id":"1d4fd7bed57f030897e225dc1ea171f3a2e10debfb40d08bf3695d97bf28c9c8ce7b80e211bcdfd5071f2bf76f10214ee875c98a4eaa079c5d17b20ad053a031","href":"https://static.observableusercontent.com/files/1d4fd7bed57f030897e225dc1ea171f3a2e10debfb40d08bf3695d97bf28c9c8ce7b80e211bcdfd5071f2bf76f10214ee875c98a4eaa079c5d17b20ad053a031","name":"gtfs-transit.png","type":"image/png","lastModified":1652097324091.016,"size":1438951},{"id":"05e8a2df81414cec94bbf50f544d565111cca81d3655527e7ba9308699e1fb2dd5bcea1e810d64abfdbf396c45570b84d50e7ecea1e670f1556e29bd14e945cc","href":"https://static.observableusercontent.com/files/05e8a2df81414cec94bbf50f544d565111cca81d3655527e7ba9308699e1fb2dd5bcea1e810d64abfdbf396c45570b84d50e7ecea1e670f1556e29bd14e945cc","name":"s-bahn.png","type":"image/png","lastModified":1652093194478.444,"size":2466},{"id":"f06a19dbdb5d4594ee937c546618235647d08f9f81a8d5d9561bf1ddfd8f6cfc37981b6a0447c10b29137ca3ce168e8ee958bbac681b4500fa218969ebb1797f","href":"https://static.observableusercontent.com/files/f06a19dbdb5d4594ee937c546618235647d08f9f81a8d5d9561bf1ddfd8f6cfc37981b6a0447c10b29137ca3ce168e8ee958bbac681b4500fa218969ebb1797f","name":"u-bahn.png","type":"image/png","lastModified":1652093194442.771,"size":979},{"id":"daf27547550c779186af937c964e9e606ac493ee09be430bcc833a5bcff560d13cfa435180a21df4298a527f669b28a36109281f9c3fce96e464320335093aff","href":"https://static.observableusercontent.com/files/daf27547550c779186af937c964e9e606ac493ee09be430bcc833a5bcff560d13cfa435180a21df4298a527f669b28a36109281f9c3fce96e464320335093aff","name":"de-bus.png","type":"image/png","lastModified":1652093194461.078,"size":2247},{"id":"ace0989f469e6dc9a6b4487bedcc51b3e2166033777933939eaa946bd49e781180f722ecc59769fde604923111eec9471c07b691bcab3fe5dddb9c4e2cac6622","href":"https://static.observableusercontent.com/files/ace0989f469e6dc9a6b4487bedcc51b3e2166033777933939eaa946bd49e781180f722ecc59769fde604923111eec9471c07b691bcab3fe5dddb9c4e2cac6622","name":"de-tram.png","type":"image/png","lastModified":1652093194504.982,"size":1163}] 2f:{"title":"GTFS Points of Interest for Reference Map","cells":[{"id":0,"value":"tgmIntro(\"GTFS Points of Interest for Reference Map\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1908,"value":"FileAttachment(\"gtfs-transit.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":922,"value":"md`## POI Access Methods\nThe POI service can provide POIs as \n- [tiled MVT](https://docs.targomo.com/#tag/Places-Layers-API/paths/~1pointofinterest~1{zoom}~1{x}~1{y}.mvt/get)\n- [tiled GeoJSON](https://docs.targomo.com/#tag/Places-Layers-API/paths/~1pointofinterest~1{zoom}~1{x}~1{y}.geojson/get)\n- [BoundingBox request](https://docs.targomo.com/#tag/Places-Layers-API/paths/~1pointofinterest~1boundingBox~1/get)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1460,"value":"## GTFS-Based POI group for Germany\nTargomo has built a prototype POI group for public transit based on actual GTFS data as used by Targomo's routing engine. This custom dataset is organized under the `de-gtfs-stops` group. For the time being this dataset is limited to specific apikeys...\n","pinned":false,"hidden":false,"mode":"md"},{"id":1555,"value":"_**General route:**_ `https://api.targomo.com/pointofinterest/{z}/{x}/{y}.mvt?group=de-gtfs-stops`","pinned":false,"hidden":false,"mode":"md"},{"id":1568,"value":"viewof modes = Inputs.checkbox(\n [\"bus\", \"ferry\", \"rail\", \"suburban\", \"subway\", \"tram\"],\n { label: \"Select GTFS type\", value: [\"bus\"] }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1550,"value":"_**Sub mode types:**_ `https://api.targomo.com/pointofinterest/{z}/{x}/{y}.mvt?${modes.map(m => `de-gtfs-stops=${m}`).join('&')}`","pinned":false,"hidden":false,"mode":"md"},{"id":1930,"value":"_**Sub mode types, cluster groups:**_ `https://api.targomo.com/pointofinterest/{z}/{x}/{y}.mvt?${modes.map(m => `c_${m}=de-gtfs-stops=${m}`).join('&')}`","pinned":false,"hidden":false,"mode":"md"},{"id":1693,"value":"## POI properties\n | tag | example | description | \n | --- | --- | --- | \n | `stop_id` | -487349 | internal id | \n | `name` | Milastr. (Berlin) | given name | \n | `stop_name` | Milastr. (Berlin) | source field for \"name\", therefore duplicate | \n | `routes` | M1;N2 | list of all route names served by stop | \n | `category` | bus;tram | list of categories served by stop |\n | `categories` | bus,tram | source for \"category\", therefore duplicate | \n | `primary` | tram |\"hierarchical primary\" type (see below) | ","pinned":false,"hidden":false,"mode":"md"},{"id":1663,"value":"### Multi-use stops\nMany stops can serve multiple modes of transport. If selecting individual types, these stops will show up in both, however if you select the entire group they will only be present once. The attribute `tag-category` will have a list of types served (i.e. `bus;tram`), and the attribute `tag-primary` will have the \"hierarchical primary\" type. This is based on the following hierarchy:\n\n| rank | type |\n| --- | --- |\n| 1 | rail |\n| 2 | suburban |\n| 3 | subway |\n| 4 | tram |\n| 5 | bus |\n| 6 | funicular |\n| 7 | ferry |\n| 8 | aerial |\n\nTherefore, a stop serving `bus;tram` would have `tag-primary: tram`","pinned":false,"hidden":false,"mode":"md"},{"id":1915,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":1326,"value":"# Public Transport","pinned":false,"hidden":false,"mode":"md"},{"id":1200,"value":"
\n## Bus Stops\nThe most common public transport method, bus stops are grouped into `de-gtfs-stops=bus`.","pinned":false,"hidden":false,"mode":"md"},{"id":1607,"value":"typeMap(\"bus\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1367,"value":"
\n## Tram Stops\nTrams are different from other rail modes in that the rails are most commonly in the roadway itself, and not on a separate corridor. Grouped into `de-gtfs-stops=tram`.","pinned":false,"hidden":false,"mode":"md"},{"id":1373,"value":"typeMap(\"tram\", { center: [13.446677, 52.503556] })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1384,"value":"
\n## Subway Stops (U-Bahn)\nUnderground (primarily) rail lines. Grouped into `de-gtfs-stops=subway`.","pinned":false,"hidden":false,"mode":"md"},{"id":1389,"value":"typeMap(\"subway\", { center: [13.446677, 52.503556] })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1406,"value":"
\n## Suburban Train Stops (S-Bahn)\nUrban-Suburban connection trains. Grouped into `de-gtfs-stops=suburban`.","pinned":false,"hidden":false,"mode":"md"},{"id":1398,"value":"typeMap(\"suburban\", { center: [13.446677, 52.503556] })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1654,"value":"
\n## Rail Stops\nGeneral rail stops (DB, Regio, etc.). Grouped into `de-gtfs-stops=rail`.","pinned":false,"hidden":false,"mode":"md"},{"id":1659,"value":"typeMap(\"rail\", { center: [13.446677, 52.503556] })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1637,"value":"
\n## Ferries\nwater-based transport. Grouped into `de-gtfs-stops=ferry`.","pinned":false,"hidden":false,"mode":"md"},{"id":1643,"value":"typeMap(\"ferry\", { center: [9.960285, 53.540636], zoom: 12 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1705,"value":"## Tying it all together\n","pinned":false,"hidden":false,"mode":"md"},{"id":1709,"value":"$32","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.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":1593,"value":"propsDisplay = function (props) {\n return `\n tag-category: ${props[\"tag-category\"]}
\n tag-categories: ${props[\"tag-categories\"]}
\n tag-name: ${props[\"tag-name\"]}
\n tag-primary: ${props[\"tag-primary\"]}
\n tag-routes: ${props[\"tag-routes\"]}\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1599,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1673,"value":"codeStyle","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} 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"},{"id":1859,"value":"iconlookup = {\n return {\n rail: await FileAttachment(\"rail.png\").image(),\n subway: await FileAttachment(\"u-bahn.png\").image(),\n suburban: await FileAttachment(\"s-bahn.png\").image(),\n tram: await FileAttachment(\"de-tram.png\").image(),\n bus: await FileAttachment(\"de-bus.png\").image(),\n ferry: await FileAttachment(\"ferry.png\").image()\n };\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}