0
131
ViewsHow to click a point and save its coordinates in Leaflet?
I have a couple of points visualized in a leaflet map as you can see in the figure:
I would like to add a function that selects as many of these points I want and save their geometry. I have done something similar to show the provider and the battery attributes of the selected markers:
function onEachFeature ( feature , layer )
{
var popupContent = "Provider: " + feature.properties.provider + '</b><br/>' + "Battery level: " + feature.properties.battery;
layer.bindPopup(popupContent);
}
I would like some guidelines on how to create a click event when I click on the markers and how I can save the geometry (maybe to an array).
I know the question is kinda general but I would really appreciate any help since its my first project using html,javascript and css.
Thank you in advance!
1 answers
Answer question0
Add a click listener to the marker. In the click listener you can use the unique leaflet id of the marker to add and remove them from the list:
var selectedData = {};
function onEachFeature ( feature , layer )
{
var popupContent = "Provider: " + feature.properties.provider + '</b><br/>' + "Battery level: " + feature.properties.battery;
layer.bindPopup(popupContent);
layer.on('click',(e)=>{
var marker = e.target;
if(selectedData[marker._leaflet_id]){
delete selectedData[marker._leaflet_id];
} else {
selectedData[marker._leaflet_id] = marker;
}
})
}
To get all markers in the list use:
for(var id in selectedData){
var marker = selectedData[id];
console.log(marker.getLatLng())
console.log(marker.toGeoJSON())
}