2d:null 2e:["$","title",null,{"children":"LTL Shipping | NB.AI Solutions Team | Observable"}] 33:T5cf,## 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 * For all of the destination cities, we arbitrarily create 4 electronics stores each, and each store orders **between ${ordersPerStore.LOWER_LIMIT} and ${ordersPerStore.UPPER_LIMIT} 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. 20% of these short haul trucks do not have a lift gate, and all orders that are either fridges or washing machines require one, and we specify that in the route optimization requests.34:T488,viewof selectedManufacturers = { // Function to style each row, with alternating background colors const applyRowStyle = (row, column) => { const isOddRow = row % 2; // Determine if row is odd or even const baseStyle = ` font-family: 'Montserrat', sans-serif; font-size: 12pt; padding: 5px; `; const backgroundColor = isOddRow ? "#f9f4f4" : "#d3cbcb"; // Alternate background color return html`

${column}

`; }; // Use Inputs.table to display the table with the applied styles return Inputs.table(manufacturersTable, { columns: ["Id", "Name", "Item", "City", "Postal Code"], header: { Id: "Nbr", Name: "Name", Item: "Item" }, format: { Id: (value, row) => applyRowStyle(row, value), Name: (value, row) => applyRowStyle(row, value), Item: (value, row) => applyRowStyle(row, value), City: (value, row) => applyRowStyle(row, value), "Postal Code": (value, row) => applyRowStyle(row, value) }, width: { Id: 50, Name: 250, Item: 300 }, required: false, rows: 20 }); }35:T5bc,viewof selectedOrders = { // Function to style each row, with alternating background colors const applyRowStyle = (row, column) => { const isOddRow = row % 2; // Determine if row is odd or even const baseStyle = ` font-family: 'Montserrat', sans-serif; font-size: 12pt; padding: 5px; `; const backgroundColor = isOddRow ? "#f9f4f4" : "#d3cbcb"; // Alternate background color return html`

${column}

`; }; // Use Inputs.table to display the table with the applied styles return Inputs.table(ordersTable, { columns: [ "Store", "City", "ac", "fridge", "dish_washer", "washing_machine" ], header: { Store: "Store", City: "City", ac: "AC", fridge: "Fridge", dish_washer: "Dishwasher", washing_machine: "Washing Machine" }, format: { Store: (value, row) => applyRowStyle(row, value), City: (value, row) => applyRowStyle(row, value), ac: (value, row) => applyRowStyle(row, value), fridge: (value, row) => applyRowStyle(row, value), dish_washer: (value, row) => applyRowStyle(row, value), washing_machine: (value, row) => applyRowStyle(row, value) }, width: { Store: 200, City: 100, ac: 50, fridge: 50, dish_washer: 50, washing_machine: 50 }, required: false, rows: 20 }); }36:T431,{ const container = html`

`; yield container; const nbmap = new nextbillion.maps.Map({ container: document.getElementById("map-2"), center: { lat: CITIES.columbus.centroid[1], lng: CITIES.columbus.centroid[0] }, zoom: 10, maxZoom: 15, minZoom: 0, style: "https://api.nextbillion.io/tt/style/1/style/22.2.1-9?map=2/basic_street-dark", scrollZoom: true }); const cont = nbmap.map?.getContainer(); if (!cont) return; const attributionElements = cont.querySelectorAll(".maplibregl-ctrl-attrib"); attributionElements.forEach((element) => { if (element && element.parentNode) { element.parentNode.removeChild(element); } }); nbmap.on("load", () => { drawHub(nbmap.map, ORIGIN_HUB); MANUFACTURERS.forEach((manufacturer) => drawManufacturer(nbmap.map, manufacturer) ); companiesToOriginHubDirections.forEach((directions, i) => { drawRoute(nbmap.map, `route-${i}`, directions[0], COLORS[i]); }); }); }37:T446,mvrpInputs = { const locations = []; const pickupLocationIndex = 0; locations.push(transformPoint(ORIGIN_HUB.location)); let locationIndex = 1; const jobs = []; const shipments = []; 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: 20 }); } return { depots: [{ id: 0, location_index: 0 }], locations: { id: 1, location: locations }, jobs, // shipments, vehicles }; }38:T738,viewof longHaulTrucks = { // Function to style each row, with alternating background colors const applyRowStyle = (row, column) => { const isOddRow = row % 2; // Determine if row is odd or even const baseStyle = ` font-family: 'Montserrat', sans-serif; font-size: 12pt; padding: 5px; `; const backgroundColor = isOddRow ? "#f9f4f4" : "#d3cbcb"; // Alternate background color return html`

