issue 805 resolved

Author: nmccready

dist/angular-leaflet-directive.js

@@ -46,6 +46,7 @@ angular.module("leaflet-directive", []).directive('leaflet',
                 genDispatchMapEvent = leafletEvents.genDispatchMapEvent,
                 mapEvents = leafletEvents.getAvailableMapEvents();
 
+            scope.mapId =  attrs.id;
             leafletData.setDirectiveControls({}, attrs.id);
 
             // Set width and height utility functions
@@ -2422,7 +2423,7 @@ angular.module("leaflet-directive").service('leafletMarkersHelpers', ["$rootScop
         addMarkerWatcher: function (marker, name, leafletScope, layers, map, isDeepWatch) {
             var markerWatchPath = Helpers.getObjectArrayPath("markers." + name);
             isDeepWatch = defaultTo(isDeepWatch, true);
-            //TODO:break up this 200 line function to be readable (nmccready)
+
             var clearWatch = leafletScope.$watch(markerWatchPath, function(markerData, oldMarkerData) {
                 if (!isDefined(markerData)) {
                     _deleteMarker(marker, map, layers);
@@ -3910,6 +3911,27 @@ angular.module("leaflet-directive").directive('markers',
         maybeWatch = leafletWatchHelpers.maybeWatch,
         extendDirectiveControls = leafletDirectiveControlsHelpers.extend;
 
+    var _getLMarker = function(leafletMarkers, name, maybeLayerName){
+        if(!Object.keys(leafletMarkers).length) return;
+        if(maybeLayerName && isString(maybeLayerName)){
+            if(!leafletMarkers[maybeLayerName] || !Object.keys(leafletMarkers[maybeLayerName]).length)
+                return;
+            return leafletMarkers[maybeLayerName][name];
+        }
+        return leafletMarkers[name];
+    };
+
+    var _setLMarker = function(lObject, leafletMarkers, name, maybeLayerName){
+        if(maybeLayerName && isString(maybeLayerName)){
+            if(!isDefined(leafletMarkers[maybeLayerName]))
+                leafletMarkers[maybeLayerName] = {};
+            leafletMarkers[maybeLayerName][name] = lObject;
+        }
+        else
+            leafletMarkers[name] = lObject;
+        return lObject;
+    };
+
     var _maybeAddMarkerToLayer = function(layerName, layers, model, marker, doIndividualWatch, map){
 
         if (!isString(layerName)) {
@@ -3956,7 +3978,8 @@ angular.module("leaflet-directive").directive('markers',
 
             var model = Helpers.copy(markersToRender[newName]);
             var pathToMarker = Helpers.getObjectDotPath(maybeLayerName? [maybeLayerName, newName]: [newName]);
-            if (!isDefined(leafletMarkers[newName])) {
+            var maybeLMarker = _getLMarker(leafletMarkers,newName, maybeLayerName);
+            if (!isDefined(maybeLMarker)) {
                 //(nmccready) very important to not have model changes when lObject is changed
                 //this might be desirable in some cases but it causes two-way binding to lObject which is not ideal
                 //if it is left as the reference then all changes from oldModel vs newModel are ignored
@@ -3967,7 +3990,7 @@ angular.module("leaflet-directive").directive('markers',
                     $log.error(errorHeader + ' Received invalid data on the marker ' + newName + '.');
                     continue;
                 }
-                leafletMarkers[newName] = marker;
+                _setLMarker(marker, leafletMarkers, newName, maybeLayerName);
 
                 // Bind message
                 if (isDefined(model.message)) {
@@ -4009,7 +4032,7 @@ angular.module("leaflet-directive").directive('markers',
                 leafletMarkerEvents.bindEvents(marker, pathToMarker, model, leafletScope, layerName);
             }
             else {
-                updateMarker(model, oldModels[newName], leafletMarkers[newName], pathToMarker, leafletScope, layers, map);
+                updateMarker(model, oldModels[newName], maybeLMarker, pathToMarker, leafletScope, layers, map);
             }
         }
     };
@@ -4097,19 +4120,27 @@ angular.module("leaflet-directive").directive('markers',
 
                 getLayers().then(function(layers) {
                     var _clean = function(models, oldModels){
+                        if(isNested) {
+                            $it.each(models, function(markerToMaybeDel, layerName) {
+                                _destroy(markerToMaybeDel, oldModels[layerName], leafletMarkers[layerName], map, layers);
+                            });
+                            return;
+                        }
                         _destroy(models, oldModels, leafletMarkers, map, layers);
                     };
 
                     var _create = function(models, oldModels){
                         _clean(models, oldModels);
-                        var skips = _getNewModelsToSkipp(models, oldModels, leafletMarkers);
+                        var skips = null;
                         if(isNested) {
                             $it.each(models, function(markersToAdd, layerName) {
+                                skips = _getNewModelsToSkipp(models[layerName], oldModels[layerName], leafletMarkers[layerName]);
                                 _addMarkers(markersToAdd, oldModels, map, layers, leafletMarkers, leafletScope,
                                     watchOptions, layerName, skips);
                             });
                             return;
                         }
+                        skips = _getNewModelsToSkipp(models, oldModels, leafletMarkers);
                         _addMarkers(models, oldModels, map, layers, leafletMarkers, leafletScope,
                             watchOptions, undefined, skips);
                     };
@@ -4722,12 +4753,15 @@ angular.module("leaflet-directive")
         ];
     };
 
-    var _genDispatchMapEvent = function(scope, eventName, logic) {
+    var _genDispatchMapEvent = function(scope, eventName, logic, mapId) {
+        // (nmccready) We should consider passing mapId as an argument or using it from scope
         return function(e) {
             // Put together broadcast name
+            // (nmccready) We should consider passing mapId joining mapId to the broadcastName to keep the event unique. Same should be done for all directives so we know what map it comes from.
+            // problem with this is it will cause a minor bump and break backwards compat
             var broadcastName = 'leafletDirectiveMap.' + eventName;
             // Safely broadcast the event
-            fire(scope, broadcastName, logic, e, e.target, scope)
+            fire(scope, broadcastName, logic, e, e.target, scope, mapId)
         };
     };
 

dist/angular-leaflet-directive.min.js

@@ -10,14 +10,19 @@
     <link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
     <link rel="stylesheet" href="../bower_components/leaflet.markercluster/dist/MarkerCluster.Default.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        div{
+            margin:10px;
+        }
+    </style>
     <script>
         angular.module('demoApp', ['leaflet-directive'])
-        .controller('Ctrl', ['$scope', 'leafletData', function($scope, leafletData) {
+        .controller('Ctrl', ['$scope', 'leafletData', '$timeout', function($scope, leafletData, $timeout) {
             angular.extend($scope, {
                 center: {
                     lat: 48.879633,
                     lng: 2.331717,
-                    zoom: 15
+                    zoom: 14
                 },
                 layers: {
                     baselayers: {
@@ -57,7 +62,18 @@
                 }
             });
 
+            $timeout(function(){
+                //move a point to see if it moves on the map
+                $scope.markers.points[1] = {
+                    layer: "points",
+                    lat: 48.889318,
+                    lng: 2.33151,
+                    message: "MALL 2"
+                };
+            },2000);
+
             $scope.$on("leafletDirectiveMap.click", function(event, args) {
+                if(args.model.mapId != 'map1') return;
                 var leafEvent = args.leafletEvent;
                 // console.log("before", $scope.markers.mapdescription, $scope.markers.points);
                 $scope.markers.mapdescription.push({
@@ -78,12 +94,61 @@
             });
 
 
+        }])
+        .controller('Ctrl2', ['$scope', 'leafletData', function($scope, leafletData) {
+            angular.extend($scope, {
+                center: {
+                    lat: 48.879633,
+                    lng: 2.331717,
+                    zoom: 15
+                },
+                layers: {
+                    baselayers: {
+                        osm: {
+                            name: 'OpenStreetMap',
+                            url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+                            type: 'xyz'
+                        }
+                    }
+                },
+                defaultIcon: {},
+                markers:  [{
+                        "lat": 48.879633,
+                        "lng": 2.331717,
+                        "message": "MALL 1"
+                    }, {
+                        "lat": 48.879318,
+                        "lng": 2.33151,
+                        "message": "MALL 2"
+                }]
+            });
+
+            $scope.$on("leafletDirectiveMap.click", function(event, args) {
+                if(args.model.mapId != 'map2') return;
+                var leafEvent = args.leafletEvent;
+
+                $scope.markers.push({
+                    lat: leafEvent.latlng.lat,
+                    lng: leafEvent.latlng.lng,
+                    draggable: true,
+                    icon: ''
+                });
+
+            });
+
+
         }]);
     </script>
 </head>
 
-<body ng-controller="Ctrl">
-    <leaflet width="100%" height="480px" center="center" markers="markers" markers-nested="true" layers="layers"></leaflet>
+<body >
+    <div ng-controller="Ctrl">
+        <leaflet id="map1" width="100%" height="480px" center="center" markers="markers" markers-nested="true" layers="layers"></leaflet>
+    </div>
+    <div ng-controller="Ctrl2">
+        <leaflet id="map2" width="100%" height="480px" center="center" markers="markers" layers="layers"></leaflet>
+    </div>
+
 </body>
 
 </html>

dist/angular-leaflet-directive_dev_mapped.js

@@ -39,6 +39,7 @@ angular.module("leaflet-directive", []).directive('leaflet',
                 genDispatchMapEvent = leafletEvents.genDispatchMapEvent,
                 mapEvents = leafletEvents.getAvailableMapEvents();
 
+            scope.mapId =  attrs.id;
             leafletData.setDirectiveControls({}, attrs.id);
 
             // Set width and height utility functions