2b:null 2c:["$","title",null,{"children":"LTL Shipping (forked v2) | Texoport's Workspace | Observable"}] 31:T5ef,## Approach * We arbitrarily select four cities in the USA, Columbus, Los Angeles, Detroit, and Austin and select Columbus as the origin city * For each of the above cities, we arbitrarily select a shipping hub, and several manufacturers * Each manufacturer produces exactly one type of item, and item could be a fridge, a washing machine, an AC, or a dish washer. We specify that both fridges and washing machines require the use of liftgates to dismount, so they must be assigned to trucks that have them. * For all of the destination cities, we arbitrarily create 4 electronics stores each, and each store orders **between 30 and 80 products from each manufacturer** * Using the *Flexible Directions* API, we find optimal paths for trucks from each of the manufacturers to the Columbus Shipping Hub * We allocate ${inputs.nTrucksAtOriginHub} long haul trucks to the Columbus Shipping Hub, and use the *Route Optimization API* to find optimal paths and item distributions for each of the trucks. The capacity of each long haul truck is **${inputs.longHaulTruckCapacity} pounds**. * We allocate ${inputs.nTrucksAtDestinationHubs} short haul trucks to each of the Destination Hubs, and the capacity of each short haul truck is **${inputs.shortHaulTruckCapacity} pounds**. We randomly decide if a truck has a liftgate. * Once the items have made their way to the Destination Hubs, we use the *Route Optimization API* once again to distribute them to short haul trucks, to be taken to the respective stores.32:T424,mvrpInputs = { const locations = []; const pickupLocationIndex = 0; locations.push(transformPoint(ORIGIN_HUB.location)); let locationIndex = 1; const jobs = []; const hubLocationIndices = {}; for (const hub of DESTINATION_HUBS) { hubLocationIndices[hub.city] = locationIndex++; locations.push(transformPoint(hub.location)); } for (let orderId = 0; orderId < ORDERS.length; orderId++) { const order = ORDERS[orderId]; const deliveryLocationIndex = hubLocationIndices[order.city]; jobs.push({ id: orderId, location_index: deliveryLocationIndex, delivery: [PRODUCTS[order.itemId].weight], pickup: [PRODUCTS[order.itemId].weight] }); } const vehicles = []; for (const truck of TRUCKS_AT_ORIGIN_HUB) { vehicles.push({ id: truck.id, capacity: [truck.capacity], start_index: 0 // max_tasks: 1 }); } return { depots: [{ id: 0, location_index: 0 }], locations: { id: 1, location: locations.join("|") }, jobs, vehicles }; }33:T44b,{ const parsedGeometry = { type: "LineString", coordinates: nextbillion.utils.polyline .decode(selectedLongHaulRoute.geometry, 5) .map((c) => c.reverse()) }; const centroid = parsedGeometry.coordinates[ Math.floor(parsedGeometry.coordinates.length / 2) ]; const nbmap = new nextbillion.maps.Map({ container: document.getElementById("long-haul-mvrp-result"), center: { lat: centroid[1], lng: centroid[0] }, zoom: 5, maxZoom: 15, minZoom: 0, style: "https://api.nextbillion.io/maps/streets/style.json", scrollZoom: true }); nbmap.on("load", () => { drawRoute(nbmap.map, "route", selectedLongHaulRoute); function getUniqueCoordinates(coords) { const uniqueCoords = new Set(coords.map(JSON.stringify)); return Array.from(uniqueCoords).map(JSON.parse); } const uniqueSteps = getUniqueCoordinates( selectedLongHaulRoute.steps.map((s) => s.location) ); uniqueSteps.forEach((location, idx) => { drawStepIdx(nbmap.map, location.slice().reverse(), idx); }); }); }34:T57c,mvrpFromDestinationHubs = { async function performMVRP(cityCode) { const orders = ORDERS.filter((order) => order.city === cityCode); const locations = [ transformPoint( DESTINATION_HUBS.find((hub) => hub.city === cityCode).location ) ]; const hubLocationIndex = 0; let jobId = 0; const jobs = []; let locationIndex = 1; for (let i = 0; i < orders?.length; i++) { const order = orders[i]; const store = STORES[order.storeId]; jobs.push({ id: jobId++, delivery: [PRODUCTS[order.itemId].weight], location_index: locationIndex++, skills: PRODUCTS[order.itemId].skills }); locations.push(transformPoint(store.location)); } let vehicles = []; for (const vehicle of shortHaulTrucks[cityCode]) { vehicles.push({ id: vehicle.id, skills: _.random() ? [] : [0], start_index: hubLocationIndex, capacity: [inputs.shortHaulTruckCapacity], end_index: hubLocationIndex, description: vehicle.description }); } const result = await MVRP({ locations: { id: 1, location: locations.join("|") }, jobs, vehicles }); return { cityCode, ...result }; } return Promise.all( _.map( DESTINATION_HUBS.map((hub) => hub.city), performMVRP ) ); }35:T5ad,function drawRoute(map, source, data, color = "#7e22ce", width = 5) { const { distance, duration, geometry } = data; const parsedGeometry = { type: "LineString", coordinates: nextbillion.utils.polyline .decode(geometry, 5) .map((c) => c.reverse()) }; const popupLngLat = parsedGeometry.coordinates[ Math.floor(parsedGeometry.coordinates.length / 2) ]; if (!map.getSource(source)) { map.addSource(source, { type: "geojson", data: { type: "Feature", geometry: { type: "LineString", coordinates: nextbillion.utils.polyline .decode(geometry, 5) .map((c) => c.reverse()) } } }); map.addLayer({ id: source, type: "line", source, layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": color, "line-width": width // "line-dasharray": [1, 2] } }); // const element = document.createElement("div"); // element.innerHTML = ` //

