2d:null 2e:["$","title",null,{"children":"NextBillion.ai Waypoint Routing Demo | NB.AI Solutions Team | Observable"}] 33:T6f9,viewof results = { if (inputData_a) { //sort selected stops by the sequence nbr let baseTime = Date.parse(inputs.departureTime.value) / 1000; const stops = stopData.sort((a, b) => a.id - b.id); let theLegs = structuredClone(routeMe.routes[0].legs).filter( (obj) => obj.description !== "Summary" ); let stopIdx = 0; theLegs.forEach((l) => { if (l.description != "Summary") { l.description = `${stops[stopIdx++].description}`; l.startTime = baseTime; l.endTime = baseTime + l.duration.value; baseTime += l.duration.value; } }); theLegs.push({ description: "Summary", address: "", distance: { value: routeMe.routes[0].distance }, duration: { value: routeMe.routes[0].duration } }); return Inputs.table(theLegs, { columns: ["startTime", "endTime", "description", "distance", "duration"], width: { startTime: 120, endTime: 120, description: 300 }, rows: 18, multiple: false, header: { startTime: "Leg Start Time", endTime: "Leg End Time", description: "Description", distance: "Distance (meters)", duration: "Duration (min)" }, format: { startTime: (x) => new Date(x * 1000).toLocaleString([], { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false }), endTime: (x) => new Date(x * 1000).toLocaleString([], { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false }), distance: (x) => x.value, duration: (x) => (x.value / 60).toFixed(2) } }); } }34:T1c7c,viewof theMap = { if (inputData_a) { apiKey; function createPopupContent(step) { return `

${new Date(step.endTime * 1000).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false })} ${step.description}

`; } const stops = stopData.sort((a, b) => a.id - b.id); let theLegs = structuredClone(routeMe.routes[0].legs).filter( (obj) => obj.description !== "Summary" ); let baseTime = Date.parse(inputs.departureTime.value) / 1000; let stopIdx = 0; theLegs.forEach((l) => { if (l.description != "Summary") { l.description = `${stopData[stopIdx++].description}`; l.startTime = baseTime; l.endTime = baseTime + l.duration.value; baseTime += l.duration.value; } }); const container = html`

