31:T9e5,{ 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: [9.992476, 53.550112], zoom: 10, style: client.basemaps.getGLStyleURL("Basic"), // 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()}${busStopQueryString}&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": "#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) => { 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() )}
`; const tags = e.features[0].properties.numOfPois === 1 ? JSON.parse(e.features[0].properties.tags) : {}; description += tags.name ? tags.name : "Name not listed..."; } 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(); }); }); }32:T9e7,{ 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: [13.446677, 52.503556], zoom: 10, style: client.basemaps.getGLStyleURL("Basic"), // 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()}${tramStopQueryString}&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": "#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) => { 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() )}
`; const tags = e.features[0].properties.numOfPois === 1 ? JSON.parse(e.features[0].properties.tags) : {}; description += tags.name ? tags.name : "Name not listed..."; } 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:T9ec,{ 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: [9.992476, 53.550112], zoom: 10, style: client.basemaps.getGLStyleURL("Basic"), // 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()}${subwayEntranceQueryString}&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": "#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) => { 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() )}
`; const tags = e.features[0].properties.numOfPois === 1 ? JSON.parse(e.features[0].properties.tags) : {}; description += tags.name ? tags.name : "Name not listed..."; } 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:T9ec,{ 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: [9.992476, 53.550112], zoom: 10, style: client.basemaps.getGLStyleURL("Basic"), // 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()}${railwayStationQueryString}&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": "#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) => { 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() )}
`; const tags = e.features[0].properties.numOfPois === 1 ? JSON.parse(e.features[0].properties.tags) : {}; description += tags.name ? tags.name : "Name not listed..."; } 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:T994,{ 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: [13.446677, 52.503556], zoom: 10, style: client.basemaps.getGLStyleURL("Basic"), // 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()}${lightRailQueryString}&match=all&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": "#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) => { 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: Light Rail
`; const tags = e.features[0].properties.numOfPois === 1 ? JSON.parse(e.features[0].properties.tags) : {}; description += tags.name ? tags.name : "Name not listed..."; } 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(); }); }); }36:Ta2e,{ 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: [13.446677, 52.503556], zoom: 10, style: client.basemaps.getGLStyleURL("Basic"), // 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()}${publicTransportStationQueryString}&match=all&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": "#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) => { 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: Public Transit
`; const tags = JSON.parse(e.features[0].properties.tags); const rows = Object.keys(tags).map((k) => { return `${k}${tags[k]}`; }); const addOn = `${rows.join( "" )}

tag	value

`; description += addOn; } 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(); }); }); }37:[] 2f:{"title":"Points of Interest for Reference Map","cells":[{"id":0,"value":"tgmIntro(\n \"Points of Interest for Reference Map\"\n)","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":"## Groups and Tags\nTargomo has build-in pre-defined groupings as a convenience, as OSM tagging can become quite complex. These groups can be explored in the [hierarchy explorer](https://observablehq.com/@targomo/poi-hierarchy).\n\nTargomo's groups can be queried via the `group=` url query, but OSM tags can also be specified via the `osmtag=value` url query (i.e. OSM's `station` tag:value can be specified as `station=light_rail`).\n\n","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 the `bus_stop` group.\n\n[OSM Busses Page](https://wiki.openstreetmap.org/wiki/Buses)","pinned":false,"hidden":false,"mode":"md"},{"id":1455,"value":"busStopQueryString = `&group=bus_stop`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1061,"value":"$31","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.\n\n[OSM Tram Page](https://wiki.openstreetmap.org/wiki/Trams)","pinned":false,"hidden":false,"mode":"md"},{"id":1447,"value":"tramStopQueryString = `&group=tram_stop`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1373,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1379,"value":"
\n## Subway Entrance\nSubway entrance is different from other tags in that it marks the actual entrance itself, so a single station can have several entrances. At higher zoom levels, this can be desirable, and more relevant to the user.\n\n[OSM Subway Page](https://wiki.openstreetmap.org/wiki/Metros)","pinned":false,"hidden":false,"mode":"md"},{"id":1424,"value":"subwayEntranceQueryString = `&group=subway_entrance`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1377,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1384,"value":"
\n## Railway Station\nRailway station is the central point representing a larger station which serves trains. In this specific group, the distinction is not made if the station is a commuter train, an intercity train, or a subway station. ","pinned":false,"hidden":false,"mode":"md"},{"id":1418,"value":"railwayStationQueryString = `&group=railway_station`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1389,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1406,"value":"
\n## Light Rail (S-Bahn approximate)\nThere is no specific tag for \"Sbahn\", however in most places `light_rail` is the closest approximation. SBahn stations can also be regio/intercity stations, and if the SBahn is underground, it can be tagged as `subway`. \n\nRegionally these can vary in use - for example in Berlin and Hamburg, all SBahn are tagged as `light_rail`, but Münich as well as the southwest, the SBahn network is not tagged as `light_rail`, but only as `railway=station`, leaving no distinction between SBahn and regio...","pinned":false,"hidden":false,"mode":"md"},{"id":1412,"value":"lightRailQueryString = `&station=light_rail&public_transport=station`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1398,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1480,"value":"
\n## General Public Transport\nIn light of the inconsistency of the \"S-Bahn\"-type tagging, one can alternatively use `public_transport` without the `light_rail` qualifier to get better coverage, albeit _less precise_ points...","pinned":false,"hidden":false,"mode":"md"},{"id":1484,"value":"publicTransportStationQueryString = `&public_transport=station`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1487,"value":"$36","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":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":1552,"value":"codeStyle","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":"$W37","stdlib":"1","titling":"auto"}