new add/remove layers example page

Esri · Oct 3, 2015 · 061ed93 · 061ed93
1 parent 71a3297
commit 061ed93
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 18 deletions.
diff --git a/docs/app/appConfig.js b/docs/app/appConfig.js
@@ -84,6 +84,17 @@
                 templateUrl: urlPrefixes.routeTemplateUrl + 'legend.html',
                 controller: 'LegendCtrl'
             }
+        }, {
+            toc: {
+                title: 'Add / Remove Layers',
+                description: 'Shows how to add/remove layers to/from the map.',
+                url: urlPrefixes.templateHref + 'add-remove-layers'
+            },
+            route: {
+                path: urlPrefixes.routePath + 'add-remove-layers',
+                templateUrl: urlPrefixes.routeTemplateUrl + 'add-remove-layers.html',
+                controller: 'AddRemoveLayersCtrl'
+            }
         }, {
             toc: {
                 title: 'Map Events',

diff --git a/docs/app/examples/add-remove-layers.html b/docs/app/examples/add-remove-layers.html
@@ -0,0 +1,14 @@
+<h2>Add/Remove Layers</h2>
+<!-- add map to page -->
+<esri-map id="map" map-options="{
+                center: [-122.676207, 45.523452],
+                zoom: 12,
+                basemap: 'topo'
+            }">
+    <!-- watch list of selected layers and add/remove each to/from the map -->
+    <esri-feature-layer ng-repeat="url in selectedLayers" url="{{url}}"></esri-feature-layer>
+</esri-map>
+<p>Click the checkbox next to each layer to add or remove it to/from the map.</p>
+<div ng-repeat="layer in layers">
+    <input type="checkbox" ng-model="selected" ng-change="toggleLayer(layer.url)" /> {{layer.name}} <br />
+</div>
diff --git a/docs/app/examples/add-remove-layers.js b/docs/app/examples/add-remove-layers.js
@@ -0,0 +1,31 @@
+'use strict';
+
+angular.module('esri-map-docs')
+    .controller('AddRemoveLayersCtrl', function($scope) {
+        // list of layers that can be added to the map
+        $scope.layers = [
+            {
+                name: 'Heritage Trees',
+                url: 'http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0'
+            },
+            {
+                name: 'Parks',
+                url: 'http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Portland_Parks/FeatureServer/0'
+            }
+        ];
+
+        // list of layers currently added to the map
+        $scope.selectedLayers = [];
+
+        // add/remove a layer to/from the map by URL
+        $scope.toggleLayer = function (url) {
+            console.log('Toggling ' + url);
+            var index = $scope.selectedLayers.indexOf(url);
+            if (index >= 0) {
+                $scope.selectedLayers.splice(index, 1);
+            } else {
+                $scope.selectedLayers.push(url);
+            }
+            console.log('Selected layers: ' + $scope.selectedLayers);
+        };
+    });
diff --git a/docs/index.html b/docs/index.html
@@ -107,6 +107,7 @@ <h3 class="text-muted">angular-esri-map</h3>
     <script type="text/javascript" src="app/examples/feature-layers.js"></script>
     <script type="text/javascript" src="app/examples/dynamic-map-service-layer.js"></script>
     <script type="text/javascript" src="app/examples/legend.js"></script>
+    <script type="text/javascript" src="app/examples/add-remove-layers.js"></script>
     <script type="text/javascript" src="app/examples/set-basemap.js"></script>
     <script type="text/javascript" src="app/examples/set-center-zoom.js"></script>
     <script type="text/javascript" src="app/examples/map-events.js"></script>

diff --git a/test/add-remove-layers.html b/test/add-remove-layers.html
@@ -10,19 +10,19 @@
     </head>
     <body ng-controller="MapController">
         <h2>Add/Remove Layers</h2>
-        <!-- add map to page and bind to scope map parameters -->
-        <esri-map id="map" center="map.center" zoom="map.zoom" basemap="topo">
+        <!-- add map to page -->
+        <esri-map id="map" map-options="{
+                        center: [-122.676207, 45.523452],
+                        zoom: 12,
+                        basemap: 'topo'
+                    }">
+            <!-- watch list of selected layers and add/remove each to/from the map -->
             <esri-feature-layer ng-repeat="url in selectedLayers" url="{{url}}"></esri-feature-layer>
         </esri-map>
-        <p>Lat: {{ map.center.lat | number:3 }}, Lng: {{ map.center.lng | number:3 }}, Zoom: {{map.zoom}}</p>
-
-        <div>
-            <p>Layers</p>
-            <div ng-repeat="layer in layers">
-                <input type="checkbox" ng-model="selected" ng-change="toggleLayer(layer.url)" /> {{layer.name}} <br />
-            </div>
+        <p>Click the checkbox next to each layer to add or remove it to/from the map.</p>
+        <div ng-repeat="layer in layers">
+            <input type="checkbox" ng-model="selected" ng-change="toggleLayer(layer.url)" /> {{layer.name}} <br />
         </div>
-
         <!-- load Esri JavaScript API -->
         <script type="text/javascript" src="http://js.arcgis.com/3.11compact"></script>
         <!-- load Angular -->
@@ -34,14 +34,7 @@ <h2>Add/Remove Layers</h2>
             'use strict';
             angular.module('esri-map-example', ['esri.map'])
                 .controller('MapController', function ($scope) {
-                    $scope.map = {
-                        center: {
-                            lng: -122.676207,
-                            lat: 45.523452
-                        },
-                        zoom: 12
-                    };
-
+                    // list of layers that can be added to the map
                     $scope.layers = [
                         {
                             name: 'Heritage Trees',
@@ -53,8 +46,10 @@ <h2>Add/Remove Layers</h2>
                         }
                     ];
 
+                    // list of layers currently added to the map
                     $scope.selectedLayers = [];
 
+                    // add/remove a layer to/from the map by URL
                     $scope.toggleLayer = function (url) {
                         console.log('Toggling ' + url);
                         var index = $scope.selectedLayers.indexOf(url);