distance: ${_.round(distance / 1000, 1)} Km

duration: ${_.round(duration / 3600, 1)} Hours

// `; // element.style.fontSize = "12"; // element.style.backgroundColor = color; // element.style.color = "white"; // element.style.fontWeight = "600"; // new nextbillion.maps.Marker({ element }).setLngLat(popupLngLat).addTo(map); } }36:T448,async function MVRP(data) { const optimizeRequestUrl = `https://api.nextbillion.io/optimise-mvrp?` + `key=${API_KEY}`; const optimizeRequest = await axios .post(optimizeRequestUrl, { ...data, options: { objective: { minimise_num_depots: false, travel_cost: "distance" }, routing: { mode: "truck" } } }) .then((res) => res.data); const mvrpRequestId = optimizeRequest.id; const previewurl = `https://nb-playground-staging.netlify.app/optimization-tester?apiKey=${API_KEY}&requestID=${mvrpRequestId}`; const getResultUrl = `https://api.nextbillion.io/optimise-mvrp/result?id=${mvrpRequestId}&key=${API_KEY}`; // Wait until the Route Optimization result is ready let attempts = 0; while (attempts < 10) { const result = await axios({ url: getResultUrl, method: "GET" }); if ( result.data && result.data.status === "Ok" && result.data.message == "" ) { console.log(result); return result.data; } attempts++; await new Promise((resolve) => setTimeout(resolve, 5 * 1000)); } }37:T732,STORES = { return [ { name: "Smitham Inc", city: "austin", location: [-97.67775, 30.22351], postalCode: "78742-2811", id: 0 }, { name: "Goyette, Stroman and Schiller", city: "austin", location: [-97.75569, 30.25644], postalCode: "78704-1614", id: 1 }, { name: "Feest and Hermann", city: "austin", location: [-97.85122, 30.40729], postalCode: "78726", id: 2 }, { name: "Bashirian and Sons", city: "austin", location: [-97.77488, 30.53963], postalCode: "78613-6923", id: 3 }, { name: "Jones - Durgan", city: "la", location: [-118.12816, 34.09664], postalCode: "91801-3547", id: 4 }, { name: "Larson - Schowalter", city: "la", location: [-118.29751, 33.9826], postalCode: "90044-2731", id: 5 }, { name: "Baumbach, Gutkowski and Schinner", city: "la", location: [-118.08295, 33.94231], postalCode: "90670-3643", id: 6 }, { name: "Stark Inc", city: "la", location: [-118.39707, 33.99065], postalCode: "90230-5358", id: 7 }, { name: "Casper, Bashirian and Bogisich", city: "detroit", location: [-83.26847, 42.44302], postalCode: "48219-1122", id: 8 }, { name: "Keeling Inc", city: "detroit", location: [-82.91314, 42.38731], postalCode: "48230-1504", id: 9 }, { name: "Mueller - Bosco", city: "detroit", location: [-83.23414, 42.34304], postalCode: "48228-4940", id: 10 }, { name: "Rice - MacGyver", city: "detroit", location: [-82.96492, 42.4793], postalCode: "48021-1008", id: 11 } ]; }38:[{"id":"b933f0d08204ba238a5247d27b7de363dc9ba340806af9e95398f9256b3864487a3f4c74a416d8778d5633fc738d5676094a1ef90d97bb0e20ad308db9bc9133","href":"https://static.observableusercontent.com/files/b933f0d08204ba238a5247d27b7de363dc9ba340806af9e95398f9256b3864487a3f4c74a416d8778d5633fc738d5676094a1ef90d97bb0e20ad308db9bc9133","name":"Untitled-2023-08-20-1640.png","type":"image/png","lastModified":1692530639834.307,"size":884819},{"id":"8f783c230ec93ee77502eefb6d83e71ca6476054e55202d6e85554d0d30b77c4006884544bc40cfdcf3197cad26dc3d56b16fa363719fb9d994829662adc9b1c","href":"https://static.observableusercontent.com/files/8f783c230ec93ee77502eefb6d83e71ca6476054e55202d6e85554d0d30b77c4006884544bc40cfdcf3197cad26dc3d56b16fa363719fb9d994829662adc9b1c","name":"volume ltl.png","type":"image/png","lastModified":1692586232685.329,"size":1230860}] 2f:{"id":"d633d99b4ae87962","slug":null,"title":"LTL Shipping (forked v2)","thumbnail":"02bb8956a9dc4805056e9d6dfa8e2e186b47418b33195d4d45020b1f4697e46a","access_level":"public","create_time":"$D2023-08-08T05:35:39.308Z","update_time":"$D2023-08-23T09:30:55.611Z","view_time":null,"first_public_time":"$D2023-08-08T05:35:39.308Z","has_unpublished_edits":null,"fork":{"id":"48fc2d7a5c4f56b9","slug":"ltl-shipping","title":"LTL Shipping for ....","owner":{"id":"787ce1766e2f8353","login":"texoslab","name":"Texoport's Workspace"}},"stars":1,"starred":false,"owner":{"type":"team","id":"787ce1766e2f8353","login":"texoslab","name":"Texoport's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/c682b2e46f70c9b6b07bd1cb3e910d7f8e5a9c164a6363b06edaf7bb932301ff","tier":"starter_2024"},"version":3238,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3a4237a77d0ee063","login":"texoport","name":"Texoport","avatar_url":"https://avatars-next.observableusercontent.com/cc7f2661bbd43a7d4b462619d45c31c6398091f9b8e8b000546719e1bdf9cc36","tier":null}],"members":[{"type":"individual","id":"3a4237a77d0ee063","login":"texoport","name":"Texoport","avatar_url":"https://avatars-next.observableusercontent.com/cc7f2661bbd43a7d4b462619d45c31c6398091f9b8e8b000546719e1bdf9cc36","tier":null,"role":"editor"},{"type":"team","id":"787ce1766e2f8353","login":"texoslab","name":"Texoport's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/c682b2e46f70c9b6b07bd1cb3e910d7f8e5a9c164a6363b06edaf7bb932301ff","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"LTL Shipping (forked v2)","cells":[{"id":0,"value":"# LTL Shipping (forked v2)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1864,"value":"## Background\nIn this notebook, we showcase an implementation of Volume LTL using several of NextBillion.ai's APIs, including the Route Optimization API, the Flexible Directions API, and the Web Maps SDK.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1875,"value":"## Problem Statement\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2808,"value":"Appliance manufacturers in Columbus need to efficiently deliver bulk store orders to three cities in the US, LA, Austin, and Detroit. The final delivery from destination hubs to these stores has a skill constraint, as some products require trucks with liftgates. The goal is to optimize the delivery process and ensure efficient transportation of the products to the stores.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3123,"value":"volumeLtl = FileAttachment(\"volume ltl.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1883,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1982,"value":"## Constraints\nFor the sake of simplicity, we make the following assumptions in this solution. Please note that the Route Optimization API is capable of handling more complex scenarios\n* We only take into account the weight of items, and not their volume. The *Route Optimization API* is [capable of handling multi-dimensional quantities](https://docs.nextbillion.ai/docs/optimization/api/route-optimization-v2).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1994,"value":"Note: this demo has the possibility of generating a large number of Route Optimization transactions against the key being used and should only be used with evaluation/demo API keys.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"viewof API_KEY = 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":1999,"value":"## Parameters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1055,"value":"viewof inputs = {\n return guard(({ template, ...rest }) => {\n return Inputs.form(\n {\n nTrucksAtOriginHub: Inputs.select([5, 10, 15], {\n label: \"Number of trucks (long haul) at Origin hub\",\n value: 10\n }),\n nTrucksAtDestinationHubs: Inputs.select([5, 10, 15], {\n label: \"Number of trucks (short haul) at the Destination hubs (each)\",\n value: 10\n }),\n longHaulTruckCapacity: Inputs.select([10000, 15000, 20000], {\n label: \"Long haul truck capacity\",\n value: 5000\n }),\n shortHaulTruckCapacity: Inputs.select([2000, 3000, 4000, 5000], {\n label: \"Final delivery truck (short haul) capacity\",\n value: 1000\n })\n },\n {\n template\n }\n );\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2006,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2693,"value":"### Manufacturers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2552,"value":"manufacturersTable = MANUFACTURERS.map((manufacturer) => ({\n Id: manufacturer.id,\n Name: manufacturer.name,\n Item: PRODUCTS[manufacturer.item].name,\n City: CITIES[manufacturer.city].name,\n Coordinates: manufacturer.location.join(\", \"),\n \"Postal Code\": `${manufacturer.postalCode}`\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2555,"value":"manufacturersTable","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2040,"value":"### Orders","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2018,"value":"ordersTable = ORDERS.map((order) => ({\n Item: PRODUCTS[order.itemId].name,\n Store: STORES[order.storeId].name,\n Quantity: order.quantity,\n Manufacturer: MANUFACTURERS.find((m) => m.item === order.itemId).name,\n \"Order City\": CITIES[order.city].name\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2303,"value":"ordersTable","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":621,"value":"### Origin Companies to Origin Hub","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":768,"value":"companiesToOriginHubDirections = Promise.all(\n MANUFACTURERS.map((manufacturer) =>\n getDirection(manufacturer.location, ORIGIN_HUB.location)\n )\n)","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3096,"value":"

