added routes for all examples to docs (gh-pages) app

re-named app to docs for clarity
added examples to docs as routes/controllers/views instead of standalone pages
moved standalone pages to examples folder
modified gulp configuration to handle all the above changes

.gitignore

@@ -1,5 +1,5 @@
 # built files under app folder
-app/scripts
+docs/lib
 
 # Logs
 logs

docs/app/about/about.html

@@ -0,0 +1,29 @@
+<div class="row">
+    <div class="col-lg-12">
+        <h1>Zen of Directives and Maps</h1>
+        <p>You have probably noticed that these are very, very simple directives. For example - there is no way to apply styles to the feature layers, nor is there support for any of the 20+ other layers supported by the Esri Javascript API. This was not and oversight, it was by design.</p>
+        <p>We feel that the value of directives (or web components for that matter) is to package up complex components, exposing a limited, simple declarative interface as html-elements &amp; attributes. Attempting to encapsulate all the layers, renderers, symbols and events of the JS API in a set of directives would simply add more bulk to the javascript, and create another complex api to learn and support.
+        </p>
+        <p>Instead, we are providing a small set of re-usable directives. If your applicaiton has modest mapping needs, these directives may be useful as-is. If your application makes use of some of the more advanced features of the Esri JavaScript API, then the directives in this repo should demonstrate the patterns that will help you create your own directives.</p>
+        <h2>Roll Your Own Directives</h2>
+        <p>We believe that you will have the best success integrating maps with your angular applications if you build directives that focus on your problem domain.
+        </p>
+        <p>For example - suppose you are building an application for a local government. There is a very good chance that you would be integrating a few standard types of maps. Using the examples provided in this repo you could create directives like...</p>
+        <pre><code>
+&lt;parcel-map pin=&quot;ABC123&quot;&gt;&lt;/parcel-map&gt;
+&lt;lot-layout-map lot=&quot;93920-A-23&quot;&gt;&lt;/lot-layout-map&gt;
+&lt;workorder-map order=&quot;10-31-14-002&quot;&gt;&lt;/workorder-map&gt;
+            </code></pre>
+        <p>These directives could be easily integrated into any views in the over-arching application, or even shared across a suite of applications.
+        </p>
+
+        <h2>Some thoughts on Angular...</h2>
+        <p>At Esri we use a number of differnt javascript application frameworks, including Angular. While we find that using Angular can lead to huge productivity increases, and massively streamlined code - it is worth noting that Angular is a silver bullet for all types of web applications.
+        </p>
+        <p>Where we have seen the greatest benefit is in situations where the majority of the application functionality is "forms-over-data", with a few maps added in. Similarly, when we have tried to use Angular on single-page, full-screen mapping applications, we have found ourselves working against the framework.
+        </p>
+        <p>So, as the old saying goes
+            <em>use the right tool for the job!</em>
+        </p>
+    </div>
+</div>

docs/app/about/about.js

@@ -0,0 +1,6 @@
+'use strict';
+
+angular.module('esri-map-docs')
+    .controller('AboutCtrl', function($scope) {
+        $scope.$parent.page = 'about';
+    });

docs/app/app.js

@@ -0,0 +1,47 @@
+(function(angular) {
+    'use strict';
+    angular
+        .module('esri-map-docs', ['ngRoute', 'ngSanitize', 'esri.map'])
+        .config(function($routeProvider) {
+            $routeProvider
+            .when('/examples', {
+                templateUrl: 'app/examples/examples.html',
+                controller: 'ExamplesCtrl'
+            })
+            .when('/examples/simple-map', {
+                templateUrl: 'app/examples/simple-map.html',
+                controller: 'SimpleMapCtrl'
+            })
+            .when('/examples/feature-layers', {
+                templateUrl: 'app/examples/feature-layers.html',
+                controller: 'FeatureLayersCtrl'
+            })
+            .when('/examples/web-map', {
+                templateUrl: 'app/examples/web-map.html',
+                controller: 'WebMapCtrl'
+            })
+            .when('/examples/legend', {
+                templateUrl: 'app/examples/legend.html',
+                controller: 'LegendCtrl'
+            })
+            .when('/examples/center-and-zoom', {
+                templateUrl: 'app/examples/center-and-zoom.html',
+                controller: 'CenterAndZoomCtrl'
+            })
+            .when('/examples/basemap', {
+                templateUrl: 'app/examples/basemap.html',
+                controller: 'BasemapCtrl'
+            })
+            .when('/examples/map-events', {
+                templateUrl: 'app/examples/map-events.html',
+                controller: 'MapEventsCtrl'
+            })
+            .when('/about', {
+                templateUrl: 'app/about/about.html',
+                controller: 'AboutCtrl'
+            })
+            .otherwise({
+                redirectTo: '/examples'
+            });
+        });
+})(angular);

