2b:null 2c:["$","title",null,{"children":"Nearest Entry Point to Route | Abin's notebook | Observable"}] 31:T1282,directionsMap = { apiKey; const container = html`

`; yield container; let routePolyline = null; let originMarker = null; let destinationMarker = null; let waypoints = []; let pos = { lat: "23.7779052", lng: "66.9998737" }; const markesrs = [ { "code": "101935", "lat": 19.056195, "lng": 73.106353 }, { "code": "150815", "lat": 18.71411801, "lng": 73.64472359 }, { "code": "100144", "lat": 18.532671, "lng": 73.842569 }, { "code": "166211", "lat": 18.506623, "lng": 73.911355 }, { "code": "140995", "lat": 18.497236, "lng": 73.967402 }, { "code": "145670", "lat": 18.48915, "lng": 74.023323 }, { "code": "100124", "lat": 18.488943, "lng": 74.035853 }, { "code": "100110", "lat": 18.488631, "lng": 74.085941 }, { "code": "161293", "lat": 18.487716, "lng": 74.144234 }, { "code": "100160", "lat": 18.460294, "lng": 74.3476 }, { "code": "187824", "lat": 18.445819, "lng": 74.419677 }, { "code": "140498", "lat": 18.182941, "lng": 74.941808 }, { "code": "155314", "lat": 17.915197, "lng": 75.404035 }, { "code": "176279", "lat": 17.872086, "lng": 75.48856 }, { "code": "179958", "lat": 17.842215, "lng": 75.56575 }, { "code": "169859", "lat": 17.772456, "lng": 75.740138 }, { "code": "136140", "lat": 17.747583, "lng": 75.794447 }, { "code": "180782", "lat": 17.747767, "lng": 75.794641 }, { "code": "181784", "lat": 17.698146, "lng": 75.973882 }, { "code": "183692", "lat": 17.856833, "lng": 76.450617 }, { "code": "142175", "lat": 17.821949, "lng": 76.937029 }, { "code": "190498", "lat": 17.7047585, "lng": 77.1370115 }, { "code": "184927", "lat": 17.966292, "lng": 78.472288 }, { "code": "123307", "lat": 17.649019, "lng": 77.80631 }, { "code": "160463", "lat": 17.64262, "lng": 77.84977 }, { "code": "126643", "lat": 17.587985, "lng": 78.084587 }, { "code": "193740", "lat": 17.583536, "lng": 78.105858 }, { "code": "149357", "lat": 17.541503, "lng": 78.23132 }, { "code": "179486", "lat": 17.408892, "lng": 78.400162 } ] const mapDir = (container.value = new nextbillion.maps.Map({ container: document.getElementById("mapDir"), center: pos, zoom: 3, maxZoom: 21, // minZoom: 5, style: "https://api.nextbillion.io/maps/streets/style.json", scrollZoom: true })); loadMapActions(mapDir); if (!originMarker){ markesrs.map((marker)=>{ originMarker =new nextbillion.maps.Marker({ color: "red", draggable: true, clickable: true, scale: 0.8 }) .setLngLat({ lat: marker.lat, lng: marker.lng }) .addTo(mapDir.map); originMarker.code = marker.code; nearestEntryPoint(mapDir, originMarker); // om.on("dragged", (e) => { // console.log("Hello12") // nearestEntryPoint(mapDir, om); // }) }); } // click on map actions - create a marker at click location // calculate nearest entry point to the route // if marker is moved, recalculate // mapDir.map.on("click", (e) => { // if (!originMarker) { // // originMarker = new nextbillion.maps.Marker({ // // color: "red", // // draggable: true, // // scale: 0.8 // // }) // // .setLngLat({ // // lat: e.lngLat.lat, // // lng: e.lngLat.lng // // }) // // .addTo(mapDir.map); // markesrs.map((marker)=>{ // const om=new nextbillion.maps.Marker({ // color: "red", // draggable: false, // scale: 0.8 // }) // .setLngLat({ // lat: marker.lat, // lng: marker.lng // }) // .addTo(mapDir.map); // om.on("dragged", (e) => { // originMarker = om // nearestEntryPoint(mapDir, originMarker); // }) // }); // } // }); } 32:Tefa,async function nearestEntryPoint(mapDir, originMarker) { let routeLine = { type: "FeatureCollection", features: [ { type: "Feature", properties: {}, geometry: { coordinates: nextbillion.utils.polyline .decode(mutable globalRoute.geometry, 6) .map((c) => c.reverse()), type: "LineString" } } ] }; const pointFeature = { type: "Feature", properties: {}, geometry: { type: "Point", coordinates: [originMarker.getLngLat().lng, originMarker.getLngLat().lat] } }; const closestPoint = turf.nearestPointOnLine(routeLine, pointFeature); // Use the closest point by haversine distance to slice the polyline points // find point index in linestring const index = findPointIndexInLineStringWithThreshold( routeLine, closestPoint, 0.001 ); //build a DM 1 x (max200) from the nearest point const maxPoints = routeLine.features[0].geometry.coordinates.length; const startPoint = index - 100 < 0 ? 0 : index - 100; const nbrPoints = maxPoints < 200 ? maxPoints : 200; const coordsOfInterest = routeLine.features[0].geometry.coordinates.slice( startPoint, startPoint + nbrPoints ); // route to the closest result returned in the DM let destString = coordsOfInterest .map((coord) => `${coord[1]},${coord[0]}`) .join("|"); let origString = `${originMarker.getLngLat().lat},${ originMarker.getLngLat().lng }`; const dmResponse = await requestDistanceMatrix(origString, destString); let nearestIndex = -1; let nearestValue = Number.MAX_SAFE_INTEGER; dmResponse.rows[0].forEach((el, idx) => { if (el[0] < nearestValue) { nearestValue = el[0]; nearestIndex = idx; } }); // Now we do a directions service request and render the polyline to nearest entry point const directionsService = new nextbillion.maps.DirectionsService(); let resp = null; resp = await directionsService.route({ destination: { lat: coordsOfInterest[nearestIndex][1], lng: coordsOfInterest[nearestIndex][0] }, origin: { lat: originMarker.getLngLat().lat, lng: originMarker.getLngLat().lng } }); const popupOffsets = { top: [0, 0], "top-left": [0, 0] }; const popupIdx = ( nextbillion.utils.polyline.decode(resp.routes[0], 6).length / 2 ).toFixed(0); // pops.forEach((popup) => popup.remove()); let popup = new nextbillion.maps.Popup({ offset: 25 }) .setLngLat({ lat: nextbillion.utils.polyline.decode(resp.routes[0].geometry, 6)[ popupIdx ][0], lng: nextbillion.utils.polyline.decode(resp.routes[0].geometry, 6)[ popupIdx ][1] }) .setHTML( `${(resp.routes[0].distance / 1000).toFixed(1)}km
${( resp.routes[0].duration / 60 ).toFixed(1)}min
${(originMarker.code)}` ) .addTo(mapDir.map); mutable pops.push(popup); 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 (!mapDir.map.getSource("route-entry")) { mapDir.map.addSource("route-entry", { type: "geojson", data: null }); } mapDir.map.getSource("route-entry").setData(geojson); if (mapDir.map.getLayer("route-entry")) { mapDir.map.removeLayer("route-entry"); } mapDir.map.addLayer({ id: "route-entry", type: "line", source: "route-entry", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": "#FF00EE", "line-width": 6 } }); }33:T506,async function routeMe(mapDir) { const directionsService = new nextbillion.maps.DirectionsService(); let wayPts = []; let resp = null; resp = await directionsService.route({ mode : "truck", origin: { lat: 19.073423255244595, lng: 72.7899111533693 }, destination: { lat: 17.390379267243, lng: 78.52279820492424 } }); // We'll need the route geometry later when determining nearest entry point mutable globalRoute = resp.routes[0]; 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 (!mapDir.map.getSource("route")) { mapDir.map.addSource("route", { type: "geojson", data: null }); } mapDir.map.getSource("route").setData(geojson); if (mapDir.map.getLayer("route")) { mapDir.map.removeLayer("route"); } mapDir.map.addLayer({ id: "route", type: "line", source: "route", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": "#8D5A9E", "line-width": 6 } }); }34:T8c6,html``35:[{"id":"39fadcc101b16841f0e9df12da0deb7417f2f11fc55ade4a55daae925d20ccbda3d7a942e5490bc9cc18a8383d938cdd029ebefab36a742b3f41c8a63c032f10","href":"https://static.observableusercontent.com/files/39fadcc101b16841f0e9df12da0deb7417f2f11fc55ade4a55daae925d20ccbda3d7a942e5490bc9cc18a8383d938cdd029ebefab36a742b3f41c8a63c032f10","name":"latlong_all.json","type":"application/json","lastModified":1712824745812.001,"size":1152286}] 2f:{"id":"53bc04981902b479","slug":null,"title":"Nearest Entry Point to Route","thumbnail":"5e45b60946ebf4a07bddfde55ab1640048c34ebb408eb152bd714300f2d96757","access_level":"public","create_time":"$D2024-03-24T08:57:24.996Z","update_time":"$D2024-04-11T10:11:14.024Z","view_time":null,"first_public_time":"$D2024-03-24T08:57:24.996Z","has_unpublished_edits":null,"fork":{"id":"16b5eff1a4cba1b8","slug":"nearest-entry-point-to-route","title":"Nearest Entry Point to Route","owner":{"id":"05baed136f9134c1","login":"nbai","name":"NB.AI Solutions Team"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b883664f1ea72857","login":"fuelstation","name":"Abin's notebook","avatar_url":"https://avatars-next.observableusercontent.com/c5472a8e683cc3e0962d98409c333bce279cf44604987f32c5fca0a0cec07387","tier":"starter_2024"},"version":982,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ae9cea82753ffa71","login":"abin-jilson","name":"Abin Jilson","avatar_url":"https://avatars-next.observableusercontent.com/56d9863eace29747a26302ab7be690c07dfcd15029af079cad215d9f8fa86f65","tier":null}],"members":[{"type":"individual","id":"ae9cea82753ffa71","login":"abin-jilson","name":"Abin Jilson","avatar_url":"https://avatars-next.observableusercontent.com/56d9863eace29747a26302ab7be690c07dfcd15029af079cad215d9f8fa86f65","tier":null,"role":"editor"},{"type":"team","id":"b883664f1ea72857","login":"fuelstation","name":"Abin's notebook","avatar_url":"https://avatars-next.observableusercontent.com/c5472a8e683cc3e0962d98409c333bce279cf44604987f32c5fca0a0cec07387","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Nearest Entry Point to Route","cells":[{"id":154,"value":"![text](https://d12qcqjlhp2ahm.cloudfront.net/maps-logo.svg)\n# Nearest Entry Point to Route","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"nextbillion = {\n let nextbillion = await require(\"@nbai/nbmap-gl@2.6.0\");\n return nextbillion;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"---\nInitialize the NB.ai SDK with your API key. You only need to do this once.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"viewof apiKey = secret2(\"apiKey\", {\n title: \"NextBillion.ai API Key\",\n submit: \"Set\",\n description:\n \"Contact support@nextbillion.ai to get your API key\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"function findPointIndexInLineStringWithThreshold(lineString, pointFeature, threshold = 0.0001) {\n const lineCoords = lineString.features[0].geometry.coordinates;\n const pointCoords = pointFeature.geometry.coordinates;\n\n // Define a helper function to compare coordinates within a threshold\n const isCloseEnough = (coord1, coord2) => {\n return Math.abs(coord1[0] - coord2[0]) <= threshold && Math.abs(coord1[1] - coord2[1]) <= threshold;\n };\n\n // Find the index of the point in the line string coordinates array within the threshold\n const index = lineCoords.findIndex(coord => isCloseEnough(coord, pointCoords));\n\n return index; // Returns the index or -1 if no close match is found\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"mutable globalRoute = undefined","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"mutable pops = [];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"async function loadMapActions(nbmap) {\n nbmap.map.on(\"load\", function () {\n routeMe(nbmap);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"async function requestDistanceMatrix(origString, destString) {\n let origs = origString.split(\"|\").map((e) => {\n return { lat: e.split(\",\")[0], lng: e.split(\",\")[1] };\n });\n let dests = destString.split(\"|\").map((e) => {\n return { lat: e.split(\",\")[0], lng: e.split(\",\")[1] };\n });\n\n const dmBody = {\n origins: origString,\n destinations: destString\n };\n\n let resp = await fetch(\n `https://api.nextbillion.io/distancematrix/json-concise?key=${apiKey}`,\n {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(dmBody)\n }\n ).then((response) => {\n return response.json();\n });\n\n return resp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"{\n nextbillion.setApiKey(apiKey);\n return html`Set API key
nextbillion.setApiKey(${apiKey.substr(\n 0,\n 4\n )}....)`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"html`Add the stylesheet for the NB.ai SDK
<link href=\"https://maps-gl.nextbillion.io/maps/v2/api/css\" rel=\"stylesheet\">`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"import { secret2 } from \"@nbai/nextbillion-ai-dependencies\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"turf = require(\"https://unpkg.com/@turf/turf@6/turf.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"