Search code examples
javascriptgeojsonleaflet.draw

Move handlers not appears when editing polygon layer in leaflet-draw


I have a textarea that I copy a GeoJson into it and the map must show its shape. This is not a problem until I wanted this shape to be editable. So I used below code to convert it to layer and add to featuregroup so I can edit it using leaflet-draw. But this code works for POINT and LINE but not for POLYGONS. In case of polygon, move handlers that should appears at each side of polygon, not appears.

What could be problem ?

var drawnItems = L.featureGroup().addTo(mymap);

mymap.addControl(new L.Control.Draw({
    edit: {
        featureGroup: drawnItems,
        poly: {
            allowIntersection: false
        }
    },
    draw: {
        polygon: {
            allowIntersection: false,
            showArea: true
        }
    }
}));

var str = document.getElementById("ingeojson").value;
var shapeJson = JSON.parse(str);
var shape = L.geoJSON(shapeJson);
var shapeLayer = L.GeoJSON.geometryToLayer(shapeJson);
drawnItems.addLayer(shapeLayer);
shapeLayer.addTo(mymap);
mymap.fitBounds(shapeLayer.getBounds());

Solution

  • I finally solved it. The problem was related to version of leaflet and leaflet-draw I used.

    At the time of writing this post, I used leaflet-draw 0.4.7 and leaflet 1.0.2 and the problem is solved .