5

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));

}

1 Answer 1

5

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);
  });
});
1
  • 1
    it is working thank you so much
    – Ömer
    Commented Aug 9, 2021 at 10:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.