Last Updated: February 25, 2016
· sebastialonso

Editing programatically inserted polygons on Leaflet in AngularJS

I'm creating geofences with Leaflet and Leaflet.draw, but this will do even if you're building your polygons or circles from raw data like:

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

this pro tip will be useful.

For this particular project I'm using AngularJS and Mapbox for the Tile Layer, but it shouldn't make any difference.

First, instantiate the map

leafletData.getMap().then(function(map) {
  attribution: '© <a href="" target="_blank">Mapbox</a>'

The map is recovered from the Leafleat AngularJS directive (using angular-leaflet-directive)

The rest is really simple.
The layer of items in the map
var drawnItems = new L.FeatureGroup();

The custom controls I needed it (just ignore this except the edit part)
var editOnlyControl = new L.Control.Draw({
position: "topright",
draw: false,
edit: {
featureGroup: drawnItems, //<- IMPORTANT
remove: false

Add it to the map

Now, programatically insert your $FIGUREOFCHOICE

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


And there it is! Now you (or your users) can edit the polygons you want in a pretty way.