angular-leaflet-directive example fiddle

http://angularjs.org/

by Kyros Koh

HTML

<script src="http://code.angularjs.org/1.2.2/angular.js"></script>
<script src="http://tombatossals.github.io/angular-leaflet-directive/dist/angular-leaflet-directive.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"></script>
<body ng-controller="DemoController">
    <leaflet center="center" controls='controls'></leaflet>
     <PRE>Saved items :{{savedItems | json}}</PRE>
</body>

CSS

.angular-leaflet-map {
    width: 640px;
    height: 280px;
}

JavaScript

var app = angular.module('demoapp', ['leaflet-directive']);

app.controller('DemoController', ['$scope', 'leafletData', function ($scope, leafletData) {

    $scope.savedItems = [{
        "id": 721,
            "geoJSON": {
            "type": "Feature",
                "geometry": {
                "type": "Point",
                    "coordinates": [-0.626220703125,
                48.1367666796927]
            }
        }
    }, {
        "id": 724,
            "geoJSON": {
            "type": "Feature",
                "geometry": {
                "type": "Point",
                    "coordinates": [-0.274658203125,
                49.13859653703879]
            }
        }
    }];
    var drawnItems = new L.FeatureGroup();
    for (var i = 0; i < $scope.savedItems.length; i++) {
        L.geoJson($scope.savedItems[i].geoJSON, {
            style: function(feature) {
                return {
                    color: '#bada55'
                };
            },
            onEachFeature: function (feature, layer) {
                drawnItems.addLayer(layer);
            }
        });
    }

    angular.extend($scope, {
        center: {
            lat: 51.505,
            lng: -0.09,
            zoom: 5
        },
        controls: {
            draw: {},
			edit: {
				featureGroup: drawnItems
			}
        }
    });


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

        var drawnItems = $scope.controls.edit.featureGroup;
        drawnItems.addTo(map);
/*        
        // Init the map with the saved elements
        for (var i = 0; i < $scope.savedItems.length; i++) {
            layer = new L.GeoJSON($scope.savedItems[i].geoJSON);
            drawnItems.addLayer(layer);
        }
*/
        map.on('draw:created', function (e) {
            var layer = e.layer;
            drawnItems.addLayer(layer);

            $scope.savedItems.push({
                id: layer._leaflet_id,
                geoJSON: layer.toGeoJSON()
            });
        });

    ...