I'm using below function to get geography data from backend as json and then draw polygon using leaflet:
function drawAreas() {
$.ajax({
type: "POST",
url: "MAP_GeographicalAreas.aspx/GetGeographicalArea",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (response) {
var json = JSON.parse(response.d);
var drawnItems = new L.FeatureGroup();
json.forEach(function (record, index) {
var layer = L.geoJSON(record);
layer.addTo(drawnItems);
layer.on('click', function (event) {
// I want to make polygon editable here...
});
});
map.addLayer(drawnItems);
},
failure: function (response) {
alert("saveNew failure:", response.d);
},
error: function (response) {
alert("saveNew error:", response + response.d);
}
});
}
Also on form load I prepare the map using these codes:
function initLeafletMap() {
L.tileLayer('http://{s}.google.com/vt?lyrs=m&x={x}&y={y}&z={z}', {
maxZoom: 20,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
}).addTo(map);
const mapDiv = document.getElementById("map");
const resizeObserver = new ResizeObserver(() => {
map.invalidateSize();
});
resizeObserver.observe(mapDiv);
drawnItems = L.featureGroup().addTo(map);
map.addControl(new L.Control.Draw({
edit: {
featureGroup: drawnItems,
poly: {
allowIntersection: false
}
},
draw: {
polygon: {
allowIntersection: false,
showArea: true
}
}
}));
map.on(L.Draw.Event.CREATED, function (event) {
var layer = event.layer;
var poly = layer.toGeoJSON();
shape_for_db = JSON.stringify(poly);
drawnItems.addLayer(layer);
});
map.on(L.Draw.Event.EDITED, function (event) {
var layers = event.layers;
layers.eachLayer(function (layer) {
var poly = layer.toGeoJSON();
shape_for_db = JSON.stringify(poly);
//console.log(shape_for_db);
});
});
}
How to make polygon editable when user clicks on it?
I tried solutions suggested in these links:
How to allow only one feature/polygon to be edited at a time with Leaflet?