Leaflet Draw + Angular + GeoJSON: How to achieve two way binding between Map and GeoJSON object

Question

I can add Geojson layer to a leaflet map using angular leaflet directive.

I can also add the leaflet Draw control and create new layers (polygons, polylines etc.)

However, there appears to be no straight forward way to enable editing of the GeoJSON layer loaded by the directive.

The code looks something like this:

angular.extend($scope, {
                controls: {
                    draw: {}
                }, 
                geojson: {
                     ...........
                     ...........
                }
           });

.....

.....

<leaflet center="london" controls="controls"  geojson="geojson"></leaflet>

However when I try to edit the layer or create new layers, the changes happen in a different layer group. For example, after the GeoJSON is loaded, if I click on edit button, none of the items loaded via GeoJSON become editable.

I want the draw control to be bound to the GeoJSON object that was specified in the directive. The objective is to have any modification via the UI reflect immediately in the geojson object and vice versa. In other words I want to have two way binding between the edit control and the geojson object.

Answer 1

You need to make sure that each place you add your layers, you are adding them to the 'same' feature / layer group.

For example, I typically create a feature group available to $scope and add layers that I want to share functionality, like click-to-edit, to that group. Be sure to do this in the function that loads GeoJSON from data, and in the function that adds layers after drawing.

$scope.editableFields = new L.FeatureGroup();
var myLayer = L.circle([50.5, 30.5], 200);
$scope.editableFields.addLayer(myLayer);

You then need to specify which feature group your control(s) will target. Something similar to:

                controls:{
                         draw: {},
                         edit: {
                           featureGroup: $scope.editableFields;
                          }
                         }