Angularjs with leaflet directives - To clear markers

Question

Angularjs with leaflet directives - To clear markers

I have following setup working fine, however, I got some small problem.. Tried many ways but I cannot get rid of markers before adding new markers..

With following example, marker keep being added whenever you push from the controller..what is the best way to erase existing markers before adding any new one...?

 var module = angular.module('Map', []);   
 module.directive('sap', function() {

    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function(scope, element, attrs) {
            var map = L.map(attrs.id, {
                center: [-35.123, 170.123],
                zoom: 14
            });
            //create a CloudMade tile layer and add it to the map
            L.tileLayer('http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png', {
                maxZoom: 18
            }).addTo(map);

            //add markers dynamically
            var points = [];
            updatePoints(points);

       function updatePoints(pts) {

                for (var p in pts) {

                    L.marker([pts[p].lat, pts[p].long]).addTo(map).bindPopup(pts[p].message);
                }

            }


            scope.$watch(attrs.pointsource, function(value) {
                updatePoints(value);
            });

        }


    };
});

And inside the controller, the way to add new marker is

          $scope.pointsFromController.push({
                lat: val.geoLat,
                long: val.geoLong
            });

Code in the HTML is simple

<sap id="map" pointsource="pointsFromController"></sap>

angularjs
leaflet

Answer 1

Leaflet creator here. The best way to clear markers is to add them to a group (instead of directly adding to the map), and then call group.clearLayers() when you need. http://leafletjs.com/examples/layers-control.html

Answer 2

Assuming pointsFromController is a simple javascript array. You can simply undo the pushes you've made.

$scope.removePoints = function() {
  for (var i=$scope.pointsFromController.length; i>=0; i--)
    $scope.pointsFromController.pop();
};