${column}

`; }; // Use Inputs.table to display the table with the applied styles return Inputs.table(longHaulTrucksTable, { columns: [ "vehicle", "Destination City", "duration", "distance", "# Fridges", "# ACs", "# Dish Washers", "# Washing Machines" ], header: { vehicle: "Truck", "Destination City": "Dest. City", duration: "Duration", "# Fridges": "Refrigerators", "# ACs": "ACs", "# Dish Washers": "Dishwashers", "# Washing Machines": "Washing Machines" }, format: { vehicle: (value, row) => applyRowStyle(row, value), "Destination City": (value, row) => applyRowStyle(row, value), distance: (value, row) => applyRowStyle(row, value), duration: (value, row) => applyRowStyle(row, value), "# Fridges": (value, row) => applyRowStyle(row, value), "# ACs": (value, row) => applyRowStyle(row, value), "# Dish Washers": (value, row) => applyRowStyle(row, value), "# Washing Machines": (value, row) => applyRowStyle(row, value) }, width: { vehicle: 200, "Destination City": 100, distance: 50, duration: 50, "# Fridges": 50, "# ACs": 50, "# Dish Washers": 50, "# Washing Machines": 50 }, required: false, rows: 20 }); }39:T583,{ 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/tt/style/1/style/20.3.2-3?map=basic_night", scrollZoom: true }); const cont = nbmap.map?.getContainer(); if (!cont) return; const attributionElements = cont.querySelectorAll(".maplibregl-ctrl-attrib"); attributionElements.forEach((element) => { if (element && element.parentNode) { element.parentNode.removeChild(element); } }); 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); }); }); }3a:T579,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.2 ? [] : [0], start_index: hubLocationIndex, capacity: [inputs.shortHaulTruckCapacity], end_index: hubLocationIndex, description: vehicle.description }); } const result = await MVRP({ locations: { id: 1, location: locations }, jobs, vehicles }); return { cityCode, ...result }; } return Promise.all( _.map( DESTINATION_HUBS.map((hub) => hub.city), performMVRP ) ); }3b:T463,viewof selectedCityTrucks = { // Function to style each row, with alternating background colors const applyRowStyle = (row, column) => { const isOddRow = row % 2; // Determine if row is odd or even const baseStyle = ` font-family: 'Montserrat', sans-serif; font-size: 12pt; padding: 5px; `; const backgroundColor = isOddRow ? "#f9f4f4" : "#d3cbcb"; // Alternate background color return html`

${column}