docs/app/examples/basemap.html

@@ -0,0 +1,17 @@
+<h2>Basemap Example</h2>
+<esri-map id="map" center="map.center" zoom="map.zoom" basemap="{{map.basemap}}">
+</esri-map>
+<p>Basemap:
+    <select ng-model="map.basemap">
+        <option value="gray">Gray</option>
+        <option value="topo">Topographic</option>
+        <option value="streets">Streets</option>
+        <option value="satellite">Satellite</option>
+        <option value="hybrid">Hybrid</option>
+        <option value="oceans">Oceans</option>
+        <option value="national-geographic">National Geographic</option>
+        <option value="osm">Open Street Map</option>
+    </select>
+    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/map_agol.html">this sample</a>.</p>

docs/app/examples/basemap.js

@@ -0,0 +1,14 @@
+'use strict';
+
+angular.module('esri-map-docs')
+    .controller('BasemapCtrl', function($scope) {
+        $scope.$parent.page = 'examples';
+        $scope.map = {
+            center: {
+                lng: -31.036,
+                lat: 42.747
+            },
+            zoom: 3,
+            basemap: 'satellite'
+        };
+    });

docs/app/examples/center-and-zoom.html

@@ -0,0 +1,13 @@
+<h2>Set Map Center and Zoom</h2>
+<esri-map id="map" center="map.center" zoom="map.zoom" basemap="{{map.basemap}}">
+</esri-map>
+<p>
+    Lat:
+    <input type="number" step="any" ng-model="map.center.lat" />Lng:
+    <input type="number" step="any" ng-model="map.center.lng" />, Zoom:
+    <select ng-model="map.zoom">
+        <option ng-repeat="level in [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]">{{level}}</option>
+    </select>
+    <button ng-click="zoomToCity(cities.SanFrancisco)">San Francisco</button>
+    <button ng-click="zoomToCity(cities.NewYork)">New York</button>
+</p>

docs/app/examples/center-and-zoom.js

@@ -0,0 +1,31 @@
+'use strict';
+
+angular.module('esri-map-docs')
+    .controller('CenterAndZoomCtrl', function($scope) {
+        $scope.$parent.page = 'examples';
+        $scope.map = {
+            center: {
+                lng: -122.45,
+                lat: 37.75
+            },
+            zoom: 12,
+            basemap: 'topo'
+        };
+        $scope.cities = {
+            SanFrancisco: {
+                lng: -122.45,
+                lat: 37.75,
+                zoom: 10
+            },
+            NewYork: {
+                lng: -74.0059,
+                lat: 40.7127,
+                zoom: 12
+            }
+        };
+        $scope.zoomToCity = function(city) {
+            $scope.map.center.lat = city.lat;
+            $scope.map.center.lng = city.lng;
+            $scope.map.zoom = city.zoom;
+        }
+    });

docs/app/examples/examples.html

