2d:null 2e:["$","title",null,{"children":"NextBillion.ai Mapping SDK Examples | NB.AI Solutions Team | Observable"}] 33:T4b7,## Introduction [NextBillion.ai Mapping SDK](https://docs.nextbillion.ai) provides a JavaScript library that allows developers to add map-based functionality to web applications. The JavaScript library can be easily integrated into a web application and provides a wide range of features: - Displaying maps with custom markers, polygons, and other shapes. - Routing services - Distance Matrix Services - Snap to Road / Map Matching Services - Customizing the appearance of maps and markers. - Support for multiple map data providers, such as OpenStreetMap, TomTom and more. By using the NextBillion.ai Mapping SDK, developers can quickly add maps and location-based functionality to their web applications, without needing to worry about the complexity of working with map providers and APIs. - Load the NextBillion.ai v2 SDK (you must specify the version number for the SDK to work in this notebook and make sure it is >2.3.3) - Enter your assigned API key. The map panels below should load using the API key as you scroll down the page. If you'd like to get a trial API key please connect with us at [support@nextbillion.ai](mailto:support@nextbillion.ai) - Link to the NB.ai v2 SDK stylesheet (CSS)34:Ta4a,map = { apiKey; const container = html`

`; yield container; let routePolyline = null; let originMarker = null; let destinationMarker = null; let waypoints = []; let pos = { lat: panel.city.centroid.split(",")[0], lng: panel.city.centroid.split(",")[1] }; const mapDir = (container.value = new nextbillion.maps.Map({ container: document.getElementById("mapDir"), center: pos, zoom: 8, maxZoom: 21, minZoom: 5, style: panel.styles.value, scrollZoom: true })); const cont = mapDir.map?.getContainer(); if (!cont) return; const attributionElements = cont.querySelectorAll(".maplibregl-ctrl-attrib"); attributionElements.forEach((element) => { if (element && element.parentNode) { element.parentNode.removeChild(element); } }); loadMapActions(mapDir); document.getElementById("clearMap").onclick = function () { clearMap(mapDir, originMarker, destinationMarker, waypoints); originMarker = null; destinationMarker = null; waypoints = []; }; // click on map actions - create origin or destination mapDir.map.on("click", (e) => { if (!originMarker) { originMarker = new nextbillion.maps.Marker({ color: "green", draggable: true, scale: 0.6 }) .setLngLat({ lat: e.lngLat.lat, lng: e.lngLat.lng }) .addTo(mapDir.map); originMarker.on("dragend", (e) => { routeMe(mapDir, originMarker, destinationMarker, waypoints, false); }); } else if (!destinationMarker) { destinationMarker = new nextbillion.maps.Marker({ color: "red", draggable: true, scale: 0.6 }) .setLngLat({ lat: e.lngLat.lat, lng: e.lngLat.lng }) .addTo(mapDir.map); destinationMarker.on("dragend", (e) => { routeMe(mapDir, originMarker, destinationMarker, waypoints, false); }); } else { // waypoint var waypointMarker = new nextbillion.maps.Marker({ color: "blue", draggable: true, scale: 0.6 }) .setLngLat({ lat: e.lngLat.lat, lng: e.lngLat.lng }) .addTo(mapDir.map); waypointMarker.on("dragend", (e) => { routeMe(mapDir, originMarker, destinationMarker, waypoints, false); }); waypoints.push(waypointMarker); } if (originMarker && destinationMarker) { routeMe(mapDir, originMarker, destinationMarker, waypoints, false); } }); }35:Ta72,dmMap = { apiKey; await visibility(); const container = html`

`; yield container; let pos = { lat: panel.city.centroid.split(",")[0], lng: panel.city.centroid.split(",")[1] }; let origMarkers = []; let destMarkers = []; const mapDM = (container.value = new nextbillion.maps.Map({ container: document.getElementById("mapDM"), center: pos, zoom: 8, minZoom: 5, maxZoom: 15, style: panel.styles.value, scrollZoom: true })); const cont = mapDM.map?.getContainer(); if (!cont) return; const attributionElements = cont.querySelectorAll(".maplibregl-ctrl-attrib"); attributionElements.forEach((element) => { if (element && element.parentNode) { element.parentNode.removeChild(element); } }); loadMapActions(mapDM); document.getElementById("remove-grid").onclick = function () { let gridContainer = document.getElementById("grid"); origMarkers.forEach((om) => { om.remove(); }); origMarkers = []; destMarkers.forEach((dm) => { dm.remove(); }); destMarkers = []; gridContainer.innerHTML = ""; }; mapDM.map.on("click", (e) => { let marker = new nextbillion.maps.Marker({ color: document.getElementById("origDest").value === "orig" ? "green" : "red", scale: 0.6, draggable: false }) .setLngLat({ lat: e.lngLat.lat, lng: e.lngLat.lng }) .setPopup( new nextbillion.maps.Popup({ closeOnClick: false }).setHTML( document.getElementById("origDest").value === "orig" ? `O${origMarkers.length + 1}` : `D${destMarkers.length + 1}` ) ) .addTo(mapDM.map); marker.togglePopup(); if (document.getElementById("origDest").value === "orig") { origMarkers.push(marker); } else { destMarkers.push(marker); } if (destMarkers.length > 0 && origMarkers.length > 0) { let origString = ""; let destString = ""; destMarkers.forEach(function (dm) { destString += `${dm.getLngLat().lat},${dm.getLngLat().lng}|`; }); origMarkers.forEach(function (om) { origString += `${om.getLngLat().lat},${om.getLngLat().lng}|`; }); destString = destString.substr(0, destString.length - 1); origString = origString.substr(0, origString.length - 1); requestDistanceMatrix(origString, destString); } }); }36:T645,snapMap = { apiKey; await visibility(); const container = html`

