1

I have spend more than 4 hours trying to figure out how I can do this. I use Leaflet and Leaflet Draw in order to draw news features on my map.

Now I want to be able to edit features of an existing WFS layer (coming from geoserver).

I have searched a lot all around internet and I can not find a clear example of how to make my WFS layer editable.

This is what I do based on the example from here:

// intialize the drawItems and add it to the map 
var drawnItems = new L.FeatureGroup();
 map_add.addLayer(drawnItems);
// initialize the controls  (only editing) and add it to the map
var drawControl = new L.Control.Draw({
          draw: {
              position: 'topleft'
          },
          edit: {
              featureGroup: drawnItems,
              edit: true
              }
          }
      });
map_add.addControl(drawControl);

url_string = "thats my url"
// make wfs request and add the layer in the drawItems 
var geojson = $.ajax({
          type: "GET",
          dataType: "json",
          url: url_string,
          success: function (response) {
             drawnItems.addLayer(L.geoJson(response));
          }
        });

The layer is displayed on the map. But when I click the edit button (of the leaflet draw plugin) I get a:

      Cannot read property 'enable' of undefined

What am I doing wrong? Please advise! If I follow the example in the link I provided it works. But the guy there he uses data inline with his code. I need to use the layer from the WFS request.

2
  • 2
    I forgot to mention it, it worked for me because I inserted the drawnItems.addLayer(e.target); inside onEachFeature function, that's why I don't get the undefined error Jul 27 '16 at 14:25
  • great. I will check this out!
    – user1919
    Jul 27 '16 at 15:12
1

thanks to the tips you send me from stackoverflow I managed to make the features editable.

Now for the WFS layer part, I think that you'll have to construct the WFS-T query by yourself as here in the Georepublic example or as in my case switch to a server side language like php or use Node.js and store directly to the database if you have one.

I almost gave up on Leaflet when I found out that there isn't much support for WFS-T, and that you'll have to code everything yourself.

2
  • Thanks. Regarding the WFS-T request is not really so complicated. You actually can execute it using a php or python script and the CURL requests library (or Requests library of python). Geoserver supports WFS-T. On the left sidebar there is a Demo section where you can see how your XML needs to be structured.
    – user1919
    Jul 27 '16 at 21:02
  • 1
    that's exactly what made me change my mind on using WFS-T, in OL3 there is already the formatWFS() which makes it easy but in leaflet one have to structure the WFS-T request, and laziness took over me ;) Jul 28 '16 at 7:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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