@@ -0,0 +1,37 @@
+<div class="jumbotron">
+    <h1>&lt;esri-map/&gt;</h1>
+    <p class="lead">Examples showing how to use the angular-esri-map directives.</p>
+</div>
+<div class="row marketing">
+    <div class="col-lg-6">
+        <h4><a ng-href="#/examples/simple-map">Simple map</a>
+        </h4>
+        <p>Simplest possible map - simply setting the</p>
+
+        <h4><a ng-href="#/examples/web-map">Webmap</a>
+        </h4>
+        <p>Loading webmaps from ArcGIS Online</p>
+
+        <h4><a ng-href="#/examples/basemap">Set basemap</a>
+        </h4>
+        <p>Shows how to use angular binding to link a select list to the basemap property of the map.</p>
+
+        <h4><a ng-href="#/examples/center-and-zoom">Set map center and zoom</a>
+        </h4>
+        <p>Demonstrates two-way binding of the center, and zoom properties.</p>
+    </div>
+
+    <div class="col-lg-6">
+        <h4><a ng-href="#/examples/feature-layers">Feature layers</a>
+        </h4>
+        <p>Loads two feature layers into the map.</p>
+
+        <h4><a ng-href="#/examples/legend">Legend</a>
+        </h4>
+        <p>Add a legend via to the map. Also shows a directive that is not an element.</p>
+
+        <h4><a ng-href="#/examples/map-events">Map events</a>
+        </h4>
+        <p>Shows how to listen for events raised by the map directive.</p>
+    </div>
+</div>

docs/app/examples/examples.js

@@ -0,0 +1,6 @@
+'use strict';
+
+angular.module('esri-map-docs')
+    .controller('ExamplesCtrl', function($scope) {
+        $scope.$parent.page = 'examples';
+    });

docs/app/examples/feature-layers.html

@@ -0,0 +1,8 @@
+<h2>Feature Layers Example</h2>
+<!-- add map to page and bind to scope map parameters -->
+<esri-map id="map" center="map.center" zoom="map.zoom" basemap="topo">
+    <esri-feature-layer url="http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Portland_Parks/FeatureServer/0"></esri-feature-layer>
+    <esri-feature-layer url="http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0"></esri-feature-layer>
+</esri-map>
+<p>Lat: {{ map.center.lat | number:3 }}, Lng: {{ map.center.lng | number:3 }}, Zoom: {{map.zoom}}</p>
+<p>Based on <a href="http://jsfiddle.net/patrickarlt/xy3nm1sq/1/">this JS Fiddle</a>.</p>

docs/app/examples/feature-layers.js

@@ -0,0 +1,13 @@
+'use strict';
+
+angular.module('esri-map-docs')
+    .controller('FeatureLayersCtrl', function($scope) {
+        $scope.$parent.page = 'examples';
+        $scope.map = {
+            center: {
+                lng: -122.676207,
+                lat: 45.523452
+            },
+            zoom: 12
+        };
+    });

docs/app/examples/legend.html

@@ -0,0 +1,16 @@
+<h2>Legend Example</h2>
+<!-- add map to page and bind to scope map parameters -->
+<div class="row">
+    <div class="col-md-9">
+        <esri-map id="map" center="map.center" zoom="map.zoom" basemap="topo" style="width: 100%">
+            <esri-feature-layer title="Rivers" url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/1"></esri-feature-layer>
+            <esri-feature-layer title="Water Bodies" url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/0"></esri-feature-layer>
+            <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>Based on <a href="https://developers.arcgis.com/javascript/jssamples/widget_legend.html">this sample</a>.</p>
+    </div>
+    <div class="col-md-3">
+        <div id="legend"></div>
+    </div>
+</div>

docs/app/examples/legend.js

@@ -0,0 +1,13 @@
+'use strict';
+
+angular.module('esri-map-docs')
+    .controller('LegendCtrl', function($scope) {
+        $scope.$parent.page = 'examples';
+        $scope.map = {
+            center: {
+                lng: -96.53,
+                lat: 38.374
+            },
+            zoom: 13
+        };
+    });

docs/app/examples/map-events.html

@@ -0,0 +1,7 @@
+<h2>Map Events Example</h2>
+<!-- add map to page and bind to scope map parameters -->
+<esri-map id="map" register-as="myMap" center="map.center" zoom="map.zoom" basemap="topo" load="mapLoaded" extent-change="extentChanged">
+</esri-map>
+<p>The map is
+    <strong ng-show="!map.loaded">not</strong>loaded.</p>
+<p>Extent: {{ map.extent.toJson() }}</p>