1

I use Leaflet Draw and Leaflet WFST plugins to create/edit features and save my edits to PostGIS Database (hosted by GeoServer). I have three layers: points, lines, and polygons. I manage to make new features be created and saved to each layer depending on geometry class.

However, Edit/Delete functions of L.Draw doesn't work with L.FeatureGroup() which contains multiple layers. They accept only one editable layer at a time.

Is there any way to make it work?

// Basemap
var map = new L.map('map').setView([57.704, 11.965], 6);
L.esri.basemapLayer('Topographic').addTo(map);

// Layers to draw in
var points = new L.WFST({
    url: 'http://localhost:8080/geoserver/ows',
    typeNS: 'postgis_test',
    typeName: 'points',
    crs: L.CRS.EPSG4326,
    geometryField: 'geom',
    });

var lines = new L.WFST({
    url: 'http://localhost:8080/geoserver/ows',
    typeNS: 'postgis_test',
    typeName: 'lines',
    crs: L.CRS.EPSG4326,
    geometryField: 'geom',
    });

var polygons = new L.WFST({
    url: 'http://localhost:8080/geoserver/ows',
    typeNS: 'postgis_test',
    typeName: 'polygons',
    crs: L.CRS.EPSG4326,
    geometryField: 'geom',
    });

var wfst = new L.featureGroup([points, lines, polygons]).addTo(map);


// Drawing
var drawControl = new L.Control.Draw({ 
    draw:{circle:false, circlemarker:false, rectangle:false, },
    edit:{featureGroup: wfst} });
map.addControl(drawControl);

map.on('draw:created', function (e) {
    var layer = e.layer,
        type = e.layerType;

    if (type === 'marker') {
        points.addLayer(layer);  }
    else if (type === 'polygon') {
        polygons.addLayer(layer); }
    else {
        lines.addLayer(layer); }
    });

map.on('draw:edited', function (e) {
    var layers = e.layers;
    layers.eachLayer( function (layer) {
        points.editLayer(layer); lines.editLayer(layer); polygons.editLayer(layer); });
    });

Here is en error message from console log:

TypeError: Cannot read property 'enable' of undefined
    at e._enableLayerEdit (leaflet.draw.js:9)
    at eachLayer (leaflet.js:5)
    at e.addHooks (leaflet.draw.js:9)
    at enable (leaflet.js:5)
    at enable (leaflet.draw.js:9)
    at HTMLAnchorElement.r (leaflet.js:5)

Your Answer

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

Browse other questions tagged or ask your own question.