2d:null 2e:["$","title",null,{"children":"Multi-modal routing with Valhalla | Observable | Observable"}] 33:T834,let allCoords = []; for (const m of modeFeatures) allCoords = allCoords.concat(m.coords); const [minLon0, maxLon0] = d3.extent(allCoords, c => c[0]); const [minLat0, maxLat0] = d3.extent(allCoords, c => c[1]); // Pad the route extent to give some room around the lines, both for the // initial view and as the map's max zoom-out bounds. const pad = 0.5; const bounds = [[minLon0 - pad, minLat0 - pad], [maxLon0 + pad, maxLat0 + pad]]; const mapContainer = display(html`

`); const map = new maplibreNS.Map({ container: mapContainer, style: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json", bounds, maxBounds: bounds // caps zoom-out to this extent }); map.on("load", () => { for (const m of modeFeatures) { map.addSource(`route-${m.key}`, {type: "geojson", data: m.geojson}); map.addLayer({ id: `route-${m.key}-line`, type: "line", source: `route-${m.key}`, layout: {"line-join": "round", "line-cap": "round"}, paint: { "line-color": m.color, "line-width": 4, "line-opacity": 0.85 } }); } new maplibreNS.Marker({color: "#212529"}) .setLngLat({lng: bayeux.lon, lat: bayeux.lat}) .setPopup(new maplibreNS.Popup().setHTML("Bayeux
Start")) .addTo(map); new maplibreNS.Marker({color: "#212529"}) .setLngLat({lng: montSaintMichel.lon, lat: montSaintMichel.lat}) .setPopup(new maplibreNS.Popup().setHTML("Le Mont Saint-Michel
Finish")) .addTo(map); }); map.addControl(new maplibreNS.NavigationControl(), "top-right"); const legend = html`

${ modeFeatures.map(m => html.fragment`${m.label} — ${m.lengthKm.toFixed(0)} km, ${Math.floor(m.timeH)}h${String(Math.round((m.timeH % 1) * 60)).padStart(2,"0")}`) }

