viewof dashboardPages = Inputs.range([1, 10], { label: "Load pages", value: 1, step: 1 })
alternativeRoutingForLines = []
map = {
const container = html`<div style="height:800px;">`;
yield container;
const map = L.map(container).setView([50.1351, 5.5820], 6);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
polylines.forEach(async (coords) => {
L.polyline(coords, {
color: 'blue',
weight: 3,
opacity: 0.5,
smoothFactor: 1
}).addTo(map)
})
}
L = {
const L = await require("leaflet@1/dist/leaflet.js");
if (!L._style) {
const href = await require.resolve("leaflet@1/dist/leaflet.css");
document.head.appendChild(L._style = html`<link href=${href} rel=stylesheet>`);
}
return L;
}
polylines = {
if (dashboardData.length > 0) {
const shouldUseAlternativeRouting = (trip) => alternativeRoutingForLines.includes(trip.train.lineName)
const trwLines = await getRoutePolylines(dashboardData.filter(trip => !shouldUseAlternativeRouting(trip)))
const alternativeLines = await getAlternativePolylines(dashboardData.filter(shouldUseAlternativeRouting))
return [...trwLines, ...alternativeLines]
}
}
routing = {
if (L) {
return require("leaflet-routing-machine@1/dist/leaflet-routing-machine.js")
}
}
function alternativeRouting(waypoints) {
return new Promise((resolve) => {
const route = routing.control({
waypoints,
router: routing.osrmv1({serviceUrl: 'https://signal.eu.org/osm/eu/route/v1/', profile: 'train', useHints: false})
}).on('routesfound', routes => resolve(routes.routes[0].coordinates))
})
}
async function getRoutePolylines(trips) {
let polylines = []
if (trips.length > 50) {
return [...(await getRoutePolylines(trips.slice(0, 50))), ...(await getRoutePolylines(trips.slice(50)))]
} else if (trips.length > 0) {
const statusIds = trips.map(status => status.id).join(',')
const results = await trApiCall(`/api/v1/polyline/${statusIds}`)
return results.data.features.map(feature => feature.geometry.coordinates.map(coords => L.latLng(coords[1], coords[0])))
}
return []
}
async function getAlternativePolylines(trips) {
const pl = await getRoutePolylines(trips)
return Promise.all(pl.map((coords) => {
return alternativeRouting(coords)
}))
}
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.