`; yield container; let routePolyline = null; let originMarker = null; let destinationMarker = null; let waypoints = []; let pos = { lat: 33.464926025, lng: -112.237972189 }; const mapRo = (container.value = new nextbillion.maps.Map({ container: document.getElementById("mapRo"), center: pos, zoom: 14, maxZoom: 18, minZoom: 3, style: "https://api.nextbillion.io/maps/dark/style.json", scrollZoom: true })); mapRo.map.on("load", function () { mapRo.map.loadImage( "https://d12qcqjlhp2ahm.cloudfront.net/arrow.png", function (error, image) { if (error) throw error; mapRo.map.addImage("arrow-icon", image); } ); let unescapedPoly = routeMe.routes[0].geometry; let decodedPoly = { type: "FeatureCollection", features: [ { type: "Feature", properties: {}, geometry: { coordinates: nextbillion.utils.polyline .decode(unescapedPoly, 5) .map((c) => c.reverse()), type: "LineString" } } ] }; const firstLabelLayerId = mapRo.map .getStyle() .layers.find((layer) => layer.type === "symbol").id; if (!mapRo.map.getSource("route")) { mapRo.map.addSource("route", { type: "geojson", data: null }); } mapRo.map.getSource("route").setData(decodedPoly); // Remove the route layers if they already exist if (mapRo.map.getLayer("route-casing")) { mapRo.map.removeLayer("route-casing"); } if (mapRo.map.getLayer("route-inner")) { mapRo.map.removeLayer("route-inner"); } // Add outer route line (casing) mapRo.map.addLayer( { id: "route-casing", type: "line", source: "route", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": "#cf9ae2", // Outer color (casing) "line-width": 10 // Outer line thickness } }, firstLabelLayerId ); // Add inner route line (on top of casing) mapRo.map.addLayer( { id: "route-inner", type: "line", source: "route", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": "#ffffff", // Inner color (white) "line-width": 6 // Inner line thickness } }, firstLabelLayerId ); // Add directional arrows along the route mapRo.map.addLayer({ id: "route-arrows", type: "symbol", source: "route", layout: { "symbol-placement": "line", // Place arrows along the line "symbol-spacing": 250, // Adjust the spacing between arrows "icon-image": "arrow-icon", // Use a custom arrow icon "icon-size": 0.35, // Adjust the size of the arrows "icon-allow-overlap": true, // Allow the arrows to overlap with other features "icon-rotation-alignment": "map", // Align arrows to follow the route direction "icon-rotate": 0 // Use the route's bearing to rotate arrows } }); let stopIdx = 0; theLegs.forEach((l, idx) => { const markerElementStart = document.createElement("div"); markerElementStart.className = "step-marker"; markerElementStart.style.backgroundColor = l.post_actions == null ? "lightgreen" : "lightblue"; markerElementStart.style.color = "black"; markerElementStart.style.fontFamily = "Montserrat"; markerElementStart.style.fontWeight = "bold"; markerElementStart.style.borderRadius = "50%"; markerElementStart.style.padding = "10px"; markerElementStart.style.width = "5px"; markerElementStart.style.height = "5px"; markerElementStart.style.display = "flex"; markerElementStart.style.alignItems = "center"; markerElementStart.style.justifyContent = "center"; markerElementStart.textContent = idx + 1; const markerStart = new nextbillion.maps.Marker({ element: markerElementStart }) .setLngLat({ lng: l.end_location.longitude, lat: l.end_location.latitude }) .addTo(mapRo.map); // Create a popup with a summary of the steps at this location const popup = new nextbillion.maps.Popup({ closeButton: false, closeOnClick: false }).setHTML(createPopupContent(l)); // Show the popup on mouseenter and hide it on mouseleave markerStart.getElement().addEventListener("mouseenter", () => { popup.setLngLat(markerStart.getLngLat()).addTo(mapRo.map); }); markerStart.getElement().addEventListener("mouseleave", () => { popup.remove(); }); }); // Animation variables let progress = 0; const arrowSpeed = 0.05; // Control arrow movement speed function animateArrows() { progress += arrowSpeed; // Update the symbol-spacing to create an animation effect mapRo.map.setLayoutProperty( "route-arrows", "symbol-spacing", 50 + (progress % 10) ); // Request the next frame for smooth animation requestAnimationFrame(animateArrows); } // Start the animation animateArrows(); let bounds = decodedPoly.features[0].geometry.coordinates.reduce( function (bounds, coord) { return bounds.extend(coord); }, new nextbillion.maps.LngLatBounds( decodedPoly.features[0].geometry.coordinates[0], decodedPoly.features[0].geometry.coordinates[0] ) ); mapRo.map.fitBounds(bounds, { padding: 20 }); }); return mapRo; } }35:T66d,routeMe = { if (!inputData_a) { return; } const origin = stopData[0].location; const destination = stopData[stopData.length - 1].location; let wayPts = ""; stopData.forEach((s, idx) => { if (idx != stopData.length - 1 && idx != 0) { console.log(idx); wayPts += `${s.location}|`; } }); // Initialize progress bar let progressValue = 0; const maxProgress = 150; // Maximum value for the progress bar const progressInterval = setInterval(() => { if (progressValue < maxProgress) { progress.value = progressValue; // Update progress bar progressValue += 1; // Increment progress value } }, 100); // Adjust this delay for how fast the progress should move const data = { mode: "truck", origin: origin, destination: destination, waypoints: wayPts, truck_size: `${(parseFloat(inputs.truckHeight.value) * 30.48).toFixed( 0 )},${(parseFloat(inputs.truckWidth.value) * 30.48).toFixed(0)},${( parseFloat(inputs.truckLength.value) * 30.48 ).toFixed(0)}`, truck_weight: inputs.truckWeight.value * 0.45, departure_time: Date.parse(inputData_a.departureTime) / 1000, avoid: avoidInput, steps: true }; const resp = await fetch( `https://api.nextbillion.io/directions/json?key=${apiKey}&option=flexible`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) } ).then((response) => response.json()); // Once fetch is complete, clear the interval and set progress to max clearInterval(progressInterval); progress.value = maxProgress; return resp; }36:T675,inputs = { let newBase = new Date(1727092800000); const inputs = { hazmat: Inputs.select( [ { name: "None", value: "none" }, { name: "Circumstantial", value: "circumstantial" }, { name: "General", value: "general" } ], { label: "Hazmat", format: (x) => x.name, value: "none" } ), truckHeight: Inputs.text({ readonly: false, label: "height (ft)", value: 13.5, width: 45 }), truckWidth: Inputs.text({ readonly: false, label: "width (ft)", value: 8.5, width: 45 }), truckLength: Inputs.text({ readonly: false, label: "length (ft)", value: 72, width: 45 }), truckWeight: Inputs.text({ readonly: false, label: "Truck weight (lbs)", value: 20000, width: 75 }), mode: Inputs.select(routeStyles, { label: "Routing Mode", format: (x) => x.name, value: routeStyles.find((t) => t.name === "Automobile") }), departureTime: Inputs.datetime({ label: "Report Time", value: newBase }), currentLocation: Inputs.text({ label: "Start Location(lat,lng)", value: "33.46499683,-112.237201231", width: 175 }), fileWaypoints: Inputs.file({ label: "JSON file", accept: ".json", required: true }), avoids: Inputs.checkbox( [ "tolls", "highway", "ferry", "sharp_turn", "u_turn", "left_turn", "right_turn", "service_road" ], { label: "Avoid on Route", value: [] } ) }; return inputs; }37:Ta74,html``38:[{"id":"ada4b2ca547731bc8d7d0df02dc5839c754c542362cdc642ce22c001608f69bb135254c34382d305f9f5a36f1cbc7e783164b2c80b883957cc62e6bfb59bc145","href":"https://static.observableusercontent.com/files/ada4b2ca547731bc8d7d0df02dc5839c754c542362cdc642ce22c001608f69bb135254c34382d305f9f5a36f1cbc7e783164b2c80b883957cc62e6bfb59bc145","name":"waypointsData (3).json","type":"application/json","lastModified":1749041112797.663,"size":864}] 31:{"id":"4ed57d6b72197eff","slug":"nextbillion-ai-waypoint-routing-demo","title":"NextBillion.ai Waypoint Routing Demo","thumbnail":"ea60b7fb6fdd20e734222af00efaf39b6c8d8d1d03deffa40d41099ec69f896c","access_level":"public","create_time":"$D2024-09-24T21:27:29.629Z","update_time":"$D2025-06-04T12:56:30.513Z","view_time":null,"first_public_time":"$D2025-06-04T12:56:55.848Z","has_unpublished_edits":null,"fork":{"id":"38162f327bd9aa70","slug":"hos-eta-route-report","title":"Use Case: Optimizing Route Planning for a Trucking Logistics Company Using Hours of Service (HOS) Reports","owner":{"id":"05baed136f9134c1","login":"nbai","name":"NB.AI Solutions Team"}},"stars":0,"starred":false,"owner":{"type":"team","id":"05baed136f9134c1","login":"nbai","name":"NB.AI Solutions Team","avatar_url":"https://avatars-next.observableusercontent.com/7a25d1b5deb9c5290b12e4e0914aacdbd4196bb5c3a94c63a0fda0fe706d28b2","tier":"starter_2024"},"version":684,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bcb6b2e256659128","login":"jim-welch","name":"Jim Welch","avatar_url":"https://avatars-next.observableusercontent.com/6334ed2ccd004bd8ab34e9f05c047bf4ef291dea914767f26079d7756d073607","tier":null}],"members":[{"type":"individual","id":"bcb6b2e256659128","login":"jim-welch","name":"Jim Welch","avatar_url":"https://avatars-next.observableusercontent.com/6334ed2ccd004bd8ab34e9f05c047bf4ef291dea914767f26079d7756d073607","tier":null,"role":"editor"},{"type":"team","id":"05baed136f9134c1","login":"nbai","name":"NB.AI Solutions Team","avatar_url":"https://avatars-next.observableusercontent.com/7a25d1b5deb9c5290b12e4e0914aacdbd4196bb5c3a94c63a0fda0fe706d28b2","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"NextBillion.ai Waypoint Routing Demo","cells":[{"id":0,"value":"# NextBillion.ai Waypoint Routing Demo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":663,"value":"viewof apiKey = secret2(\"apiKey\", {\n title: \"NextBillion.ai API Key\",\n submit: \"Set\",\n description:\n \"Contact support@nextbillion.ai to get your API key\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"#### Waypoint Routing Demo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":532,"value":"1. Set departure time.
\n2. Upload a set of waypoints in a JSON file with an array of defined points.

