feat(examples): Added the tiles-zoom-changer example by @yagoferrer a…

…s an standalone example. http://tombatossals.github.io/angular-leaflet-directive/examples/tiles-zoom-changer-example.html Added the e2e tests for the tiles attribute too. Discussed here: tombatossals/angular-leaflet-directive#224
angular-ui · Dec 27, 2013 · 8abe8b4 · 8abe8b4
1 parent 8446fd7
commit 8abe8b4
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 57 deletions.
diff --git a/examples/tiles-example.html b/examples/tiles-example.html
@@ -1,64 +1,43 @@
 <!DOCTYPE html>
 <html ng-app="demoapp">
   <head>
-    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
+    <script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
     <script src="../dist/angular-leaflet-directive.min.js"></script>
 
-    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
-    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
-    <!--[if lte IE 8]>
-        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
-    <![endif]-->
+    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
+    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
     <script>
         angular.module("demoapp", ["leaflet-directive"]);
         function DemoController($scope) {
-            angular.extend($scope, {
-                london: {
-                    lat: 51.505,
-                    lng: -0.09,
-                    zoom: 8
+            var tilesDict = {
+                openstreetmap: {
+                    url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+                    options: {
+                        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                    }
                 },
-                tiles: {
+                opencyclemap: {
                     url: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
                     options: {
-                        opacity: 0.9,
-                        detectRetina: true,
-                        reuseTiles: true
+                        attribution: 'All maps &copy; <a href="http://www.opencyclemap.org">OpenCycleMap</a>, map data &copy; <a href="http://www.openstreetmap.org">OpenStreetMap</a> (<a href="http://www.openstreetmap.org/copyright">ODbL</a>'
                     }
                 }
-            });
-
-            $scope.changeToOpenCycleMaps = function() {
-                $scope.tiles.url = "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png";
-            };
-
-            $scope.changeToOpenStreetMaps = function() {
-                $scope.tiles.url = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
             };
-        };
-
-        function DemoZoomLevelController($scope)
-        {
 
             angular.extend($scope, {
                 london: {
                     lat: 51.505,
                     lng: -0.09,
-                    zoom: 10
+                    zoom: 8
                 },
-                tiles: {
-                    url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-
-                }
+                tiles: tilesDict.opencyclemap
             });
 
-            $scope.$watch("london.zoom", function(zoom) {
-                $scope.tiles.url = (zoom > 12)
-                        ? "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-                        : "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}";
-            });
-        }
+            $scope.changeTiles = function(tiles) {
+                $scope.tiles = tilesDict[tiles];
+            };
+        };
     </script>
     <style>
         .angular-leaflet-map {
@@ -77,8 +56,8 @@ <h2>This is a map that can change tiles by demand</h2>
 
           <div class="row">
               <p>
-              <button ng-click="changeToOpenCycleMaps()" class="btn btn-default">OpenCycleMaps</button>
-              <button ng-click="changeToOpenStreetMaps()" class="btn btn-default">OpenStreetMaps</button>
+              <button ng-click="changeTiles('opencyclemap')" class="btn btn-default">OpenCycleMaps</button>
+              <button ng-click="changeTiles('openstreetmap')" class="btn btn-default">OpenStreetMaps</button>
               </p>
           </div>
 
@@ -90,22 +69,6 @@ <h2>This is a map that can change tiles by demand</h2>
             <leaflet center="london" tiles="tiles" defaults="defaults"></leaflet>
           </div>
       </div>
-
-      <div ng-controller="DemoZoomLevelController">
-
-          <div class="row">
-              <h2>This is a map with dynamic tile change depending on zoom level</h2>
-          </div>
-
-          <div class="row">
-              <p>Current TileLayer Url: {{ tiles.url }}</p>
-              <p>Current Zoom Level: {{ london.zoom }}</p>
-          </div>
-
-          <div class="row">
-              <leaflet center="london" tiles="tiles"></leaflet>
-          </div>
-      </div>
   </div>
 
   </body>

diff --git a/examples/tiles-zoom-changer-example.html b/examples/tiles-zoom-changer-example.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html ng-app="demoapp">
+  <head>
+    <script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
+    <script src="../dist/angular-leaflet-directive.min.js"></script>
+
+    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
+    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
+    <script>
+        var app = angular.module("demoapp", ["leaflet-directive"]);
+        app.controller('DemoZoomLevelController', [ "$scope", function($scope) {
+
+            angular.extend($scope, {
+                london: {
+                    lat: 51.505,
+                    lng: -0.09,
+                    zoom: 10
+                },
+                tiles: {
+                    url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+
+                }
+            });
+
+            $scope.$watch("london.zoom", function(zoom) {
+                $scope.tiles.url = (zoom > 12)
+                        ? "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                        : "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}";
+            });
+        } ]);
+    </script>
+    <style>
+        .angular-leaflet-map {
+            width: 640px;
+            height: 400px;
+        }
+    </style>
+  </head>
+  <body>
+  <div class="container">
+      <div ng-controller="DemoZoomLevelController">
+
+          <div class="row">
+              <h2>This is a map with dynamic tile change depending on zoom level</h2>
+          </div>
+
+          <div class="row">
+              <p>Current TileLayer Url: {{ tiles.url }}</p>
+              <p>Current Zoom Level: {{ london.zoom }}</p>
+          </div>
+
+          <div class="row">
+              <leaflet center="london" tiles="tiles"></leaflet>
+          </div>
+      </div>
+  </div>
+
+  </body>
+</html>
diff --git a/test/e2e/07-tiles-example.js b/test/e2e/07-tiles-example.js
@@ -0,0 +1,23 @@
+'use strict';
+
+describe('Loading tiles-example.html', function() {
+
+    var ptor, driver;
+    beforeEach(function() {
+        ptor = protractor.getInstance();
+        browser.get('tiles-example.html');
+        driver = ptor.driver;
+    });
+
+    it('should update the map tiles if clicked on the tiles changer buttons', function() {
+        ptor.wait(function() {
+            return ptor.isElementPresent(by.css('img.leaflet-tile-loaded'));
+        });
+
+        expect(ptor.isElementPresent(by.xpath('//img[contains(@src, "http://b.tile.opencyclemap.org")]'))).toBe(true);
+
+        element(by.xpath('//button[text()="OpenStreetMaps"]')).click().then(function() {
+            expect(ptor.isElementPresent(by.xpath('//img[contains(@src, "http://b.tile.openstreetmap.org")]'))).toBe(true);
+        });
+    });
+});
diff --git a/test/e2e/08-tiles-zoom-changer-example.js b/test/e2e/08-tiles-zoom-changer-example.js
@@ -0,0 +1,34 @@
+'use strict';
+
+describe('Loading tiles-zoom-changer-example.html', function() {
+
+    var ptor, driver;
+    beforeEach(function() {
+        ptor = protractor.getInstance();
+        browser.get('tiles-zoom-changer-example.html');
+        driver = ptor.driver;
+    });
+
+    it('should update the map tiles if zoom in the map', function() {
+        ptor.wait(function() {
+            return ptor.isElementPresent(by.css('img.leaflet-tile-loaded'));
+        });
+
+        expect(ptor.isElementPresent(by.xpath('//img[contains(@src, "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/")]'))).toBe(true);
+        var zoomin = element(by.xpath('.//*[@title="Zoom in"]'));
+
+        zoomin.click().then(function() {
+            ptor.sleep(300);
+            zoomin.click().then(function() {
+                ptor.sleep(300);
+                zoomin.click().then(function() {
+                    ptor.wait(function() {
+                        return ptor.isElementPresent(by.xpath('//img[contains(@src, "http://a.tile.openstreetmap.org/")]'));
+                    });
+
+                    expect(ptor.isElementPresent(by.xpath('//img[contains(@src, "http://a.tile.openstreetmap.org/")]'))).toBe(true);
+                });
+            });
+        });
+    });
+});