`; }; // Use Inputs.table to display the table with the applied styles return Inputs.table(selectedCityTrucksTable, { columns: ["Name", "Has Lift Gate", "# Orders"], header: { Name: "Truck", "Has Lift Gate": "Lift Gate?", "# Orders": "Orders" }, format: { Name: (value, row) => applyRowStyle(row, value), "Has Lift Gate": (value, row) => applyRowStyle(row, value), "# Orders": (value, row) => applyRowStyle(row, value) }, width: { Name: 100, "Has Lift Gate": 25, "# Orders": 25 }, required: false, rows: 20 }); }3c:T46c,{ const center = CITIES[selectedDestination.cityCode].centroid; const nbmap = new nextbillion.maps.Map({ container: document.getElementById("destination-map"), center: { lat: center[1], lng: center[0] }, zoom: 10, maxZoom: 15, minZoom: 0, style: "https://api.nextbillion.io/maps/streets/style.json", scrollZoom: true }); const cont = nbmap.map?.getContainer(); if (!cont) return; const attributionElements = cont.querySelectorAll(".maplibregl-ctrl-attrib"); attributionElements.forEach((element) => { if (element && element.parentNode) { element.parentNode.removeChild(element); } }); nbmap.on("load", () => { STORES.filter((store) => store.city === selectedDestination.cityCode).map( (store) => drawStore(nbmap.map, store) ); drawHub( nbmap.map, DESTINATION_HUBS.find((hub) => hub.city === selectedDestination.cityCode) ); selectedDestinationTrucks.forEach((route, i) => { drawRoute( nbmap.map, `route-${i}`, route, COLORS[route.vehicle % COLORS.length] ); }); }); }3d:T44a,async function MVRP(data) { const optimizeRequestUrl = `https://api.nextbillion.io/optimization/v2?` + `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)); } }3e: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 } ]; }3f:[{"id":"5cf79f67236c7bd038b2beb877d1597b9375d37565868804eebd07d2db7048d645c73a92e1636acb4996f43109ce7f8ffcb904bdd2e6f2226c7cb85afa426b04","href":"https://static.observableusercontent.com/files/5cf79f67236c7bd038b2beb877d1597b9375d37565868804eebd07d2db7048d645c73a92e1636acb4996f43109ce7f8ffcb904bdd2e6f2226c7cb85afa426b04","name":"volume ltl@1.png","type":"image/png","lastModified":1747834472567.688,"size":1090693},{"id":"8f783c230ec93ee77502eefb6d83e71ca6476054e55202d6e85554d0d30b77c4006884544bc40cfdcf3197cad26dc3d56b16fa363719fb9d994829662adc9b1c","href":"https://static.observableusercontent.com/files/8f783c230ec93ee77502eefb6d83e71ca6476054e55202d6e85554d0d30b77c4006884544bc40cfdcf3197cad26dc3d56b16fa363719fb9d994829662adc9b1c","name":"volume ltl.png","type":"image/png","lastModified":1693595491749.749,"size":1230860}] 31:{"id":"1057395885514ce2","slug":"ltl-shipping","title":"LTL Shipping","thumbnail":"675025974f954f3361ea18d7650f8d606a6d52beda0c4182e7fef64036c8fe8f","access_level":"public","create_time":"$D2023-09-01T19:11:31.749Z","update_time":"$D2026-03-04T14:59:16.190Z","view_time":null,"first_public_time":"$D2023-09-01T19:12:54.887Z","has_unpublished_edits":null,"fork":{"id":"02e0236725f014e5","slug":null,"title":"LTL Shipping: A Developer's Guide to NextBillion.ai APIs","owner":{"id":"787ce1766e2f8353","login":"texoslab","name":"Texoport's Workspace"}},"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":3672,"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":0,"collection":{"id":"73d557bcc8a3ebc8","slug":"solutions","title":"Solutions","owner":{"id":"05baed136f9134c1","login":"nbai","name":"NB.AI Solutions Team"}},"type":"notebook","body":{"title":"LTL Shipping","cells":[{"id":0,"value":"# LTL Shipping","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":"$33","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":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 width: 100\n }),\n nTrucksAtDestinationHubs: Inputs.select([5, 10, 15, 20], {\n label: \"Number of trucks (short haul) at the Destination hubs (each)\",\n value: 10,\n width: 100\n }),\n longHaulTruckCapacity: Inputs.select(\n [10000, 15000, 20000, 30000, 40000],\n {\n label: \"Long haul truck capacity\",\n value: 30000,\n width: 100\n }\n ),\n shortHaulTruckCapacity: Inputs.select(\n [2000, 3000, 4000, 5000, 6000, 7000],\n {\n label: \"Final delivery truck (short haul) capacity\",\n value: 5000,\n width: 100\n }\n )\n },\n { template }\n );\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3297,"value":"ordersPerStore = {\n return {\n LOWER_LIMIT: 50,\n UPPER_LIMIT: 85\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":3616,"value":"Each manufacturer produces exactly one type of item, and item could be a fridge, a washing machine, an AC, or a dishwasher. 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.","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":3589,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2040,"value":"### Orders","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3304,"value":"ordersTable = {\n const ordersPerStore = _.groupBy(ORDERS, \"storeId\");\n return Object.values(ordersPerStore).map((orders) => {\n const result = _.groupBy(orders, \"itemId\");\n const productNames = _.keys(PRODUCTS);\n const productCounts = _.mapValues(\n PRODUCTS,\n (product) => result[product.id]?.length ?? 0\n );\n\n return {\n Store: STORES[orders[0].storeId].name,\n City: CITIES[STORES[orders[0].storeId].city].name,\n ...productCounts\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3596,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"### Manufacturers to Origin Hub","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3606,"value":"companiesToOriginHubDirections = Promise.all(\n MANUFACTURERS.map((manufacturer) =>\n getDirection(manufacturer.location, ORIGIN_HUB.location)\n )\n)","pinned":false,"hidden":false,"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":"$36","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":"$37","pinned":false,"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":false,"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":"### Linehaul Trucks Info","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2640,"value":"longHaulTrucksTable = {\n const locationIdsMap = _.fromPairs(\n DESTINATION_HUBS.map((h, idx) => [idx + 1, h.city])\n );\n\n return 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 \"Destination City\":\n CITIES[locationIdsMap[route.steps.at(-1).location_index]].name,\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 });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3611,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1492,"value":"viewof selectedLongHaulRoute = Inputs.select(longHaulRoutes, {\n format: (route) => TRUCKS_AT_ORIGIN_HUB[route.vehicle].name,\n width: 100\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":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1612,"value":"### Final Delivery 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":3632,"value":"$3a","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":3425,"value":"After Route Optimization, ${selectedCityTrucksTable.reduce((acc, c) => acc + c[\"# Orders\"], 0)} out of ${ORDERS.filter((o) => o.city === selectedDestination.cityCode).length} total orders received at the ${CITIES[selectedDestination.cityCode].name} hub were delivered by ${selectedCityTrucksTable.filter(t => t['# Orders']> 0).length} out of ${inputs.nTrucksAtDestinationHubs} trucks","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","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":3639,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3530,"value":"Select any of the trucks below to view their routes","pinned":false,"hidden":false,"mode":"md","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":3655,"value":"$3c","pinned":false,"hidden":false,"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":"function drawRoute(map, source, data, color = \"#7e22ce\", width = 5) {\n const { distance, duration, geometry } = data;\n const parsedGeometry = {\n type: \"LineString\",\n coordinates: nextbillion.utils.polyline\n .decode(geometry, 5)\n .map((c) => c.reverse())\n };\n const popupLngLat =\n parsedGeometry.coordinates[\n Math.floor(parsedGeometry.coordinates.length / 2)\n ];\n if (!map.getSource(source)) {\n map.addSource(source, {\n type: \"geojson\",\n data: {\n type: \"Feature\",\n geometry: {\n type: \"LineString\",\n coordinates: nextbillion.utils.polyline\n .decode(geometry, 5)\n .map((c) => c.reverse())\n }\n }\n });\n\n map.addLayer({\n id: source,\n type: \"line\",\n source,\n layout: { \"line-join\": \"round\", \"line-cap\": \"round\" },\n paint: {\n \"line-color\": color,\n \"line-width\": width\n // \"line-dasharray\": [1, 2]\n }\n });\n }\n}","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":"$3d","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 = \"white\";\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 = \"white\";\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 id: \"ac\",\n name: \"AC\",\n weight: 300,\n skills: []\n },\n fridge: {\n id: \"fridge\",\n name: \"Frige\",\n weight: 1000,\n skills: [0]\n },\n dish_washer: {\n id: \"dish_washer\",\n name: \"Dish Washer\",\n weight: 500,\n skills: []\n },\n washing_machine: {\n id: \"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 const quantity = _.random(\n ordersPerStore.LOWER_LIMIT,\n ordersPerStore.UPPER_LIMIT\n );\n for (let i = 0; i < quantity; i++) {\n orders.push({\n storeId: store.id,\n itemId: manufacturer.item,\n quantity: 1,\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":3244,"value":"lol = STORES.flatMap((store) => {\n const orders = [];\n for (const manufacturer of MANUFACTURERS) {\n if (_.random()) {\n const quantity = _.random(0, 30);\n for (let i = 0; i < quantity; i++) {\n orders.push({\n storeId: store.id,\n itemId: manufacturer.item,\n quantity: 1,\n city: store.city\n });\n }\n }\n }\n return orders;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2136,"value":"$3e","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 = (await import(\"https://esm.run/@faker-js/faker@latest\")).faker","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 nbMap\n} from \"@nbai/nextbillion-ai-dependencies\"","pinned":false,"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"}],"files":"$W3f","stdlib":"1","titling":"auto"}} 32:"$31:body"