`; yield container; let routePolyline = null; let waypoints = []; let pos = { lat: panel.city.centroid.split(",")[0], lng: panel.city.centroid.split(",")[1] }; const mapSnap = (container.value = new nextbillion.maps.Map({ container: document.getElementById("mapSnap"), center: pos, zoom: 12, minZoom: 5, maxZoom: 15, style: panel.styles.value, scrollZoom: true })); const cont = mapSnap.map?.getContainer(); if (!cont) return; const attributionElements = cont.querySelectorAll(".maplibregl-ctrl-attrib"); attributionElements.forEach((element) => { if (element && element.parentNode) { element.parentNode.removeChild(element); } }); loadMapActions(mapSnap); document.getElementById("clearSnapMap").onclick = function () { clearMap(mapSnap, null, null, waypoints); waypoints = []; }; // click on map actions - create origin or destination mapSnap.map.on("click", (e) => { // waypoint var waypointMarker = new nextbillion.maps.Marker({ color: "blue", draggable: true, scale: 0.6 }) .setLngLat({ lat: e.lngLat.lat, lng: e.lngLat.lng }) .addTo(mapSnap.map); waypointMarker.on("dragend", (e) => { requestSnapToRoad(mapSnap, waypoints); }); waypoints.push(waypointMarker); if (waypoints.length > 1) { requestSnapToRoad(mapSnap, waypoints); } }); }37:T50f,async function nbaiDiscoverGeocode(config) { let countryList = [ "GBR", "AND", "USA", "DEU", "CAN", "MEX", "IND", "FRA", "SGP", "GBR", "ZAF", "SWE", "FIN", "NOR", "DNK", "ESP", "POR", "BEL", "CHE", "ARE", "SAU", "BRA", "ARG", "AUS", "AUT", "EST", "IDN", "IRL", "ISR", "ITA", "JPN" ]; const response = await fetch( `https://api.nextbillion.io/h/discover?q=${ config.query }&limit=5&in=countryCode:${countryList.toString()}&lang=${ panel3.language.value }&at=${panel3.city.centroid}&key=${apiKey}` ); let data = await response.json(); let collection = { type: "FeatureCollection", features: [] }; data.items.forEach((itm) => { let ft = { type: "Feature", geometry: { type: "Point", coordinates: [itm.position.lng, itm.position.lat] }, properties: { address: itm.address.label, full_result: itm }, place_name: itm.address.label, result_type: itm.resultType, place_type: itm.categories ? itm.categories[0].name : "N/A", center: [itm.position.lng, itm.position.lat] }; collection.features.push(ft); }); return collection; }38:T69e,originSearch = { const container3 = html`

`; yield container3; await visibility(); var geocoder = new nbaiGeocodePlugin({ externalGeocoder: externalGeocoder, limit: 5, placeholder: "Set Origin", nbaiKey: apiKey, render: function (item) { const result_type = item.result_type; let place_type = ""; let maki = "location-dot"; return ``; } }); geocoder.setMinLength(2); geocoder.addTo(container3); geocoder.on("result", function (e) { mutable originSearchResult = []; mutable originSearchResult.push(e.result); }); geocoder.on("clear", function (e) { mutable originSearchResult = []; }); var geocoder2 = new nbaiGeocodePlugin({ externalGeocoder: externalGeocoder, limit: 5, placeholder: "Set Destination", nbaiKey: apiKey, render: function (item) { // extract the item's maki icon or use a default const result_type = item.result_type; let place_type = ""; let maki = "location-dot"; return ``; } }); geocoder2.setMinLength(2); geocoder2.addTo(container3); geocoder2.on("result", function (e) { console.log(e.result); mutable destinationSearchResult = []; mutable destinationSearchResult.push(e.result); }); geocoder2.on("clear", function (e) { mutable destinationSearchResult = []; }); }39:T4f1,{ if (!result) return; else return Inputs.table(result.routes[0].legs[0].steps, { columns: [ "maneuver", "road_shield_type", "max_speed", "distance", "duration" ], header: { maneuver: `Instruction`, road_shield_type: "Hwy Sign", max_speed: "Speed Limit", distance: `Distance (Total = ${( result.routes[0].distance / 1000 ).toFixed(1)} km )`, duration: `Duration (Total = ${convertMinutesToTime( (result.routes[0].duration / 60).toFixed(0) )}M )` }, format: { distance: (x) => `${x.value > 1000 ? (x.value / 1000).toFixed(1) : x.value}${ x.value > 1000 ? " km" : " m" }`, duration: (x) => `${(x.value / 60).toFixed(1)} min`, maneuver: (x) => maneuverIcon(x.maneuver_type, x.modifier, x.instruction), road_shield_type: (x) => shield(x.image_url, x.label), max_speed: (x) => inputData_a.uom.value === "imperial" ? Math.ceil(x * 0.6213712) : x //speedLimitIcon() }, width: { maneuver: 180, distance: 60, duration: 60, road_shield_type: 40, max_speed: 40 } }); }3a:Tcee,navMap = { apiKey; await visibility(); const container = html`