`; display(legend);34:T56e,// Valhalla encodes route geometry as "polyline6" (like Google's polyline format, but with 6 decimal digits) function decodePolyline6(str) { let index = 0, lat = 0, lon = 0, coordinates = []; const factor = 1e6; while (index < str.length) { let shift = 0, result = 0, byte; do { byte = str.charCodeAt(index++) - 63; result |= (byte & 0x1f) << shift; shift += 5; } while (byte >= 0x20); const deltaLat = (result & 1) ? ~(result >> 1) : (result >> 1); lat += deltaLat; shift = 0; result = 0; do { byte = str.charCodeAt(index++) - 63; result |= (byte & 0x1f) << shift; shift += 5; } while (byte >= 0x20); const deltaLon = (result & 1) ? ~(result >> 1) : (result >> 1); lon += deltaLon; coordinates.push([lon / factor, lat / factor]); } return coordinates; } // Sends a route request straight to the public Valhalla server. // from and to are {lon, lat} objects. async function routeLeg(from, to, costing) { const json = JSON.stringify({ locations: [ {lat: from.lat, lon: from.lon}, {lat: to.lat, lon: to.lon} ], costing, units: "kilometers" }); const url = "https://valhalla1.openstreetmap.de/route?json=" + encodeURIComponent(json); const r = await fetch(url, {proxy: true, cache: true}); const data = await r.json(); return {ok: r.ok && !data.error, data}; }35:[{"id":"227b23761cc2fc961367142c36fa568a20dd81f345bf408572be3073c0d42491e505afd37cb64ea08b3e542af91a59c2a4be045afd3b67e0959ba5affe934fcd","href":"https://static.observableusercontent.com/files/227b23761cc2fc961367142c36fa568a20dd81f345bf408572be3073c0d42491e505afd37cb64ea08b3e542af91a59c2a4be045afd3b67e0959ba5affe934fcd","name":".observable/cache/fetch-1divod0un8ukjk74eblflr6llkur2roo.blob","type":"application/json;charset=utf-8","lastModified":1790242239000,"size":31544},{"id":"7dfef191bdf797dde3b26387ab92d9e42f5cf0e76a81d2224a32801dae925e4bdf1d7b393fb1513b409f1f7fa0acd2ce647301b85697148e3217528c821e01a1","href":"https://static.observableusercontent.com/files/7dfef191bdf797dde3b26387ab92d9e42f5cf0e76a81d2224a32801dae925e4bdf1d7b393fb1513b409f1f7fa0acd2ce647301b85697148e3217528c821e01a1","name":".observable/cache/fetch-1afhcjf494037pdxddnjyzdqsw8c8t8s.blob","type":"application/json;charset=utf-8","lastModified":1790242240000,"size":49842},{"id":"d946d0fe19c439855c29d70cac218fa44f4c37fb404061e96cd19aecef2cd721b5c9f5be416ce6c38019e9ec999826fe2c36703ee864203b2aec8e1d796a37e8","href":"https://static.observableusercontent.com/files/d946d0fe19c439855c29d70cac218fa44f4c37fb404061e96cd19aecef2cd721b5c9f5be416ce6c38019e9ec999826fe2c36703ee864203b2aec8e1d796a37e8","name":".observable/cache/fetch-24d4v12pu71mjy82hgfygh1woawe64qj.blob","type":"application/json;charset=utf-8","lastModified":1790242240000,"size":83877},{"id":"0cdb63ee5368a2def95c17c2a1d0fcb7d309128735167a799acdfc3db0ba23ab2e5baf6e43649643c131be85e85569f25bd57dd319a60ce121ef6967649db5d2","href":"https://static.observableusercontent.com/files/0cdb63ee5368a2def95c17c2a1d0fcb7d309128735167a799acdfc3db0ba23ab2e5baf6e43649643c131be85e85569f25bd57dd319a60ce121ef6967649db5d2","name":".observable/cache/fetch-0rnot5p8epovbk7sktmrejnsrsmnz554.blob","type":"application/json;charset=utf-8","lastModified":1790242240000,"size":67452}] 31:{"id":"df66cc13609cf33a","slug":"hello-valhalla","title":"Multi-modal routing with Valhalla","thumbnail":"cbcaa8d7625517e6db7eb3865907dceeb1a754ab5ef6b124d5ed82afdfa99373","access_level":"public","create_time":"$D2026-09-22T10:48:05.120Z","update_time":"$D2026-09-24T09:30:45.554Z","view_time":null,"first_public_time":"$D2026-09-22T11:17:02.368Z","has_unpublished_edits":null,"fork":true,"stars":4,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","bio":"The end-to-end solution for building and hosting better data apps, dashboards, and reports."},"version":263,"publish_version":263,"role":null,"authored":false,"authors":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"bio":"Vocateur."}],"members":[{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"editor"}],"comments":[{"id":"dfeb799843e2de7d","reply_to_id":null,"content":"Good job!","create_time":"$D2026-09-22T18:49:25.529Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Multi-modal routing with Valhalla","cells":[{"id":1,"value":"# Multi-modal routing with Valhalla","pinned":false,"hidden":false,"mode":"md","author":"user","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"This notebook sends requests to the public [FOSSGIS Valhalla server](https://valhalla1.openstreetmap.de). It compares car/truck, scooter, bicycle, and walking routes from Bayeux to Le Mont Saint-Michel.\n\n**Note:** the public server only allows routes up to 150 km.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"$33","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"import * as maplibreNS from \"npm:maplibre-gl\";","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"## Explanation and computations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$34","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"const bayeux = {lon: -0.7024, lat: 49.2764};\nconst montSaintMichel = {lon: -1.5115, lat: 48.6361};\n\n// Car and truck give the same route here, so they're grouped as one mode.\nconst modes = [\n {key: \"auto\", label: \"Car / Truck\", color: \"#1971c2\"},\n {key: \"motor_scooter\", label: \"Scooter\", color: \"#9c36b5\"},\n {key: \"bicycle\", label: \"Bicycle\", color: \"#e8590c\"},\n {key: \"pedestrian\", label: \"Walking\", color: \"#2f9e44\"}\n];\n\nconst modeResults = [];\nfor (const m of modes) {\n const res = await routeLeg(bayeux, montSaintMichel, m.key);\n modeResults.push({...m, ...res});\n}\ndisplay(modeResults);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"const modeFeatures = modeResults.map(m => {\n const coords = decodePolyline6(m.data.trip.legs[0].shape);\n return {\n ...m,\n coords,\n geojson: {\n type: \"Feature\",\n properties: {mode: m.key},\n geometry: {type: \"LineString\", coordinates: coords}\n },\n lengthKm: m.data.trip.summary.length,\n timeH: m.data.trip.summary.time / 3600\n };\n});\n\nconst summaryTable = modeFeatures.map(m => ({\n Mode: m.label,\n \"Distance (km)\": +m.lengthKm.toFixed(1),\n \"Time (h:mm)\": `${Math.floor(m.timeH)}:${String(Math.round((m.timeH % 1) * 60)).padStart(2, \"0\")}`\n}));\ndisplay(Inputs.table(summaryTable));","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"## How it works\n\n1. **`routeLeg`** sends one HTTP request per mode to the public Valhalla API.\n2. **`decodePolyline6`** turns Valhalla's encoded route shape into `[lon, lat]` points.\n3. Car and truck use the same costing model and give the same route.\n\n**Results:**\n\n| Mode | Distance | Time |\n|---|---|---|\n| 🔵 Car / Truck | 131.6 km | 2h15 |\n| 🟣 Scooter | 124.6 km | 6h02 |\n| 🟠 Bicycle | 120.3 km | 6h59 |\n| 🟢 Walking | 101.9 km | 20h50 |\n\nData: [Valhalla routing API](https://valhalla.github.io/valhalla/) via the public [FOSSGIS Valhalla server](https://valhalla1.openstreetmap.de) (© OpenStreetMap contributors).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"2"}} 32:"$31:body"