update layerInfos for web map; examples show legend

needed to set the layerInfos of the esriMap directive's controller after loading a web map in order to show correct layers. added legends to the web map example and test pages to show it working also updated "webmap" to "web map" wherever I could find it in the site
Esri · Sep 4, 2015 · 1d64834 · 1d64834
1 parent 97626ab
commit 1d64834
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 20 deletions.
diff --git a/dist/angular-esri-map.js b/dist/angular-esri-map.js
@@ -215,6 +215,9 @@
 
             // directive api
             controller: function($scope, $element, $attrs) {
+                // get a reference to the controller
+                var self = this;
+
                 // only do this once per directive
                 // this deferred will be resolved with the map
                 var mapDeferred = $q.defer();
@@ -274,14 +277,17 @@
                         arcgisUtils.createMap($attrs.webmapId, $attrs.id, {
                             mapOptions: mapOptions
                         }).then(function(response) {
+                            // update layer infos for legend
+                            self.layerInfos = arcgisUtils.getLegendLayers(response);
                             // add item info to scope
                             $scope.itemInfo = response.itemInfo;
-                            // TODO: update layer info for legend after loading web map?
+                            // resolve the promise with the map
                             mapDeferred.resolve(response.map);
                         });
                     } else {
                         // create a new map object
                         var map = new Map($attrs.id, mapOptions);
+                        // resolve the promise with the map
                         mapDeferred.resolve(map);
                     }
 

diff --git a/dist/angular-esri-map.min.js b/dist/angular-esri-map.min.js
diff --git a/docs/app/examples/examples.html b/docs/app/examples/examples.html
@@ -8,9 +8,9 @@ <h4><a ng-href="#/examples/simple-map">Simple map</a>
         </h4>
         <p>Create a map by loading center, zoom, and basemap from an options object.</p>
 
-        <h4><a ng-href="#/examples/web-map">Webmap</a>
+        <h4><a ng-href="#/examples/web-map">Web map</a>
         </h4>
-        <p>Load a webmap from ArcGIS Online and show changes to center and zoom level via bound scope properties.</p>
+        <p>Load a web map from ArcGIS Online and show changes to center and zoom level via bound scope properties.</p>
 
         <h4><a ng-href="#/examples/basemap">Set basemap</a>
         </h4>

diff --git a/docs/app/examples/legend.html b/docs/app/examples/legend.html
@@ -10,7 +10,7 @@ <h2>Legend Example</h2>
         <p>Lat: {{ map.center.lat | number:3 }}, Lng: {{ map.center.lng | number:3 }}, Zoom: {{map.zoom}}</p>
         <p>Based on <a href="https://developers.arcgis.com/javascript/jssamples/widget_legend.html">this sample</a>.</p>
     </div>
-    <div class="col-xs-4 col-sm-3 col-lg-2">
+    <div class="col-xs-4 col-sm-3 col-lg-2" style="overflow: auto; max-height: 400px;">
         <div id="legend"></div>
     </div>
 </div>
diff --git a/docs/app/examples/web-map.html b/docs/app/examples/web-map.html
@@ -1,10 +1,18 @@
-<h2>Webmap Example: {{itemInfo.item.title}}</h2>
+<h2>Web Map Example: {{itemInfo.item.title}}</h2>
 <!-- add map to page and bind to scope map parameters -->
-<esri-map id="map" register-as="myMap" webmap-id="8e42e164d4174da09f61fe0d3f206641" center="map.center" zoom="map.zoom" item-info="itemInfo" load="mapLoaded">
-</esri-map>
-<p>Lat: {{ map.center.lat | number:3 }}, Lng: {{ map.center.lng | number:3 }}, Zoom: {{map.zoom}}</p>
 <p ng-bind-html="itemInfo.item.snippet"></p>