`; yield container; let routePolyline = null; let waypoints = []; let pos = { lat: panel.city.centroid.split(",")[0], lng: panel.city.centroid.split(",")[1] }; const navMap = (container.value = new nextbillion.maps.Map({ container: document.getElementById("mapNav"), center: pos, zoom: 12, minZoom: 5, maxZoom: 21, style: panel.styles.value, scrollZoom: true })); const cont = navMap.map?.getContainer(); if (!cont) return; const attributionElements = cont.querySelectorAll(".maplibregl-ctrl-attrib"); attributionElements.forEach((element) => { if (element && element.parentNode) { element.parentNode.removeChild(element); } }); navMap.map.on("load", function () { panel.city.onchange = function () { let pos = { lat: panel.city.centroid.split(",")[0], lng: panel.city.centroid.split(",")[1] }; navMap.map.flyTo({ center: pos, zoom: 13, speed: 9.0, curve: 0.8 }); }; if (result) { let unescapedPoly = result.routes[0].geometry .replace(/\\\\/g, "\\") .replace(/\\"/g, '"'); let geojson = { type: "FeatureCollection", features: [ { type: "Feature", properties: {}, geometry: { coordinates: nextbillion.utils.polyline .decode(unescapedPoly, 6) .map((c) => c.reverse()), type: "LineString" } } ] }; if (!navMap.map.getSource("route")) { navMap.map.addSource("route", { type: "geojson", data: null }); } navMap.map.getSource("route").setData(geojson); if (navMap.map.getLayer("route")) { navMap.map.removeLayer("route"); } navMap.map.addLayer({ id: "route", type: "line", source: "route", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": "#8D5A9E", "line-width": 3 } }); let bounds = geojson.features[0].geometry.coordinates.reduce(function ( bounds, coord ) { return bounds.extend(coord); }, new nextbillion.maps.LngLatBounds(geojson.features[0].geometry.coordinates[0], geojson.features[0].geometry.coordinates[0])); navMap.map.fitBounds(bounds, { padding: 20, animate: false }); // ---- ADD START AND END MARKERS ---- let startCoord = geojson.features[0].geometry.coordinates[0]; // First point let endCoord = geojson.features[0].geometry.coordinates[ geojson.features[0].geometry.coordinates.length - 1 ]; // Last point // Add start marker new nextbillion.maps.Marker({ color: "green" }) .setLngLat(startCoord) .addTo(navMap.map); // Add end marker new nextbillion.maps.Marker({ color: "red" }) .setLngLat(endCoord) .addTo(navMap.map); } }); // click on map actions - create origin or destination navMap.map.on("click", (e) => {}); }3b:T32a3,shield = (url, label) => { if (url) { return html`

