Editando polígonos inseridos programaticamente no folheto em AngularJS

Estou criando geofences com Leaflet e Leaflet.draw, mas isso funcionará mesmo se você estiver construindo seus polígonos ou círculos de dados brutos como:

{ "circle": {
  "latitude": LAT_VAL,
  "longiutde": LON_VAL,
  "radius": RADIUS_VAL
  }
}

esta dica profissional será útil.

Para este projeto específico, estou usando AngularJS e Mapbox para a camada de bloco, mas não deve fazer nenhuma diferença.

Primeiro, instancie o mapa

leafletData.getMap().then(function(map) {
   L.tileLayer('http://api.tiles.mapbox.com/v4/YOUR_ID/{z}/{x}/{y}.png?access_token=YOUR_TOKEN', 
{
  attribution: '© <a href="https://www.mapbox.com/about/maps/" target="_blank">Mapbox</a>'
    }
).addTo(map);

O mapa é recuperado da diretiva Leafleat AngularJS (usando angular-leaflet-directive)

O resto é muito simples.
A camada de itens no mapa
~~~
var drawnItems = new L.FeatureGroup ();
map.addLayer (drawnItems);
~~~

Os controles personalizados que eu precisava (apenas ignore isso, exceto a parte de edição)
~~~
var editOnlyControl = new L.Control.Draw ({
position: “topright”,
draw: false,
edit: {
featureGroup: drawnItems, // <-
Remover IMPORTANTE : false
}
});
~~~

Adicione-o ao mapa
~~~
map.addControl (editOnlyControl);
~~~

Agora, insira programaticamente sua $ FIGURE OF CHOICE

var circle = new L.Circle([$scope.fence.lat, $scope.fence.lon], $scope.fence.radius);

circle.addTo(drawnItems);

E aí está! Agora você (ou seus usuários) podem editar os polígonos desejados de uma maneira bonita.