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

i can add geojson layer leaflet map using angular leaflet directive.

i can add leaflet draw control , create new layers (polygons, polylines etc.)

however, there appears no straight forward way enable editing of geojson layer loaded directive.

the code looks this:

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

.....

.....

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

however when try edit layer or create new layers, changes happen in different layer group. example, after geojson loaded, if click on edit button, none of items loaded via geojson become editable.

i want draw control bound geojson object specified in directive. objective have modification via ui reflect in geojson object , vice versa. in other words want have 2 way binding between edit control , geojson object.

you need make sure each place add layers, adding them 'same' feature / layer group.

for example, typically create feature group available $scope , add layers want share functionality, click-to-edit, group. sure in function loads geojson data, , in function adds layers after drawing.

$scope.editablefields = new l.featuregroup(); var mylayer = l.circle([50.5, 30.5], 200); $scope.editablefields.addlayer(mylayer); 

you need specify feature group control(s) target. similar to:

                controls:{                          draw: {},                          edit: {                            featuregroup: $scope.editablefields;                           }                          }