2d:null 2e:["$","title",null,{"children":"Simple Distance Matrix Example - Flex and Standard | NB.AI Solutions Team | Observable"}] 33:Tf35,async function theGrid(map) { if (!inputData_a) return undefined; let origMarker, destMarker, cellId; const gridContainer = document.getElementById("grid"); // Set grid container properties for horizontal scrolling gridContainer.style.overflowX = "auto"; gridContainer.style.whiteSpace = "nowrap"; gridContainer.style.gridTemplateColumns = `repeat(${ randomVRPInputs.pointsArray.length + 1 }, auto)`; gridContainer.innerHTML = ""; // Create header row const createHeaderCell = (content) => { const cell = document.createElement("div"); cell.innerHTML = content; return cell; }; gridContainer.appendChild(createHeaderCell("")); // Empty top-left corner cell randomVRPInputs.pointsArray.forEach((point) => { const latLng = `${parseFloat(point.dropoff_latitude).toFixed( 3 )},${parseFloat(point.dropoff_longitude).toFixed(3)}`; const headerCell = createHeaderCell(latLng); headerCell.className = "vcell"; gridContainer.appendChild(headerCell); }); // Create grid body const createDataCell = (i, j, duration, distance) => { const cell = document.createElement("div"); cell.innerHTML = `${duration} mn
${distance} km`; cell.className = "cell"; cell.id = `${i}|${j}`; return cell; }; const createPointCell = (lat, lon) => { const cell = document.createElement("div"); cell.innerHTML = `${parseFloat(lat).toFixed(3)},${parseFloat(lon).toFixed( 3 )}`; cell.className = "vcell"; return cell; }; for (let i = 0; i < randomVRPInputs.pointsArray.length; i++) { // First column cells (row headers) gridContainer.appendChild( createPointCell( randomVRPInputs.pointsArray[i].dropoff_latitude, randomVRPInputs.pointsArray[i].dropoff_longitude ) ); for (let j = 0; j < randomVRPInputs.pointsArray.length; j++) { const { duration, distance } = theDM.rows[i].elements[j]; const dataCell = createDataCell( i, j, (duration.value / 60).toFixed(0), (distance.value / 1000).toFixed(1) ); // Add event listener for route visualization dataCell.addEventListener("mousedown", async () => { if (cellId) { if (origMarker) origMarker.remove(); if (destMarker) destMarker.remove(); document.getElementById(cellId).className = "cell"; clearRoute(map); } cellId = dataCell.id; const [oLat, oLon] = [ randomVRPInputs.pointsArray[i].dropoff_latitude, randomVRPInputs.pointsArray[i].dropoff_longitude ]; const [dLat, dLon] = [ randomVRPInputs.pointsArray[j].dropoff_latitude, randomVRPInputs.pointsArray[j].dropoff_longitude ]; document.getElementById(cellId).className = "selectedCell"; origMarker = new nextbillion.maps.Marker({ color: "green", draggable: false, scale: 0.6 }) .setLngLat([oLon, oLat]) .addTo(map.map); destMarker = new nextbillion.maps.Marker({ color: "red", draggable: false, scale: 0.6 }) .setLngLat([dLon, dLat]) .addTo(map.map); // Fit the map view to the bounding box map.map.fitBounds( [ [Math.min(oLon, dLon), Math.min(oLat, dLat)], // Southwest corner of the bounding box [Math.max(oLon, dLon), Math.max(oLat, dLat)] // Northeast corner of the bounding box ], { padding: 50, // Add some padding around the box maxZoom: 14, // Set a maximum zoom level duration: 1000 // Animation duration in milliseconds } ); routeMe(map, { lat: oLat, lng: oLon }, { lat: dLat, lng: dLon }); }); gridContainer.appendChild(dataCell); } } }34:T53d,async function routeMe(nbmap, origin, destination) { const directionsService = new nextbillion.maps.DirectionsService(); let wayPts = []; let resp = null; if (origin && destination) { resp = await directionsService.route({ origin: origin, destination: destination, mode: panel.routeStyle.value, option: inputData_a.mode.value, departureTime: Date.parse(inputData_a.departureTime) / 1000 }); let geojson = { type: "FeatureCollection", features: [ { type: "Feature", properties: {}, geometry: { coordinates: nextbillion.utils.polyline .decode(resp.routes[0].geometry, 6) .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 } }); } }35:T551,inputs = { const offset = new Date().getTimezoneOffset(); let newBase = new Date(new Date().getTime() + 86400 * 1000); let tmrwStart = new Date( `${newBase.toLocaleDateString("en-US")} 06:00:00 GMT${ offset >= 0 ? "+" : "" }${Math.round(offset / 60)}${ Math.abs(offset % 60) ? Math.abs(offset % 60) : "" }` ); const inputs = { departureTime: Inputs.datetime({ label: "Departure Time", value: tmrwStart.toISOString().slice(0, -1) }), city: Inputs.select(cities, { label: "City", format: (x) => x.name, value: cities.find((t) => t.name === "Los Angeles") }), jobs: Inputs.select([5, 10, 25, 50, 75, 100], { label: "Number of Origin/Dests", value: "10" }), routeStyle: Inputs.select(routeStyles, { label: "Route Profile", format: (x) => x.name, value: routeStyles.find((t) => t.name === "Automobile") }), context: Inputs.select( [ { name: "None", value: "" }, { name: "Average Speed", value: "avgspeed" } ], { label: "Context", format: (x) => x.name } ), mode: Inputs.select( [ { name: "Standard", value: "standard" }, { name: "Flexible", value: "flexible" } ], { label: "Options", format: (x) => x.name } ) }; return inputs; }36:T946,html``37:[] 31:{"id":"99992b0b0a9c336a","slug":"dm-example-flex-and-standard","title":"Simple Distance Matrix Example - Flex and Standard","thumbnail":"ac75fd5d2864cd703cd110a4bb019b2a8950a1d88e6955e672265e446ca43541","access_level":"public","create_time":"$D2023-01-27T16:15:25.540Z","update_time":"$D2024-10-30T19:11:28.825Z","view_time":null,"first_public_time":"$D2023-01-27T17:11:36.623Z","has_unpublished_edits":null,"fork":false,"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":349,"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":2,"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":"Simple Distance Matrix Example - Flex and Standard","cells":[{"id":0,"value":"# Simple Distance Matrix Example - Flex and Standard","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"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":78,"value":"viewof panel = Inputs.form(inputs, {\n template: (v) => htl.html`\n

\n ${v.departureTime}\n ${v.city}\n ${v.jobs}\n ${v.routeStyle}\n ${v.mode}\n ${v.context}\n

\n\n`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"{\n const button = html` `;\n button.onclick = () => {\n mutable inputData_a = panel;\n let tbl = document.getElementById(\"grid\");\n tbl.innerHTML = \"Matrix pending...\";\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":48,"value":"md`Display a formatted table of the results - in this case we display the travel time in minutes and travel distance in kilometers between each location.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":263,"value":"randomVRPInputs = {\n if (inputData_a) {\n let retval = null;\n retval = await fetch(\n `https://m4aqpzp5ah6n7ilzunwyo5ma2u0ezqcc.lambda-url.us-east-2.on.aws/?region=${inputData_a.city.value}&number=${inputData_a.jobs}&vehicles=${inputData_a.vehicles}&type=darp`\n ).then((response) => response.json());\n return retval;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"inputData_a.context","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"theDM = {\n if (inputData_a == undefined) {\n return undefined;\n }\n\n // pipe(|) delimited positions lat,lon\n const origS = randomVRPInputs.pointsArray\n .map((a) => `${a.dropoff_latitude},${a.dropoff_longitude}`)\n .join(\"|\");\n\n let retval = null;\n retval = await fetch(\n `https://api.nextbillion.io/distancematrix/json?key=${apiKey}${\n inputData_a.context.value == \"avgspeed\" ? \"&context=avgspeed\" : \"\"\n }&origins=${origS}&destinations=${origS}&departure_time=${\n Date.parse(inputData_a.departureTime) / 1000\n }&option=${inputData_a.mode.value}&mode=${inputData_a.routeStyle.value}`\n ).then((response) => response.json());\n\n yield retval;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"viewof myMap = {\n apiKey;\n let markerCollection = [];\n await visibility();\n const container = html`

`;\n yield container;\n let pos = {\n lat: 34.01645908,\n lng: -117.8443661\n };\n\n const map = (container.value = new nextbillion.maps.Map({\n container: container,\n center: pos,\n zoom: 8,\n maxZoom: 15,\n minZoom: 5,\n style: \"https://api.nextbillion.io/maps/streets/style.json\",\n scrollZoom: true\n }));\n\n map.map.on(\"load\", function () {\n theGrid(map);\n });\n invalidation.then(() => map.map.remove());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"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":30,"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":177,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":156,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"async function clearRoute(nbmap) {\n if (nbmap.map.getLayer(\"route\")) {\n nbmap.map.removeLayer(\"route\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"mutable inputData_a = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {\n nextbillion,\n secret2,\n routeStyles,\n cities\n} from \"@nbai/nextbillion-ai-dependencies\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"