Public
Edited
Jan 24, 2023
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
let container = html`<div style='height:600px;' />`;

// 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: 13.25,
minZoom: 9,
style: client.basemaps.getGLStyleURL("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?c_bus=de-gtfs-stops=bus&c_tram=de-gtfs-stops=tram&c_subway=de-gtfs-stops=subway&c_suburban=de-gtfs-stops=suburban&c_rail=de-gtfs-stops=rail&c_ferry=de-gtfs-stops=ferry` +
`&apiKey=${targomoKey()}&layerGeometryDetailPerTile=6&loadAllTags=true&layerType=node`;
map.on("load", async () => {
// pre-load icons from targomo icon library for use in symbols
for (let icon of Object.keys(iconlookup)) {
if (!map.hasImage(icon)) map.addImage(icon, iconlookup[icon]);
}

// vector source rfom Places Layers API
map.addSource("pois", {
type: "vector",
tiles: [POI_URL],
minzoom: 11
});

const layers = {
ferry: map.addLayer({
id: "ferry",
type: "symbol",
source: "pois",
minzoom: 13,
"source-layer": "poi",
filter: ["has", "c_ferry"],
layout: {
"icon-image": "ferry",
"icon-size": 0.25
}
}),
bus: map.addLayer({
id: "bus",
type: "symbol",
source: "pois",
minzoom: 13.5,
"source-layer": "poi",
filter: ["has", "c_bus"],
layout: {
"icon-image": "bus",
"icon-size": 0.25
}
}),
tram: map.addLayer({
id: "tram",
type: "symbol",
source: "pois",
minzoom: 13.5,
"source-layer": "poi",
filter: ["has", "c_tram"],
layout: {
"icon-image": "tram",
"icon-size": 0.25
}
}),
subway: map.addLayer({
id: "subway",
type: "symbol",
source: "pois",
minzoom: 12,
"source-layer": "poi",
filter: ["has", "c_subway"],
layout: {
"icon-image": "subway",
"icon-size": 0.25
}
}),
suburban: map.addLayer({
id: "suburban",
type: "symbol",
source: "pois",
minzoom: 12,
"source-layer": "poi",
filter: ["has", "c_suburban"],
layout: {
"icon-image": "suburban",
"icon-size": 0.25
}
}),
rail: map.addLayer({
id: "rail",
type: "symbol",
source: "pois",
"source-layer": "poi",
filter: ["has", "c_rail"],
layout: {
"icon-image": "rail",
"icon-size": 0.25
}
})
};

// Create a popup, but don't add it to the map yet.
const popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
});
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
iconlookup = {
return {
rail: await FileAttachment("rail.png").image(),
subway: await FileAttachment("u-bahn.png").image(),
suburban: await FileAttachment("s-bahn.png").image(),
tram: await FileAttachment("de-tram.png").image(),
bus: await FileAttachment("de-bus.png").image(),
ferry: await FileAttachment("ferry.png").image()
};
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more