[{id: 1, location: \"40.1177,-83.1264\", description: \"1\"},{\"id: 2, location: \"40.3213,-82.3213\", description: \"2\"....]})

\nYou can also use the sample file 'waypointsData.json' in this notebook's File Attachments (download and then use the file upload control below to add)\n3. Press the 'Get Route Plan' button","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"viewof panel = Inputs.form(inputs, {\n template: (v) => htl.html`\n

\n ${v.departureTime}\n

${v.avoids}

${v.truckWeight}

${v.truckHeight}

${v.truckWidth}

${v.truckLength}

${v.hazmat}

${v.fileWaypoints}

\n\n`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"waypointsdata = FileAttachment(\"waypointsData (3).json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"{\n const button = html` `;\n button.onclick = () => {\n mutable inputData_a = panel;\n button.disabled = true;\n };\n return html`${button}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"progress = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"#### Route Plan","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":119,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"#### Timeline","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":600,"value":"mytimeline = html`\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"newTimeline = {\n if (inputData_a) {\n let baseTime = Date.parse(inputs.departureTime.value) / 1000;\n let theLegs = structuredClone(routeMe.routes[0].legs).filter(\n (obj) => obj.description !== \"Summary\"\n );\n let stopIdx = 0;\n\n theLegs.forEach((l) => {\n if (l.description != \"Summary\") {\n l.content = `${stopData[stopIdx++].description}`;\n l.startTime = baseTime;\n l.start = baseTime * 1000;\n l.end = new Date((baseTime + l.duration.value) * 1000);\n baseTime += l.duration.value;\n }\n });\n\n let container = document.getElementById(\"visualization\");\n // Clear the container before rendering new content\n container.innerHTML = \"\";\n let options = {\n showMinorLabels: true,\n stack: false,\n format: {\n majorLabels: {\n millisecond: \"HH:mm:ss\"\n }\n }\n };\n return new vis.Timeline(container, theLegs, options);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"routeMe performs the API call to NB.ai Directions service using the provided waypoints. Expand the block to see the code.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":113,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"stopData = {\n if (!inputData_a) {\n return;\n }\n return inputData_a.fileWaypoints.json({ typed: true });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"avoidInput = {\n if (inputData_a) {\n let avoids = \"\";\n inputData_a.avoids.forEach((av) => (avoids += `${av}|`));\n return avoids.length ? avoids.slice(0, -1) : \"none\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"nextbillion = {\n let nextbillion = await require(\"@nbai/nbmap-gl@2.5.1\");\n return nextbillion;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"{\n nextbillion.setApiKey(apiKey);\n return html`Set API key
nextbillion.setApiKey(${apiKey.substr(\n 0,\n 4\n )}....)`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"html`Add the stylesheet for the NB.ai SDK
<link href=\"https://maps-gl.nextbillion.io/maps/v2/api/css\" rel=\"stylesheet\">`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"import {\n routeAvoids,\n place_types,\n routeStyles,\n secret2\n} from \"@nbai/nextbillion-ai-dependencies\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"mutable inputData_a = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"milestones = require(\"d3-milestones\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"vis = require(\"vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"stylesheet = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body"