-<p>
-    <button ng-repeat="bookmark in itemInfo.itemData.bookmarks" ng-click="goToBookmark(bookmark)">{{bookmark.name}}</button>
-</p>
-<p>Based on <a href="https://developers.arcgis.com/javascript/jssamples/ags_createwebmapid.html">this sample</a>.</p>
+<div class="row">
+    <div class="col-xs-8 col-sm-9 col-lg-10">
+        <esri-map id="map" webmap-id="8e42e164d4174da09f61fe0d3f206641" center="map.center" zoom="map.zoom" item-info="itemInfo" load="mapLoaded">
+            <div esri-legend target-id="legend"></div>
+        </esri-map>
+        <p>Lat: {{ map.center.lat | number:3 }}, Lng: {{ map.center.lng | number:3 }}, Zoom: {{map.zoom}}</p>
+        <p>
+            <button ng-repeat="bookmark in itemInfo.itemData.bookmarks" ng-click="goToBookmark(bookmark)">{{bookmark.name}}</button>
+        </p>
+        <p>Based on <a href="https://developers.arcgis.com/javascript/jssamples/ags_createwebmapid.html">this sample</a>.</p>
+    </div>
+    <div class="col-xs-4 col-sm-3 col-lg-2" style="overflow: auto; max-height: 400px;">
+        <div id="legend"></div>
+    </div>
+</div>
diff --git a/src/directives/esriMap.js b/src/directives/esriMap.js
@@ -54,6 +54,9 @@
 
             // directive api
             controller: function($scope, $element, $attrs) {
+                // get a reference to the controller
+                var self = this;
+
                 // only do this once per directive
                 // this deferred will be resolved with the map
                 var mapDeferred = $q.defer();
@@ -113,14 +116,17 @@
                         arcgisUtils.createMap($attrs.webmapId, $attrs.id, {
                             mapOptions: mapOptions
                         }).then(function(response) {
+                            // update layer infos for legend
+                            self.layerInfos = arcgisUtils.getLegendLayers(response);
                             // add item info to scope
                             $scope.itemInfo = response.itemInfo;
-                            // TODO: update layer info for legend after loading web map?
+                            // resolve the promise with the map
                             mapDeferred.resolve(response.map);
                         });
                     } else {
                         // create a new map object
                         var map = new Map($attrs.id, mapOptions);
+                        // resolve the promise with the map
                         mapDeferred.resolve(map);
                     }
 

diff --git a/test/web-map.html b/test/web-map.html
@@ -3,7 +3,7 @@
     <head>
         <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
         <meta charset="utf-8">
-        <title>Webmap Example</title>
+        <title>Web Map Example</title>
 
         <!-- dijit theme only needed for chart tooltip in popup in this web map -->
         <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
@@ -17,7 +17,7 @@
         </style>
     </head>
     <body ng-controller="MapController" class="claro">
-        <h2>Webmap Example: {{itemInfo.item.title}}
+        <h2>Web Map Example: {{itemInfo.item.title}}
             <small>
             <a ng-init="isCollapsed=true" ng-click="isCollapsed = !isCollapsed">
                 <span ng-show="isCollapsed">+info</span>
@@ -26,10 +26,18 @@ <h2>Webmap Example: {{itemInfo.item.title}}
             </small>
         </h2>
         <div ng-hide="isCollapsed" ng-bind-html="itemInfo.item.snippet"></div>
-        <!-- add map to page and bind to scope map parameters -->
-        <esri-map id="map" register-as="myMap" webmap-id="4778fee6371d4e83a22786029f30c7e1" center="map.center" zoom="map.zoom" item-info="itemInfo" load="mapLoaded">
-        </esri-map>
-        <p>Lat: {{ map.center.lat | number:3 }}, Lng: {{ map.center.lng | number:3 }}, Zoom: {{map.zoom}}</p>
+        <div style="width: 800px">
+            <!-- add map to page and bind to scope map parameters -->
+            <div style="width: 600px; float:left;">
+                <esri-map id="map" webmap-id="4778fee6371d4e83a22786029f30c7e1" center="map.center" zoom="map.zoom" item-info="itemInfo" load="mapLoaded">
+                    <div esri-legend target-id="legend"></div>
+                </esri-map>
+            </div>
+            <div style="width: 200px; float: right; max-height: 400px; overflow: auto;">
+                <div id="legend"></div>
+            </div>
+        </div>
+        <p style="clear: both;">Lat: {{ map.center.lat | number:3 }}, Lng: {{ map.center.lng | number:3 }}, Zoom: {{map.zoom}}</p>
         <div>
             <button ng-repeat="bookmark in itemInfo.itemData.bookmarks" ng-click="goToBookmark(bookmark)">{{bookmark.name}}</button>
         </div>