\n ${MANUFACTURERS.map((manufacturer, idx) => {\n const box = `

`;\n const route = companiesToOriginHubDirections[idx][0];\n const { distance, duration } = route;\n return html`\n

\n ${manufacturer.name}\n \n

distance: ${_.round(\n distance / 1000,\n 1\n )} Km

duration: ${_.round(\n duration / 3600,\n 1\n )} Hours

\n `;\n })}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":891,"value":"{\n const container = html`\n

\n `;\n yield container;\n\n const nbmap = new nextbillion.maps.Map({\n container: document.getElementById(\"map-2\"),\n center: {\n lat: CITIES.columbus.centroid[1],\n lng: CITIES.columbus.centroid[0]\n },\n zoom: 10,\n maxZoom: 15,\n minZoom: 0,\n style: \"https://api.nextbillion.io/maps/streets/style.json\",\n scrollZoom: true\n });\n\n nbmap.on(\"load\", () => {\n drawHub(nbmap.map, ORIGIN_HUB);\n MANUFACTURERS.forEach((manufacturer) =>\n drawManufacturer(nbmap.map, manufacturer)\n );\n companiesToOriginHubDirections.forEach((directions, i) => {\n drawRoute(nbmap.map, `route-${i}`, directions[0], COLORS[i]);\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1028,"value":"### MVRP from the Origin Hub to the Destination Hubs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1361,"value":"TRUCKS_AT_ORIGIN_HUB = {\n const trucks = [];\n\n for (let i = 0; i < inputs.nTrucksAtOriginHub; i++) {\n trucks.push({\n id: i,\n name: LONG_HAUL_TRUCKS[i],\n vin: faker.vehicle.vin(),\n capacity: inputs.longHaulTruckCapacity\n });\n }\n\n return trucks;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1034,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1402,"value":"mvrpLongHaul = {\n const result = await MVRP(mvrpInputs);\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1485,"value":"longHaulRoutes = mvrpLongHaul.result.routes","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2055,"value":"### Long Haul Trucks Info","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2640,"value":"longHaulTrucksTable = longHaulRoutes.map((route) => {\n const orders = route.steps\n .filter((s) => s.type === \"job\")\n .map((s) => ORDERS[s.id]);\n let itemsCount = { fridge: 0, ac: 0, dish_washer: 0, washing_machine: 0 };\n for (let order of orders) {\n itemsCount[order.itemId] += order.quantity;\n }\n\n return {\n vehicle: LONG_HAUL_TRUCKS[route.vehicle],\n duration: _.round(route.duration / 3600, 1),\n distance: _.round(route.distance / 1000, 1),\n \"# Fridges\": itemsCount[\"fridge\"],\n \"# ACs\": itemsCount[\"ac\"],\n \"# Dish Washers\": itemsCount[\"dish_washer\"],\n \"# Washing Machines\": itemsCount[\"washing_machine\"]\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2652,"value":"longHaulTrucksTable","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1492,"value":"viewof selectedLongHaulRoute = Inputs.select(longHaulRoutes, {\n format: (route) => TRUCKS_AT_ORIGIN_HUB[route.vehicle].name\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2537,"value":"{\n const container = html`\n

\n `;\n yield container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1495,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1612,"value":"### Delivering orders from the Destination Hub to Stores","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3142,"value":"shortHaulTrucks = {\n const destinationCities = [\"austin\", \"la\", \"detroit\"];\n let vehicleIdx = 0;\n const randomVehicles = () => {\n let vehicles = [];\n for (let i = 0; i < inputs.nTrucksAtDestinationHubs; i++) {\n vehicles.push({\n description: `Truck ${vehicleIdx}`,\n id: vehicleIdx,\n hasLiftgate: _.random()\n });\n vehicleIdx++;\n }\n return vehicles;\n };\n return Object.fromEntries(\n destinationCities.map((city) => [city, randomVehicles()])\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1640,"value":"$34","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1707,"value":"viewof selectedDestination = Inputs.select(mvrpFromDestinationHubs, {\n format: (r) => CITIES[r.cityCode].name\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3173,"value":"selectedCityTrucksTable = shortHaulTrucks[selectedDestination.cityCode].map(\n (truck) => {\n return {\n Name: truck.description,\n \"Has Lift Gate\": truck.hasLiftgate === 1 ? \"Yes\" : \"No\",\n \"# Orders\":\n selectedDestinationTrucks\n .find((t) => t.vehicle === truck.id)\n ?.steps?.filter((s) => s.type === \"job\")?.length ?? 0\n };\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3181,"value":"selectedCityTrucksTable","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1835,"value":"viewof selectedDestinationTrucks = Inputs.checkbox(\n selectedDestination.result.routes,\n {\n format: (r) => `Truck ${r.vehicle}`,\n value: selectedDestination.result.routes\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2506,"value":"{\n const container = html`\n

\n `;\n yield container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1759,"value":"{\n const center = CITIES[selectedDestination.cityCode].centroid;\n\n const nbmap = new nextbillion.maps.Map({\n container: document.getElementById(\"destination-map\"),\n center: {\n lat: center[1],\n lng: center[0]\n },\n zoom: 10,\n maxZoom: 15,\n minZoom: 0,\n style: \"https://api.nextbillion.io/maps/streets/style.json\",\n scrollZoom: true\n });\n\n nbmap.on(\"load\", () => {\n STORES.filter((store) => store.city === selectedDestination.cityCode).map(\n (store) => drawStore(nbmap.map, store)\n );\n drawHub(\n nbmap.map,\n DESTINATION_HUBS.find((hub) => hub.city === selectedDestination.cityCode)\n );\n selectedDestinationTrucks.forEach((route, i) => {\n drawRoute(nbmap.map, `route-${i}`, route, COLORS[route.vehicle]);\n });\n });\n}","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"# Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":818,"value":"async function getDirection(\n origin,\n destination,\n options = {\n mode: \"truck\",\n option: \"flexible\",\n route_type: \"shortest\",\n truck_size: \"200,210,600\"\n }\n) {\n const baseUrl = \"https://api.nextbillion.io/directions/json\";\n const from = `origin=${transformPoint(origin)}`;\n const to = `destination=${transformPoint(destination)}`;\n const mode = `mode=${options.mode}`;\n const option = `option=${options.option}`;\n const truck_size = `truck_size=${option.truck_size}`;\n const routeType = `route_type=${options.route_type}`;\n const url = `${baseUrl}?${from}&${to}&${mode}&${routeType}&${option}&key=${API_KEY}`;\n const result = await fetch(url);\n return result.json().then((r) => r.routes);\n}","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"$35","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"function transformPoint(p) {\n return [p[1], p[0]].join(\",\");\n}","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"$36","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"function drawHub(map, hub) {\n const hubLocation = { lat: hub.location[1], lng: hub.location[0] };\n const element = document.createElement(\"div\");\n element.innerHTML = `

🏢

Hub: ${hub.name}

`;\n element.style.fontSize = \"15px\";\n element.style.color = \"black\";\n element.style.fontWeight = \"600\";\n new nextbillion.maps.Marker({ element }).setLngLat(hubLocation).addTo(map);\n}","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1538,"value":"function drawStepIdx(map, location, stepIdx) {\n const stepIdxLocation = { lat: location[1], lng: location[0] };\n const element = document.createElement(\"div\");\n element.innerText = NUMBER_EMOJIS[stepIdx];\n element.style.fontSize = \"15px\";\n new nextbillion.maps.Marker({ element })\n .setLngLat(stepIdxLocation)\n .addTo(map);\n}","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"function drawManufacturer(map, company) {\n const element = document.createElement(\"div\");\n element.innerHTML = `

🏭

Company: ${company.name}

`;\n element.style.color = \"black\";\n element.style.fontWeight = \"600\";\n element.style.fontSize = \"15px\";\n new nextbillion.maps.Marker({ element })\n .setLngLat({\n lat: company.location[1],\n lng: company.location[0]\n })\n .addTo(map);\n}","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2526,"value":"function drawStore(map, store) {\n const element = document.createElement(\"div\");\n element.innerHTML = `

🏬

Store: ${store.name}

`;\n element.style.color = \"black\";\n element.style.fontWeight = \"600\";\n element.style.fontSize = \"15px\";\n new nextbillion.maps.Marker({ element })\n .setLngLat({\n lat: store.location[1],\n lng: store.location[0]\n })\n .addTo(map);\n}","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"function* createMap(id, center, zoom = 10, onLoad) {\n const container = html`\n

\n `;\n yield container;\n\n const nbmap = new nextbillion.maps.Map({\n container: document.getElementById(id),\n center: {\n lat: center[1],\n lng: center[0]\n },\n zoom,\n maxZoom: 15,\n minZoom: 0,\n style: \"https://api.nextbillion.io/maps/streets/style.json\",\n scrollZoom: true\n });\n\n nbmap.on(\"load\", () => {\n onLoad(nbmap);\n });\n}","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"### Constants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2173,"value":"ORIGIN_HUB = {\n return {\n name: \"Columbus Shipping Corp\",\n city: \"columbus\",\n location: [-82.99876, 39.9869],\n postalCode: \"43201-2816\"\n };\n}","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2262,"value":"PRODUCTS = {\n return {\n ac: {\n name: \"AC\",\n weight: 300,\n skills: []\n },\n fridge: {\n name: \"Frige\",\n weight: 1000,\n skills: [0]\n },\n dish_washer: {\n name: \"Dish Washer\",\n weight: 500,\n skills: []\n },\n washing_machine: {\n name: \"Washing Machine\",\n weight: 800,\n skills: [0]\n }\n };\n}","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2145,"value":"MANUFACTURERS = {\n return [\n {\n name: \"Best AC Company\",\n item: \"ac\",\n city: \"columbus\",\n location: [-82.92288, 40.09587],\n postalCode: \"43081\",\n id: 0\n },\n {\n name: \"Cool Fridges\",\n item: \"fridge\",\n city: \"columbus\",\n location: [-82.84959, 39.89277],\n postalCode: \"43110\",\n id: 1\n },\n {\n name: \"Dishy Dish Washers Corp\",\n item: \"dish_washer\",\n city: \"columbus\",\n location: [-83.1163, 39.90666],\n postalCode: \"43123\",\n id: 2\n },\n {\n name: \"Wishing Machines\",\n item: \"washing_machine\",\n city: \"columbus\",\n location: [-83.34013, 40.1381],\n postalCode: \"43064\",\n id: 3\n }\n ];\n}","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2177,"value":"DESTINATION_HUBS = {\n return [\n {\n name: \"Austin Hub\",\n city: \"austin\",\n location: [-97.73751, 30.32101],\n postalCode: \"78756-2625\"\n },\n {\n name: \"Los Angeles Hub\",\n city: \"la\",\n location: [-118.24741, 34.04014],\n postalCode: \"90014-2417\"\n },\n {\n name: \"Detroit Hub\",\n city: \"detroit\",\n location: [-83.07939, 42.38504],\n postalCode: \"48202\"\n }\n ];\n}","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2224,"value":"ORDERS = STORES.flatMap((store) => {\n const orders = [];\n for (const manufacturer of MANUFACTURERS) {\n if (_.random()) {\n orders.push({\n storeId: store.id,\n itemId: manufacturer.item,\n quantity: _.random(50, 80),\n city: store.city\n });\n }\n }\n return orders;\n})","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2136,"value":"$37","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1380,"value":"LONG_HAUL_TRUCKS = [\n \"T680\",\n \"579\",\n \"Cascadia\",\n \"VNL\",\n \"LT\",\n \"Anthem\",\n \"5700XE\",\n \"T880\",\n \"389\",\n \"Coronado\",\n \"VNR\",\n \"LoneStar\",\n \"Pinnacle\",\n \"4900\",\n \"W990\"\n]","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2608,"value":"NUMBER_EMOJIS[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2606,"value":"NUMBER_EMOJIS = [\"1️⃣\", \"2️⃣\", \"3️⃣\", \"4️⃣\", \"5️⃣\", \"6️⃣\", \"7️⃣\", \"8️⃣\", \"9️⃣\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1524,"value":"USA_CENTROID = [-99.0909, 39.8355]","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"CITIES = {\n return {\n columbus: {\n name: \"Columbus\",\n state: \"Ohio\",\n centroid: [-83.001647, 39.963483]\n },\n austin: {\n name: \"Austin\",\n state: \"Texas\",\n centroid: [-97.7431, 30.2672]\n },\n la: {\n name: \"Los Angeles\",\n state: \"California\",\n centroid: [-118.243683, 34.052235]\n },\n detroit: {\n name: \"Detroit\",\n state: \"Michigan\",\n centroid: [-83.045753, 42.331429]\n }\n };\n}","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1829,"value":"COLORS = [\n \"#FF6633\",\n \"#FF33FF\",\n \"#00B3E6\",\n \"#E6B333\",\n \"#3366E6\",\n \"#B34D4D\",\n \"#E666FF\",\n \"#4DB3FF\",\n \"#CC80CC\",\n \"#809900\" \n]","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":629,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":469,"value":"nextbillion.setApiKey(API_KEY)","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"faker = require(\"https://unpkg.com/faker@5.3.1/dist/faker.min.js\")","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"value":"axios = {\n let axios = await require(\"axios\");\n return axios;\n}","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"import {\n guard,\n colors,\n renderPolygon,\n d3Delaunay,\n findExtremeCoordinates\n} from \"@texoslab/nbai-helpers\"","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {\n nextbillion,\n secret2,\n styles,\n routeStyles\n} from \"@nbai/nextbillion-ai-dependencies\"","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2468,"value":"d3 = require(\"d3-selection\")","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"html`Add the stylesheet for the NB.ai SDK
<link href=\"https://maps-gl.nextbillion.io/maps/v2/api/css\" rel=\"stylesheet\">`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2584,"value":"","pinned":false,"hidden":true,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2829,"value":"geoviewer = require(\"https://d12qcqjlhp2ahm.cloudfront.net/index_alltrans.min.js\").then(\n (f) => f.view\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2870,"value":"milestones = require(\"d3-milestones\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 30:"$2f:body"