LeafletJS – Getting Coordinates of Drawn Polygon

geojsonleafletpolygon

I'm new to LeafletJS. I have read many documents and followed examples. But I didn't have any information on how to solve a problem. I have a map and I use geoman.io tools. I draw a polygon with geoman tools. I want to click the layer and see the polygon's coordinates (GeoJSON formats). In all the examples I examined, the polygon was created in the line of code. I couldn't find any examples like this. I wonder what way should I examine

enter image description here

enter image description here

This is my code:

var map = L.map('map').setView([40.97, 29.07], 13);


var basemap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);


map.pm.addControls({
    position: 'topleft',
    drawCircle: true,
});



 /// 09.08
function makePopupContent(e){
    return `
        ${e.geometry.coordinates}   
    `;
}

 function onEachFeature(feature,layer){
    layer.bindPopup(makePopupContent(feature));

}

Best Answer

You can use pm:create map event, which is fired when feature being drawn is created. Drawn layer is passed in event processing function as e.layer. Since this is Leaflet layer, you have to use .toGeoJSON() method to get corresponding GeoJSON feature.

When drawn layer is created, you have to attach pm:update event processing function to it, to update popup content if/when layer is edited.

Code could then look something like this:

function makePopupContent(feature){
  return `
    ${feature.geometry.coordinates}   
  `;
}

function setPupup(layer) {
  var feature = layer.toGeoJSON();
  var coords = makePopupContent(feature);
  layer.bindPopup(coords);
}

map.on('pm:create', function(e) {
  var layer = e.layer;
  setPupup(layer);
  layer.on('pm:update', function(e) {
    setPupup(e.layer);
  });
});
Related Question