2b:null 2c:["$","title",null,{"children":"Nearest Entry Point to Route | NB.AI Solutions Team | 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:Tf4f,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] } }; console.log("Origin :", originMarker); 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 ); console.log("ClosestPoint:", closestPoint); //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:T635,function findPointIndexInLineStringWithThreshold( lineString, pointFeature, threshold = 0.001 ) { const lineCoords = lineString.features[0].geometry.coordinates; const pointCoords = pointFeature.geometry.coordinates; // Define a helper function to compare coordinates within a threshold const isCloseEnough = (coord1, coord2) => { return ( Math.abs(coord1[0] - coord2[0]) <= threshold && Math.abs(coord1[1] - coord2[1]) <= threshold ); }; // Find the index of the point in the line string coordinates array within the threshold const index = lineCoords.findIndex((coord) => isCloseEnough(coord, pointCoords) ); console.log("Index :", index); // If index is less than 1, rerun the function with a larger threshold if (index < 1) { // Adjust the threshold const newThreshold = 0.01; console.log("Threshold adjusted to:", newThreshold); const lineCoords = lineString.features[0].geometry.coordinates; const pointCoords = pointFeature.geometry.coordinates; // Define a helper function to compare coordinates within a threshold const isCloseEnough = (coord1, coord2) => { return ( Math.abs(coord1[0] - coord2[0]) <= newThreshold && Math.abs(coord1[1] - coord2[1]) <= newThreshold ); }; // Find the index of the point in the line string coordinates array within the threshold const index = lineCoords.findIndex((coord) => isCloseEnough(coord, pointCoords) ); return index; } else { return index; // Returns the index or -1 if no close match is found } }34: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 } }); }35:T8c6,html``36:[] 2f:{"id":"ca905fa96a988850","slug":null,"title":"Nearest Entry Point to Route","thumbnail":"b9a2f9c7b751b9385a1b41dea377a3ea9aaaad867cbe804b99f6407e368e4172","access_level":"public","create_time":"$D2024-04-25T05:06:25.720Z","update_time":"$D2024-04-25T08:55:09.172Z","view_time":null,"first_public_time":"$D2024-04-25T07:11:50.674Z","has_unpublished_edits":null,"fork":{"id":"53bc04981902b479","slug":null,"title":"Nearest Entry Point to Route","owner":{"id":"b883664f1ea72857","login":"fuelstation","name":"Abin's notebook"}},"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":1009,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"53e0d2bd94fa8912","login":"dhivya-s","name":"Dhivya Selvarajan","avatar_url":"https://avatars-next.observableusercontent.com/c2ddc5b79da0e63c190a3f3ac91670f23f26b4bc0b1be30699fe67082ccb4f0b","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":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"5e6955c88320d791","slug":"websdk-examples","title":"Platform - API and SDK Examples","owner":{"id":"05baed136f9134c1","login":"nbai","name":"NB.AI Solutions Team"}},"type":"notebook","body":{"title":"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"$33","pinned":true,"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":"$34","pinned":true,"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":"$35","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":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"