Ability to edit shape after ajax call (not on page load)

[nmccready]

From @stev-0 on March 18, 2015 1:36

There is some backgroud to this issue in #549, but basically I've been finding it difficult to add in an editable layer after initialisation - I want to only set the editable feature group when the shape I want to edit has been loaded rather than when the directive is called.

I guess the fundamental issue is that scope items like center have watchers when they change but there are none in controls.js.

I had a stab at trying to fix this using a watcher on the $controls.edit variable, shown here (needs more work).

https://github.com/stev-0/angular-leaflet-directive/commit/c9fe8041c4569c2c5fc8c35f84a78aa39e504593

Another thing I tried was to not declare just declare the controls: {draw: {}} variable (so it defaulted to a featureGroup) and then add the relevant layer in afterwards, but that didn't work.

Would be good to know if I am barking up the right tree (it is a bit hacky because you don't seem to be able to remove controls easily in leaflet), then I will continue with the patch

Copied from original issue: tombatossals/angular-leaflet-directive#656

[nmccready]

From @dud3 on April 12, 2015 10:17

@stev-0 Do you happen to have any example of: how to load the markers and make the editable and removable, I' ?

Thanks.

[nmccready]

From @dud3 on April 13, 2015 14:3

I've just solved it :D>.

[nmccready]

From @muenchdo on August 16, 2015 11:36

@dud3 Would be great if you could explain how you solved this, I'm still struggling.

[nmccready]

From @dud3 on August 27, 2015 23:16

I think this should guide you:

go.get.my.data(function(geometry) { 

var drawnItems = $scope.controls.edit.featureGroup;

if(geometry.shape == "Polygon") {

    // Add the Polygon geometry to the map.
    var _geometry_coordinates = JSON.parse(geometry.coordinates);                       
    var polygon = new L.Polygon(_geometry_coordinates);
    polygon.setStyle({color: '#66CCCC', fillColor: '#66CCCC'});

    // Make the geo. shape editable.
    // polygon.editing.enable();
    drawnItems.addLayer(polygon);

    // Push layer.
    var _push_layer = {};
    _push_layer.coordinates = JSON.parse(geometry.coordinates);

    // Push the leaflet_id first, so later on we
    // can easily remove it from the map.
    _push_layer.id = polygon._leaflet_id;

    // Push location id as well, so we can distinguish
    // if the marker already existed or not, and make a call
    // to the back-end to remove/modify the entity on the db.
    _push_layer.geometry_id = geometry.id;

    // And finally the spot_id, just in case. - IGNORE.
    // _push_layer.spot_id = geometry.spot_id;

    $scope.submission.spot.coordinates['polygon'].push(_push_layer);

    // Resolve promise. - IGNORE.
    // resolve(1);

}

});

[nmccready]

From @dud3 on August 27, 2015 23:21

And this goes for the awesome markers:

go.get.my.data(function(location) {

    leafletData.getMap().then(function(map) {

        var drawnItems = $scope.controls.edit.featureGroup;
        var coordinates = {lat: location.latitude, lng: location.longitude};

        var layer = new L.Marker(coordinates);
        drawnItems.addLayer(layer);

        var _push_layer = coordinates;

            // Push the leaflet_id first, so later on we
            // can easily remove it from the map.
            _push_layer.id = layer._leaflet_id;

            // Push location id as well, so we can distinguish
            // if the marker already existed or not, and make a call
            // to the back-end to remove/modify the entity on the db.
            _push_layer.location_id = location.id;

            // And finally the spot_id, just in case. - IGNORE.
            // _push_layer.spot_id = location.spot_id;     
    })
});