0
160
Viewsadding instruction points to a route line using leaflet.js
i use leaflet.js to show a route in my web project. I have mastered everything successfully, except that I cannot display instruction points on the route.
i used the following code to show the Route on the map:
api.getRoute(routingLink).then(res =>{
const routeLayer = L.geoJSON(res.data.features,{}).addTo(layerGroup) //shows route on the map
})
my question is how can i add instruction points to the route that shows the instruction in popup on clicking it.
here a screenshot from the route that shows the route between to places but not the instructions:
·
Juan Pablo Isaza
1 answers
Answer question0
I was able to solve the problem myself. I'll just leave the question online if it's interesting to someone other. and although solved as follows:
api.getRoute(routingLink).then(res =>{
var geojsonMarkerOptions = {//Options for circleMarker
radius: 8,
fillColor: "#ffffff",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
}
const routeLayer = L.geoJSON(res.data.features,{
onEachFeature(feature,layer){//the data from each feature in my situation it was a single feature, i used a route between only two places.
const featureCoords = feature.geometry.coordinates[0]
for(let step of feature.properties.legs[0].steps){//iterate throw all Steps
if(step.instruction){//if the step has instruction attribute, add a circleMarker
let instructionPoint = L.circleMarker([featureCoords[step.from_index][1],featureCoords[step.from_index][0]], geojsonMarkerOptions).addTo(layerGroup)
instructionPoint.addEventListener("click",e =>{// add eventListener that show a popup with the instraction.
L.popup().setLatLng([featureCoords[step.from_index][1],featureCoords[step.from_index][0]]).setContent(step.instruction.text).addTo(layerGroup)
})
}
}
},
}).addTo(layerGroup) //add the route to the layerGroup
Note: Iam using the api provided from https://apidocs.geoapify.com/playground/routing.
a screenshoot shows the route after the circleMarker with instructions added onto it
·
Juan Pablo Isaza
Report
Answer question