`; } else if (label) { // shield label but we don't have a shield image return svg``; //return html`${label}`; } else { return html``; } }3c:T4f9,viewof encodedPoly = Inputs.text({ readonly: false, label: "Encoded Polyline", value: "kkgnA}hoxMA@KZINIEKGIGHO^w@Zo@N[R_@HQLUFKxAmBDI^k@\\e@X]ZMLOJITe@HS`@cADc@FUPw@FWH]La@BOPg@DMJ]F]@Q@iAD}@?_@AMAWO}@Mq@Kg@Q{@EUG[G[Ia@Ou@?AKe@G]EUDMCKe@SOEOAQCi@Iu@Ui@QEC_@K[I]MOCGESAICK?K?E?]@A@G@A?I@C?C?EAA?CCAA?C?E?C@EQ?m@Bi@B_@BI?Q?aBFO@{@BC?cBDeADg@B[@q@BUBaAF@CDW@QF}@?uA?WAk@EaACy@?I?KAa@?K?[A{B@MBSFMN[TWNU\\g@T[HMFGNS]QGAg@QSKOGWOMIIGIG[SWSCCs@c@aAm@oAw@OKOIKI[YwAoAIGECaA{@kB{AGGM@o@CYCUCC?CGGGCG]SWMOGIEKECCOKEGC?CICEAK?M@ODODSBI@GBQBM?S?MCKCQSm@Qo@}@qDIe@G[SgAa@_CKe@Ms@AY?UD[F[@G^{BL_AHg@BQBOBMBKF]P{@FYBKJg@Ja@BMBMFUFUDQ@K@A?C@E@CBM@CJg@^qAZgABKTw@DIBKJ]BIDKDQL_@n@{BHYFSJc@BEDS@M?I@M?A?K?G?M@K?WBaA?O?QDe@Jg@FOFKDGFKLSFMFINST]`@o@@CFIJOp@}@P[FIZg@`@s@BEHOR]FMBEHQDIBIDKFSGC[QgAm@mBeAk@_@MILWiBaAmAu@aAm@mAu@QKSM}BmAHO\\k@Ta@Ta@NWDIr@qARa@LWBGBM?C?MAmAAMCi@IYEOUaAg@cCCGLEFEHCTK`@QFEJCdBu@zAo@JGp@[ZMEIEOAGAI?G?EX{G?Q?I?IEW?AYyAESG[?COs@COAIAECOC]AQAc@@S?IBc@@]HaA?ADm@@Q?AAG?GG_@Om@_@uAQ{@YyAAKASAUA]AKA}@EoAGy@AOAECIAQ?]CeAAa@AS?IAGAIEUAAI[Qu@AA]mA?CEOCKACAK?CUAWCEAGAQABMLmA@K@M^}C^yC@I@AD]Fa@DY@I@INiAt@kHh@{EH}@Jw@?O@c@@KD]Ns@L_@B[?E?i@?U?W@KDi@?A?KCGCAACGCIAYCA?AC?EBSBu@@IBSHU@M?MCMAII[S_@SWCEMWEICUEW@I@a@?C@WBY@I@E@G?E@CHYDKRm@DMTs@DMDQBI@GBK@O@Q?MUA" })3d:T95a,polylineMap = { apiKey; await visibility(); const container = html`

`; yield container; let routePolyline = null; let originMarker = null; let destinationMarker = null; let waypoints = []; let pos = { lat: 40.1177, lng: -83.1265 }; const mapPoly = (container.value = new nextbillion.maps.Map({ container: document.getElementById("mapPoly"), center: pos, zoom: 8, maxZoom: 18, minZoom: 5, style: panel.styles.value, scrollZoom: true })); const cont = mapPoly.map?.getContainer(); if (!cont) return; const attributionElements = cont.querySelectorAll(".maplibregl-ctrl-attrib"); attributionElements.forEach((element) => { if (element && element.parentNode) { element.parentNode.removeChild(element); } }); mapPoly.map.on("load", function () { const locations = [ [43.7356, -79.53402], [43.67973, -79.3217], [43.68202, -79.318778], [43.6834, -79.31301], [43.6802, -79.31252], [43.7356, -79.53402] ]; // Function to add markers to the map locations.forEach(([lat, lon], index) => { const popup = new nextbillion.maps.Popup({ offset: 25 }).setText( `${index}` ); const m = new nextbillion.maps.Marker() .setLngLat([lon, lat]) // MapLibre takes [longitude, latitude] format .setPopup(popup) .addTo(mapPoly.map); m.togglePopup(); }); if (!mapPoly.map.getSource("route")) { mapPoly.map.addSource("route", { type: "geojson", data: null }); } mapPoly.map.getSource("route").setData(decodedPoly); if (mapPoly.map.getLayer("route")) { mapPoly.map.removeLayer("route"); } mapPoly.map.addLayer({ id: "route", type: "line", source: "route", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": "#8D5A9E", "line-width": 3 } }); 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])); mapPoly.map.fitBounds(bounds, { padding: 20 }); }); }3e:T203b,roMap = { apiKey; let unescapedPoly = routeSelector ? routeSelector.geometry : ""; let decodedPoly = { type: "FeatureCollection", features: [ { type: "Feature", properties: {}, geometry: { coordinates: nextbillion.utils.polyline .decode(unescapedPoly, 5) .map((c) => c.reverse()), type: "LineString" } } ] }; const container = html`

`; yield container; let routePolyline = null; let originMarker = null; let destinationMarker = null; let waypoints = []; let pos = { lat: 32.6, lng: -117.049 }; const mapRo = (container.value = new nextbillion.maps.Map({ container: document.getElementById("mapRo"), center: pos, zoom: 8, maxZoom: 18, minZoom: 5, style: panel.styles.value, scrollZoom: true })); const cont = mapRo.map?.getContainer(); if (!cont) return; const attributionElements = cont.querySelectorAll(".maplibregl-ctrl-attrib"); attributionElements.forEach((element) => { if (element && element.parentNode) { element.parentNode.removeChild(element); } }); 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); } ); 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": 7 // 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": 4 // 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 } }); // Animation variables let progress = 0; const arrowSpeed = 0.15; // 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 % 50) ); // Request the next frame for smooth animation requestAnimationFrame(animateArrows); } // Start the animation if (options.includes("Animate")) { 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, linear: true }); // Add numbered pins for each step in the route const steps = routeSelector.steps; let pickups = 0; let dropoffs = 0; let markers = []; steps.forEach((step, index) => { let markerElement; let markerOptions = { element: null, offset: [0, 0] }; if (index === 0 || index === steps.length - 1) { markerElement = document.createElement("div"); markerElement.className = "start-flag-marker"; markerElement.style.backgroundImage = "url(https://d12qcqjlhp2ahm.cloudfront.net/start_flag4.png)"; markerElement.style.backgroundSize = "contain"; markerOptions.element = markerElement; markerOptions.element = markerElement; markerElement.style.width = "24px"; markerElement.style.height = "24px"; markerOptions.element = markerElement; markerOptions.offset = [0, -50]; } else { markerElement = document.createElement("div"); markerElement.className = "step-marker"; markerElement.style.backgroundColor = "#d9c0ea"; markerElement.style.borderRadius = "50%"; markerElement.style.padding = "10px"; markerElement.style.width = "5px"; markerElement.style.height = "5px"; markerElement.style.display = "flex"; markerElement.style.alignItems = "center"; markerElement.style.justifyContent = "center"; if (step.type === "pickup") { pickups++; markerElement.textContent = `P${pickups}`; // Step number markerElement.style.color = "green"; } else if (step.type === "job") { markerElement.textContent = `J${index.toString()}`; // Step number } else { dropoffs++; markerElement.textContent = `D${dropoffs}`; // Step number markerElement.style.color = "red"; } markerOptions.element = markerElement; } // Add the marker to the map at the step's coordinates const marker = new nextbillion.maps.Marker({ element: markerElement }) .setLngLat([step.location[1], step.location[0]]) .addTo(mapRo.map); markers.push(marker); // Create a popup with the description field const popup = new nextbillion.maps.Popup({ closeButton: false, closeOnClick: false }).setText(step.description ? step.description : "Start"); // Show the popup on mouseover and hide on mouseout marker.getElement().addEventListener("mouseenter", () => { popup.setLngLat(marker.getLngLat()).addTo(mapRo.map); }); marker.getElement().addEventListener("mouseleave", () => { popup.remove(); }); }); // Add numbered pins for each unassigned job in solution if (options.includes("Unassigned")) { const unassigned = roResult.result.unassigned; // Assuming 1 leg in the route unassigned.forEach((step, index) => { const markerElement = document.createElement("div"); markerElement.className = "step-marker"; markerElement.style.backgroundColor = "#f7c664"; markerElement.style.color = "white"; markerElement.style.borderRadius = "50%"; markerElement.style.padding = "10px"; markerElement.style.width = "5px"; markerElement.style.height = "5px"; markerElement.style.display = "flex"; markerElement.style.alignItems = "center"; markerElement.style.justifyContent = "center"; markerElement.textContent = index.toString(); // Step number // Add the marker to the map at the step's coordinates new nextbillion.maps.Marker({ element: markerElement }) .setLngLat([step.location[1], step.location[0]]) .addTo(mapRo.map); }); } }); }3f:Tbbd,async function routeMe(nbmap, originMarker, destinationMarker, waypoints) { const directionsService = new nextbillion.maps.DirectionsService(); let wayPts = []; let resp = null; let avoids = []; if (panel2.avoids.includes("Sharp Turn")) { avoids.push("sharp_turn"); } if (panel2.avoids.includes("Highway")) { avoids.push("highway"); } if (originMarker && destinationMarker) { if (waypoints.length) { waypoints.forEach((wp) => { wayPts.push(wp.getLngLat()); }); resp = await directionsService.route({ origin: originMarker.getLngLat(), destination: destinationMarker.getLngLat(), option: "flexible", steps: "true", waypoints: wayPts, avoid: avoids, mode: panel2.routeStyles.value }); } else { resp = await fetch( `https://api.nextbillion.io/directions/json?key=${apiKey}&mode=${ panel2.routeStyles.value }&origin=${originMarker.getLngLat().lat},${ originMarker.getLngLat().lng }&destination=${destinationMarker.getLngLat().lat},${ destinationMarker.getLngLat().lng }&option=${panel2.option.value}&steps=true` ).then((response) => response.json()); } mutable globalRoute = resp.routes[0]; const popup = new nextbillion.maps.Popup() .setLngLat(destinationMarker.getLngLat()) .setHTML( `${(resp.routes[0].distance / 1000.0).toFixed(1)} km
${( resp.routes[0].duration / 60.0 ).toFixed(1)} min` ) .addTo(nbmap.map); let geojson = { type: "FeatureCollection", features: [ { type: "Feature", properties: {}, geometry: { coordinates: nextbillion.utils.polyline .decode(resp.routes[0].geometry, waypoints.length ? 6 : 5) .map((c) => c.reverse()), type: "LineString" } } ] }; let nbrIdx = 1; let wayPointCollection = []; geojson.features[0].geometry.coordinates.forEach((c) => { let wp = { id: nbrIdx++, location: `${c[1]},${c[0]}`, address: "", description: "" }; wayPointCollection.push(wp); }); console.log(wayPointCollection); const firstLabelLayerId = nbmap.map .getStyle() .layers.find((layer) => layer.type === "symbol").id; if (!nbmap.map.getSource("route")) { nbmap.map.addSource("route", { type: "geojson", data: null }); } nbmap.map.getSource("route").setData(geojson); if (nbmap.map.getLayer("route")) { nbmap.map.removeLayer("route"); } nbmap.map.addLayer( { id: "route", type: "line", source: "route", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": "#8D5A9E", "line-width": 10 } }, firstLabelLayerId ); } }40:T705,async function requestDistanceMatrix(origString, destString) { const origs = origString.split("|").map((e) => { return { lat: e.split(",")[0], lng: e.split(",")[1] }; }); const dests = destString.split("|").map((e) => { return { lat: e.split(",")[0], lng: e.split(",")[1] }; }); console.log(origs); const dm = new nextbillion.maps.DistanceMatrixService(); const resp = await dm .getDistanceMatrix({ origins: origs, destinations: dests, mode: "4w" }) .then(function (resp) { let gridContainer = document.getElementById("grid"); gridContainer.style.gridTemplateColumns = `repeat(${ dests.length + 1 }, auto)`; gridContainer.innerHTML = ""; // layout header row let cell = document.createElement("div"); cell.innerHTML = ""; cell.className = "head"; gridContainer.appendChild(cell); dests.forEach((dest, k) => { let cell = document.createElement("div"); cell.innerHTML = "D" + (k + 1); cell.className = "head"; gridContainer.appendChild(cell); }); // matrix row with leading 'O'rigin point origs.forEach((orig, i) => { dests.forEach((dest, j) => { if (j == 0) { let cell = document.createElement("div"); cell.innerHTML = "O" + (i + 1); cell.className = "head"; gridContainer.appendChild(cell); } let cell = document.createElement("div"); cell.innerHTML = resp.rows[i].elements[j].duration.value + " s" + "
" + resp.rows[i].elements[j].distance.value + " m"; cell.className = "cell"; gridContainer.appendChild(cell); }); }); }); }41:T69b,async function requestSnapToRoad(nbmap, wayPoints) { let wayPts = wayPoints.map((marker) => { return marker.getLngLat(); }); let snap = new nextbillion.maps.SnapToRoadsService(); let resp = await snap .getSnapToRoads({ path: wayPts, interpolate: true, mode: "4w" }) .then(function (resp) { // add the corrected points console.log(resp); resp.snappedPoints.forEach((sp) => { const popup = new nextbillion.maps.Popup() .setLngLat({ lat: sp.location.latitude, lng: sp.location.longitude }) .setHTML( `${sp.name}
Distance: ${sp.distance}
Bearing: ${sp.bearing}` ) .addTo(nbmap.map); }); let geojson = { type: "FeatureCollection", features: [ { type: "Feature", properties: {}, geometry: { coordinates: nextbillion.utils.polyline .decode(resp.geometry[0], 5) .map((c) => c.reverse()), type: "LineString" } } ] }; if (!nbmap.map.getSource("route")) { nbmap.map.addSource("route", { type: "geojson", data: null }); } nbmap.map.getSource("route").setData(geojson); if (nbmap.map.getLayer("route")) { nbmap.map.removeLayer("route"); } nbmap.map.addLayer({ id: "route", type: "line", source: "route", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": "#8D5A9E", "line-width": 3 } }); }); }42:T611,async function requestTurnByTurn(origin, destination) { let avoids = inputData_a.avoid.length ? inputData_a.avoid.map((a) => a.value).join("|") : ""; let retval = await fetch( `https://api.nextbillion.io/navigation/json?key=${apiKey}&option=flexible&road_info=max_speed&departure_time=${ Date.parse(inputData_a.departureTime) / 1000 }&origin=${inputData_a.origin}&destination=${ inputData_a.destination }&mode=${inputData_a.mode.value}&lang=${ inputData_a.language.value }&avoid=${avoids}&route_type=${inputData_a.objective.value}` ).then((response) => response.json()); const geometry = nextbillion.utils.polyline .decode(retval.routes[0].geometry, 6) .map((c) => c.reverse()); console.log(geometry); for (let i = 0, len = geometry.length; i < len - 1; i++) { geometry[i].speed = retval.routes[0].road_info.max_speed[i]?.value; } for ( let k = 0, len = retval.routes[0].legs[0].steps.length; k < len - 1; k++ ) { let step = retval.routes[0].legs[0].steps[k]; step.max_speed = -1; for (let i = 0, len2 = geometry.length; i < len2 - 1; i++) { var from = turf.point(geometry[i]); var to = turf.point([ step.end_location.longitude, step.end_location.latitude ]); var options = { units: "meters" }; if (turf.distance(from, to, options) < 250) { retval.routes[0].legs[0].steps[k].max_speed = geometry[i].speed; } } console.log(step); } console.log(retval.routes[0]); return retval; }43:Tce3,inputs = { let newBase = new Date(new Date().getTime() + 86400 * 1000); const inputs = { routeStyles: Inputs.select(routeStyles, { label: "Select route profile", format: (x) => x.name, value: routeStyles.find((t) => t.name === "Automobile") }), city: Inputs.select(cities, { label: "Select City (bias for search)", format: (x) => x.name, value: cities.find((t) => t.name === "Los Angeles") }), option: Inputs.select(routeOptions, { label: "Option", format: (x) => x.name, value: routeOptions.find((t) => t.name === "Standard") }), hazmat: Inputs.select( [ { name: "None", value: "none" }, { name: "General", value: "general" } ], { label: "Hazmat", format: (x) => x.name, value: "none" } ), uom: Inputs.select( [ { name: "Imperial", value: "imperial" }, { name: "Metric", value: "metric" } ], { label: "Units of Measure", format: (x) => x.name, value: "imperial" } ), objective: Inputs.select( [ { name: "Fastest", value: "fastest" }, { name: "Shortest", value: "shortest" } ], { label: "Objective", format: (x) => x.name, value: "fastest" } ), avoid: Inputs.select(routeAvoids, { label: "Avoid", multiple: true, format: (x) => x.name, value: routeAvoids.find((t) => t.name === "None") }), avoidsString: () => inputs.avoids.value.join("|"), // Pipe-delimited string language: Inputs.select(languages, { label: "Select Language", format: (x) => x.name, value: languages.find((t) => t.name === "English") }), mode: Inputs.select(routeStyles, { label: "Routing Mode", format: (x) => x.name, value: routeStyles.find((t) => t.name === "Automobile") }), origin: Inputs.text({ readonly: true, label: " ", value: originSearchResult[0] ? `${originSearchResult[0].geometry.coordinates[1]},${originSearchResult[0].geometry.coordinates[0]}` : "33.94357963111472,-118.40808029820415" }), originText: Inputs.text({ readonly: true, label: "Origin location", value: originSearchResult[0] ? `${originSearchResult[0].place_name}` : "LAX" }), destination: Inputs.text({ readonly: true, label: " ", value: destinationSearchResult[0] ? `${destinationSearchResult[0].geometry.coordinates[1]},${destinationSearchResult[0].geometry.coordinates[0]}` : "34.06089882563416,-117.5963466138298" }), destinationText: Inputs.text({ readonly: true, label: "Dest location", value: destinationSearchResult[0] ? `${destinationSearchResult[0].place_name}` : "Ontario Airport" }), departureTime: Inputs.datetime({ label: "Departure Time", value: newBase.toISOString().slice(0, -1) }), avoids: Inputs.checkbox( ["Tolls", "Highway", "Ferry", "Sharp Turn", "U-Turn", "Service Road"], { label: "Avoid on Route", value: [ "toll", "highway", "ferry", "sharp_turn", "uturn", "service_road" ] } ) }; return inputs; }44:T8c6,html``45:[{"id":"be8b73778b99f33ed3a48744947cc9c7d2ddf7f7f83c79e649bc42e8722af05b12ec2053a514bea83947504193e08b1717e85ab91a8db6d9cbbeeb5f068c0827","href":"https://static.observableusercontent.com/files/be8b73778b99f33ed3a48744947cc9c7d2ddf7f7f83c79e649bc42e8722af05b12ec2053a514bea83947504193e08b1717e85ab91a8db6d9cbbeeb5f068c0827","name":"decodedPoly.json","type":"application/json","lastModified":1721677001224.747,"size":72128}] 31:{"id":"e9749090f66bc63f","slug":"nbai-websdk","title":"NextBillion.ai Mapping SDK Examples","thumbnail":"7f582b7292dbe5017a0d0b18f2f96230d007a3127a396b31a04f5b72f345417c","access_level":"public","create_time":"$D2023-01-26T17:57:55.599Z","update_time":"$D2026-06-10T15:29:14.671Z","view_time":null,"first_public_time":"$D2023-01-26T18:32:35.869Z","has_unpublished_edits":null,"fork":false,"stars":1,"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":1217,"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":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":{"id":"5e6955c88320d791","slug":"websdk-examples","title":"Platform - API and SDK Examples","owner":{"id":"05baed136f9134c1","login":"nbai","name":"NB.AI Solutions Team"}},"type":"notebook","body":{"title":"NextBillion.ai Mapping SDK Examples","cells":[{"id":154,"value":"![text](https://d12qcqjlhp2ahm.cloudfront.net/maps-logo.svg)\n# NextBillion.ai Mapping SDK Examples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":170,"value":"toc(\"h2,h3,h4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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":173,"value":"## Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"---\nInitialize the NB.ai SDK with your API key. You only need to do this once.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"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":1176,"value":"apiKey","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"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":68,"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":71,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"There are several different map styles that can be used for map tiling services.\n\n- Day style: This style is used for maps during daylight hours. It generally features bright colors and high contrast to make it easy to read and navigate.\n\n- Night style: This style is used for maps during nighttime hours. It generally features darker colors and lower contrast to reduce glare and make it easier to read and navigate in low-light conditions.\n\n- Hybrid style: This style combines elements of both day and night styles. It generally features a mix of bright and dark colors, and includes an additional satellite imagery layer to provide more context to the user.\n\nSelect your mapstyle i.e. Day, Night, Hybrid (w/ satellite imagery). Changing the map style will reflect in all maps in the notebook.\n\nNext select your area-of-interest(aoi) for each map. Changing the 'aoi' will reflect in all example maps.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"viewof panel = Inputs.form(parameters, {\n template: (v) => htl.html`\n

\n ${v.styles}\n ${v.city}\n

`;\n yield container;\n let routePolyline = null;\n let originMarker = null;\n let destinationMarker = null;\n let waypoints = [];\n let pos = {\n lat: panel.city.centroid.split(\",\")[0],\n lng: panel.city.centroid.split(\",\")[1]\n };\n const nbmap = (container.value = new nextbillion.maps.Map({\n container: document.getElementById(\"map\"),\n center: pos,\n zoom: 15,\n maxZoom: 20,\n minZoom: 1,\n style: panel.styles.value,\n scrollZoom: true\n }));\n const cont = nbmap.map?.getContainer();\n if (!cont) return;\n const attributionElements = cont.querySelectorAll(\".maplibregl-ctrl-attrib\");\n attributionElements.forEach((element) => {\n if (element && element.parentNode) {\n element.parentNode.removeChild(element);\n }\n });\n loadMapActions(nbmap);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"## Example 2: Directions\nCreate a clickable map that will create a route between an origin, destination and any intermediate waypoints. To start just click on two locations to set an origin and destination. Click again to set more waypoints between the origin and destination. Each marker can be moved to adjust the route. \n\nNote: Truck routing is only available in select geographies currently (US, India)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"viewof panel2 = Inputs.form(inputs, {\n template: (v) => htl.html`\n

\n ${v.routeStyles}\n ${v.option}\n ${v.hazmat}\n ${v.avoids}\n \n

\n\n`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1172,"value":"panel.styles","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"mutable globalRoute = undefined","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"---\n## Example 3: Distance Matrix\n\nA distance matrix is a table that shows the distances and travel times between a set of locations. In the context of vehicle routing problems, a distance matrix can be used to represent the distances between different customers or delivery points that a fleet of vehicles must visit. \n\nThe distance matrix can be used as input to a vehicle routing algorithm, which can then use the information to determine an efficient route for the vehicles to follow. This can include factors such as the total distance traveled, the number of vehicles needed, and the time required to complete the deliveries. The algorithm can also consider other constraints such as capacity and time windows to optimize the route. \n\nTake a look at this notebook for an example of a complete Vehicle Routing Problem Solver. Observable Notebook - NB.ai MVRP","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":102,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"---\n## Example 4: Snap to Road\n\nSnap to Road is a service that takes raw GPS coordinates (latitude and longitude) as input and matches them to a known road or street in the digital map. This process is also known as \"map matching\" or \"GPS snapping.\" The service uses a combination of algorithms and data from the road network database to determine the closest match for the GPS point and return the corresponding address or road segment. This service can be used in a variety of applications, including navigation, transportation, and logistics.\n\nIn logistics, the service of snapping GPS points to a mapping road network can be used to track and optimize the movement of goods and vehicles. This is done by collecting GPS data from vehicles and then matching it to the road network to determine the exact location and route of the vehicle. This information can then be used to improve route planning and optimize delivery schedules.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":108,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"---\n## Example 5: Navigation - Turn-By-Turn Instructions\n\nThe NB.ai navigation API service helps deliver a turn-by-turn navigation experience. In this example we do this without a map and verbal instructions by providing the user with text-based instructions at specific trigger points, indicating when and where to turn. The trigger points are distance-based from the maneuver point. The instructions would typically include the name of the street or road to turn onto, as well as the direction, such as \"Turn left onto Main Street\" or \"Turn right onto Elm Street.\"\n\nGet started by setting an Origin and Destination using the search boxes below. When you have set all the navigation input parameters, click 'Navigate' to receive the turn by turn maneuver instructions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"async function externalGeocoder(input, _features, config) {\n const { features } = await nbaiDiscoverGeocode({\n query: input,\n proximity: config.proximity,\n nbaiKey: config.nbaiKey\n });\n return features;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"viewof panel3 = Inputs.form(inputs, {\n template: (v) => htl.html`\n

\n ${v.departureTime}\n ${v.language}\n ${v.mode}\n ${v.avoid}\n ${v.objective}\n ${v.uom}\n

\n ${v.originText}\n ${v.origin}\n\n

\n\n

\n ${v.destinationText}\n ${v.destination}\n\n

\n`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"{\n const button = html` `;\n button.onclick = () => {\n mutable inputData_a = panel3;\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":133,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1104,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"result = {\n if (inputData_a) return requestTurnByTurn();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"speedLimitIcon = (speed) => {\n console.log(speed);\n var signContainer = document.createElement(\"div\");\n signContainer.style.display = \"inline-block\";\n\n var signShape = document.createElement(\"div\");\n signShape.style.width = \"30px\";\n signShape.style.height = \"30px\";\n signShape.style.borderRadius = \"50%\";\n signShape.style.background = \"red\";\n signContainer.appendChild(signShape);\n\n var signText = document.createElement(\"div\");\n signText.style.textAlign = \"center\";\n signText.style.color = \"white\";\n signText.style.fontSize = \"12px\";\n signText.style.fontWeight = \"bold\";\n signText.style.marginTop = \"-25px\";\n signText.textContent = \"5\";\n signContainer.appendChild(signText);\n return signContainer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"maneuverIcon = (type, mod, instruction) => {\n if (!mod) {\n return html`

${instruction}`;\n } else if (mod === \"uturn\") {\n return html`

${instruction}`;\n } else if (mod === \"straight\") {\n return html`

${instruction}`;\n } else {\n return html`

${instruction}`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"mutable originSearchResult = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"mutable destinationSearchResult = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"---\n## Example 6: Decode Route Polyline Geometry","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":241,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"Decoded polyline as geojson object appears here. You can download JSON using the command selector to the left.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":247,"value":"decodedPoly = {\n const unescapedPoly = encodedPoly.replace(/\\\\\\\\/g, \"\\\\\").replace(/\\\\\"/g, '\"');\n\n let geojson = {\n type: \"FeatureCollection\",\n features: [\n {\n type: \"Feature\",\n properties: {},\n geometry: {\n coordinates: nextbillion.utils.polyline\n .decode(unescapedPoly, 5)\n .map((c) => c.reverse()),\n type: \"LineString\"\n }\n }\n ]\n };\n return geojson;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"dpoly = FileAttachment(\"decodedPoly.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"resgeojson = {\n let coordinates = dpoly.features[0].geometry.coordinates;\n console.log(dpoly.features[0].geometry.coordinates.length);\n // Reduce the number of coordinates to 500\n let reducedCoordinates = coordinates.slice(0, 2800);\n\n // Update the geometry field with reduced coordinates\n //decodedPoly.features[0].geometry.coordinates = reducedCoordinates;\n\n let newCoords = reducedCoordinates.map((c) => [c[1], c[0]]);\n\n return nextbillion.utils.polyline.encode(newCoords, 6);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"bbox = {\n let line = turf.lineString(decodedPoly.features[0].geometry.coordinates);\n let bbox = turf.bbox(line);\n\n return bbox;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":800,"value":"---\n## Example 7 - Render Route Optimization Result","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":862,"value":"##### Enter a route optimization ID in the box below that was previously returned for this API key","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":805,"value":"viewof roId = Inputs.text({\n readonly: false,\n label: \"route optimization ID\",\n value: \"65e53f2e67e549af9dc0d5d8c037b19c\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"viewof options = Inputs.checkbox([\"Unassigned\", \"Animate\"], {\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"roResult = {\n const roService = new nextbillion.maps.OptimizationMvrpServiceV2();\n\n const roResult = await roService.retrieve({ id: roId, apiKey: apiKey });\n\n return roResult;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"viewof routeSelector = Inputs.select(\n roResult.result ? roResult.result.routes : [],\n {\n multiple: false,\n label: \"Select route to view\",\n format: (t) => t.vehicle.toString(),\n value: (t) => t\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"viewof selectedRow = Inputs.table(routeSelector.steps, {\n columns: [\"type\", \"arrival\", \"load\", \"id\"],\n header: {\n type: \"Task\",\n arrival: \"Arrival\",\n load: \"Load\",\n description: \"Description\"\n },\n width: {\n type: 80,\n arrival: 80,\n load: 100,\n description: 450\n },\n format: {\n type: (x) => x.toUpperCase(),\n arrival: (x) =>\n new Date(x * 1000).toLocaleTimeString([], {\n hour: \"2-digit\",\n minute: \"2-digit\",\n hour12: false\n })\n },\n rows: 100,\n maxWidth: 1000,\n multiple: false,\n required: false,\n\n // Conditional row styling based on type\n row: (row, d) => {\n if (d.type === \"PICKUP\") {\n row.style.backgroundColor = \"lightgreen\";\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":807,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"---\n## Other Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"async function loadMapActions(nbmap) {\n nbmap.map.on(\"resize\", function () {\n console.log(\"Resize event fired...\");\n });\n nbmap.map.on(\"load\", function () {\n console.log(\"Map loaded event fired...\");\n panel.city.onchange = function () {\n let pos = {\n lat: panel.city.centroid.split(\",\")[0],\n lng: panel.city.centroid.split(\",\")[1]\n };\n\n nbmap.map.flyTo({\n center: pos,\n zoom: 13,\n speed: 9.0,\n curve: 0.8\n });\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"The `routeMe()` function is used whenever an example requires an NB.ai route calculated. Arguments are the NB.ai map instance, origin marker, destination marker, and optionally a set of intermediate waypoints.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":606,"value":"panel.styles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"`requestDistanceMatrix()` function will make a request to the DistanceMatrixService of the NB.ai SDK and render the results in the grid/table element provided.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"`requestSnapToRoad()` function will make a request to the SnapToRoadsService of the NB.ai SDK and render the fitted route and snapped locations from the point inputs provided.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":49,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"`requestTurnByTurn()` function will make a request to the NavigationService of the NB.ai SDK and retrieve the list of maneuver instructions between the provided origin and destination.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"async function clearMap(nbmap, origin, destination, waypoints) {\n if (nbmap.map.getLayer(\"route\")) {\n nbmap.map.removeLayer(\"route\");\n }\n if (origin) {\n origin.remove();\n }\n if (destination) {\n destination.remove();\n }\n waypoints.forEach((wp) => {\n wp.remove();\n });\n\n const popups = [...document.getElementsByClassName(\"mapboxgl-popup\")];\n popups.forEach((pu) => {\n pu.remove();\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"mutable inputData_a = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"function convertMinutesToTime(minutes) {\n var hours = Math.floor(minutes / 60).toFixed(0);\n var mins = minutes % 60;\n var time = hours + \"H\" + (mins < 10 ? \"0\" + mins : mins);\n return time;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import {\n parameters,\n routeAvoids,\n languages,\n cities,\n place_types,\n secret2,\n vehicleTypes,\n routeStyles,\n nbMap\n} from \"@nbai/nextbillion-ai-dependencies\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"routeOptions = [\n { name: \"Standard\", value: \"\" },\n { name: \"Flexible\", value: \"flexible\" }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"nbaiGeocodePlugin = require(\"https://d12qcqjlhp2ahm.cloudfront.net/mbac_test.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"turf = require(\"https://unpkg.com/@turf/turf@^6/turf.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1","titling":"auto"}} 32:"$31:body"