Wednesday, 20 November 2019

vector - How to edit an existing layer using leaflet?


I am used to working


with OL3 and I wanted to try using leaflet and see if it is as powerful as OL. I loaded a map with some data from a GeoServer WFS layer using this tutorial from Georepublic.


var group = new L.featureGroup().addTo(map);
var geojsonlayer;

function handleJson(data) {
// console.log(data);
geojsonlayer=L.geoJson(data, {
style: function (feature) {
return {
"weight": 2,
"opacity": 0.65
};
},
onEachFeature: function (feature, my_Layer) {

my_Layer.bindPopup("ID : "+feature.properties.id+"
Name : "+feature.properties.name);
}
}).addTo(group);
map.fitBounds(group.getBounds());
}

I wanted to add some editing and found the Leaflet.draw plugin I loaded it, and so far I can add a feature to the database ( knowing how painful it will be with WFS-T I used an AJAX call to a php script instead ). Here is how I call the draw control :


var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({

edit: {
featureGroup: drawnItems
}
});
map.on('draw:created', function (e) {
//Here I call the php script that stores the created feature in the DB
});

The problem is when I want to edit the existing features using the Leaflet.draw plugin, so I thought of changing the featureGroup in edit to group like this :


var drawControl = new L.Control.Draw({

edit: {
featureGroup: group
}
});

but now I get this error:


Uncaught TypeError: Cannot read property 'enable' of undefined

I have done some research and found that I need to enable editing of the layer with this : layer.editing.enable(); the problem is where to add it so that when I click on the edit icon in the Leaflet.draw control I can edit my layer.


I kind of liked the Leaflet.draw plugin menu on the side, is it possible to solve my problem using this plugin or should I make my own editing menu?




Answer



Thanks to the help of @user1919 who pointed me to the solution proposed in Stackoverflow, I could edit the existing layer with the plugin Leaflet.draw without customizing it ( at least not it's code ).


The edits now are made on the onEachFeature function in the L.geoJSON call like this:


var selectedFeature = null;
function handleJson(data) {
geojsonlayer=L.geoJson(data, {
onEachFeature: function (feature, layer) {
group.addLayer(layer);
layer.on('click', function(e){
if(selectedFeature){

selectedFeature.editing.disable();
// and Here I'll add the code to store my edited polygon in the DB or whatever I want to do with it
}
selectedFeature = e.target;
e.target.editing.enable();
});
}
}).addTo(group);
}


and so there is no need to use the edits from the menu in Leaflet.draw control


Now to use the Leaflet.draw control I had to add to the drawnItems, which is the editable layer defined in Leaflet.draw control, the feature which I selected. It looks like this :


drawnItems.addLayer(e.target);

and define drawnItems in the edit of the Leaflet.draw control like this :


var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
});

No comments:

Post a Comment

arcpy - Changing output name when exporting data driven pages to JPG?

Is there a way to save the output JPG, changing the output file name to the page name, instead of page number? I mean changing the script fo...