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

As a suggestion by @peterm95018 here: #283
tombatossals · Mar 19, 2014 · ebad626 · ebad626
1 parent 4a6d755
commit ebad626
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 26 deletions.
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) {