feat(url-center-hash): Listen for URL changes to update the center.

tombatossals · tombatossals · commit ebad62678ac2 · 2014-03-19T11:59:59.000+01:00
As a suggestion by @peterm95018 here: tombatossals/angular-leaflet-directive#283
diff --git a/dist/angular-leaflet-directive.js b/dist/angular-leaflet-directive.js
@@ -172,21 +172,20 @@
                 }
                 return centerParam;
               };
-              urlCenterHash = extractCenterFromUrl();  /*
-                    leafletScope.$on('$locationChangeSuccess', function(event) {
-                        var scope = event.currentScope;
-                        //$log.debug("updated location...");
-                        var urlCenter = extractCenterFromUrl();
-                        if (isDefined(urlCenter) && !isSameCenterOnMap(urlCenter, map)) {
-                            //$log.debug("updating center model...", urlCenter);
-                            scope.center = {
-                                lat: urlCenter.lat,
-                                lng: urlCenter.lng,
-                                zoom: urlCenter.zoom
-                            };
-                        }
-                    });
-                    */
+              urlCenterHash = extractCenterFromUrl();
+              leafletScope.$on('$locationChangeSuccess', function (event) {
+                var scope = event.currentScope;
+                //$log.debug("updated location...");
+                var urlCenter = extractCenterFromUrl();
+                if (isDefined(urlCenter) && !isSameCenterOnMap(urlCenter, map)) {
+                  //$log.debug("updating center model...", urlCenter);
+                  scope.center = {
+                    lat: urlCenter.lat,
+                    lng: urlCenter.lng,
+                    zoom: urlCenter.zoom
+                  };
+                }
+              });
             }
             leafletScope.$watch('center', function (center) {
               //$log.debug("updated center model...");
diff --git a/dist/angular-leaflet-directive.min.js b/dist/angular-leaflet-directive.min.js
diff --git a/examples/url-hash-center-example.html b/examples/url-hash-center-example.html
@@ -30,12 +30,20 @@
   </head>
   <body ng-controller="DemoController">
     <h1>Center map with URL synchronization example</h1>
-    <p>This demo syncs the map center position with the URL, and viceversa, using the <strong>center-url-params</strong> property.</p>
-    <form>
-        Latitude : <input type="number" step="any" ng-model="london.lat" />
-        Longitude : <input type="number" step="any" ng-model="london.lng" />
-        Zoom : <input type="number" step="any" ng-model="london.zoom" />
-    </form>
-    <leaflet center="london" url-hash-center="yes" width="640" height="400"></leaflet>
+    <div style="float: left;">
+        <p>This demo syncs the map center position with the URL, and viceversa, using the <strong>center-url-params</strong> property.</p>
+        <form>
+            Latitude : <input type="number" step="any" ng-model="london.lat" />
+            Longitude : <input type="number" step="any" ng-model="london.lng" />
+            Zoom : <input type="number" step="any" ng-model="london.zoom" />
+        </form>
+        <leaflet center="london" url-hash-center="yes" width="640" height="400"></leaflet>
+    </div>
+    <ul style="float: left;">
+        <li><a href="#/?c=36.8899:-121.8008:12">Watsonville</a>
+        <li><a href="#/?c=34.0078:-118.8060:14">Malibu</a>
+        <li><a href="#/?c=33.7717:-117.9458:12">Garden Grove</a>
+        <li><a href="#/?c=32.5290:-117.0442:13">Tijuana</a>
+    </ul>
   </body>
 </html>
diff --git a/src/directives/center.js b/src/directives/center.js
@@ -70,7 +70,6 @@ angular.module("leaflet-directive").directive('center',
                     };
                     urlCenterHash = extractCenterFromUrl();
 
-                    /*
                     leafletScope.$on('$locationChangeSuccess', function(event) {
                         var scope = event.currentScope;
                         //$log.debug("updated location...");
@@ -84,7 +83,6 @@ angular.module("leaflet-directive").directive('center',
                             };
                         }
                     });
-                    */
                 }
 
                 leafletScope.$watch("center", function(center) {

Original file line number	Diff line number	Diff line change
`@@ -70,7 +70,6 @@ angular.module("leaflet-directive").directive('center',`
`70`	`70`	`};`
`71`	`71`	`urlCenterHash = extractCenterFromUrl();`
`72`	`72`
`73`		`- /*`
`74`	`73`	`leafletScope.$on('$locationChangeSuccess', function(event) {`
`75`	`74`	`var scope = event.currentScope;`
`76`	`75`	`//$log.debug("updated location...");`
`@@ -84,7 +83,6 @@ angular.module("leaflet-directive").directive('center',`
`84`	`83`	`};`
`85`	`84`	`}`
`86`	`85`	`});`
`87`		`- */`
`88`	`86`	`}`
`89`	`87`
`90`	`88`	`leafletScope.$watch("center", function(center) {`