added test/example page to show loading other modules

resolves #106 also updated title of Layer Events test page
Esri · Oct 6, 2015 · 3aa94c3 · 3aa94c3
1 parent c21f782
commit 3aa94c3
Show file tree

Hide file tree

Showing 7 changed files with 246 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -40,6 +40,8 @@ Added an example page showing how to add/remove layers from a map. [061ed936](ht
 
 Added an example page (feature-layer-events) showing how to interact with the esriFeatureLayer directive's attributes for layer load and update-end events. [#103](https://github.com/Esri/angular-esri-map/issues/103)
 
+Added an example page (other-esri-modules) showing how to use other Esri modules that we have not included directives for (such as graphics, symbols, toolbars, etc.). [#106](https://github.com/Esri/angular-esri-map/issues/106)
+
 ### Tests
 
 Added functional testing using [Protractor](https://angular.github.io/protractor/#/). [#82](https://github.com/Esri/angular-esri-map/pull/82), [#94](https://github.com/Esri/angular-esri-map/pull/94), [#112](https://github.com/Esri/angular-esri-map/pull/112)

diff --git a/docs/app/appConfig.js b/docs/app/appConfig.js
@@ -150,6 +150,17 @@
                 templateUrl: urlPrefixes.routeTemplateUrl + 'no-basemap.html',
                 controller: 'NoBasemapCtrl'
             }
+        }, {
+            toc: {
+                title: 'Other Esri Modules',
+                description: 'Shows how to use other Esri modules that we have not included directives for (such as graphics, symbols, toolbars, etc.).',
+                url: urlPrefixes.templateHref + 'other-esri-modules'
+            },
+            route: {
+                path: urlPrefixes.routePath + 'other-esri-modules',
+                templateUrl: urlPrefixes.routeTemplateUrl + 'other-esri-modules.html',
+                controller: 'OtherEsriModulesController'
+            }
         }]
     };
 

diff --git a/docs/app/examples/other-esri-modules.html b/docs/app/examples/other-esri-modules.html
@@ -0,0 +1,19 @@
+<h2>Other Esri Modules</h2>
+<!-- add map to page and bind to scope map parameters -->
+<esri-map id="map" map-options="{ basemap: 'streets', center: [-25.312, 34.307], zoom: 3 }" load="initToolbar">
+</esri-map>
+<p>Select a shape then draw on map to add graphic</p>
+<div>
+    <button ng-click="activeTool = 'Point'">Point</button>
+    <button ng-click="activeTool = 'Multipoint'">Multipoint</button>
+    <button ng-click="activeTool = 'Line'">Line</button>
+    <button ng-click="activeTool = 'Polyline'">Polyline</button>
+    <button ng-click="activeTool = 'FreehandPolyline'">Freehand Polyline</button>
+    <button ng-click="activeTool = 'Triangle'">Triangle</button>
+    <button ng-click="activeTool = 'Extent'">Rectangle</button>
+    <button ng-click="activeTool = 'Circle'">Circle</button>
+    <button ng-click="activeTool = 'Ellipse'">Ellipse</button>
+    <button ng-click="activeTool = 'Polygon'">Polygon</button>
+    <button ng-click="activeTool = 'FreehandPolygon'">Freehand Polygon</button>
+</div>
+<p>Based on <a href="https://developers.arcgis.com/javascript/jssamples/graphics_add.html">this sample.</a></p>
diff --git a/docs/app/examples/other-esri-modules.js b/docs/app/examples/other-esri-modules.js
@@ -0,0 +1,86 @@
+'use strict';
+
+angular.module('esri-map-docs')
+    .controller('OtherEsriModulesController', function($scope, esriLoader) {
+
+        // this example requires other Esri modules like graphics, symbols, and toolbars
+        // so we load them up front using the esriLoader
+        esriLoader.require([
+            'esri/toolbars/draw',
+            'esri/symbols/SimpleMarkerSymbol', 'esri/symbols/SimpleLineSymbol',
+            'esri/symbols/PictureFillSymbol', 'esri/symbols/CartographicLineSymbol',
+            'esri/graphic',
+            'esri/Color'
+        ], function(
+            Draw,
+            SimpleMarkerSymbol, SimpleLineSymbol,
+            PictureFillSymbol, CartographicLineSymbol,
+            Graphic,
+            Color
+        ) {
+
+            var map, tb;
+
+            // markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples
+            var markerSymbol = new SimpleMarkerSymbol();
+            markerSymbol.setPath('M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z');
+            markerSymbol.setColor(new Color('#00FFFF'));
+
+            // lineSymbol used for freehand polyline, polyline and line.
+            var lineSymbol = new CartographicLineSymbol(
+                CartographicLineSymbol.STYLE_SOLID,
+                new Color([255, 0, 0]), 10,
+                CartographicLineSymbol.CAP_ROUND,
+                CartographicLineSymbol.JOIN_MITER, 5
+            );
+
+            // fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol
+            // the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png
+            var fillSymbol = new PictureFillSymbol(
+                // 'images/mangrove.png',
+                'http://developers.arcgis.com/javascript/samples/graphics_add/images/mangrove.png',
+                new SimpleLineSymbol(
+                    SimpleLineSymbol.STYLE_SOLID,
+                    new Color('#000'),
+                    1
+                ),
+                42,
+                42
+            );
+
+            // get a local reference to the map object once it's loaded
+            // and initialize the drawing toolbar
+            $scope.initToolbar = function (mapObj) {
+                map = mapObj;
+                tb = new Draw(map);
+                tb.on('draw-end', addGraphic);
+
+                // set the active tool once a button is clicked
+                $scope.$watch('activeTool', function(newVal, oldVal) {
+                    if (newVal !== oldVal) {
+                        var tool = newVal.toLowerCase();
+                        map.disableMapNavigation();
+                        tb.activate(tool);
+                    }
+                });
+            };
+
+            function addGraphic(evt) {
+                //deactivate the toolbar and clear existing graphics
+                tb.deactivate();
+                map.enableMapNavigation();
+
+                // figure out which symbol to use
+                var symbol;
+                if (evt.geometry.type === 'point' || evt.geometry.type === 'multipoint') {
+                    symbol = markerSymbol;
+                } else if (evt.geometry.type === 'line' || evt.geometry.type === 'polyline') {
+                    symbol = lineSymbol;
+                } else {
+                    symbol = fillSymbol;
+                }
+
+                map.graphics.add(new Graphic(evt.geometry, symbol));
+            }
+        });
+    });
diff --git a/docs/index.html b/docs/index.html
@@ -115,6 +115,7 @@ <h3 class="text-muted">angular-esri-map</h3>
     <script type="text/javascript" src="app/examples/registry-pattern.js"></script>
     <script type="text/javascript" src="app/examples/additional-map-options.js"></script>
     <script type="text/javascript" src="app/examples/no-basemap.js"></script>
+    <script type="text/javascript" src="app/examples/other-esri-modules.js"></script>
 
     <!-- google analytics -->
     <script>

diff --git a/test/layer-events.html b/test/layer-events.html
@@ -3,7 +3,7 @@
     <head>
         <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
         <meta charset="utf-8">
-        <title>Feature Layer Events</title>
+        <title>Layer Events</title>
 
         <!-- load Esri CSS -->
         <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.11/esri/css/esri.css">

diff --git a/test/other-esri-modules.html b/test/other-esri-modules.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html ng-app="esri-map-example">
+    <head>
+        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
+        <meta charset="utf-8">
+        <title>Other Esri Modules</title>
+
+        <!-- load Esri CSS -->
+        <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.11/esri/css/esri.css">
+    </head>
+    <body ng-controller="MapController">
+        <h2>Other Esri Modules</h2>
+        <!-- add map to page and bind to scope map parameters -->
+        <esri-map id="map" map-options="{ basemap: 'streets', center: [-25.312, 34.307], zoom: 3 }" load="initToolbar">
+        </esri-map>
+        <p>Select a shape then draw on map to add graphic</p>
+        <div>
+            <button ng-click="activeTool = 'Point'">Point</button>
+            <button ng-click="activeTool = 'Multipoint'">Multipoint</button>
+            <button ng-click="activeTool = 'Line'">Line</button>
+            <button ng-click="activeTool = 'Polyline'">Polyline</button>
+            <button ng-click="activeTool = 'FreehandPolyline'">Freehand Polyline</button>
+            <button ng-click="activeTool = 'Triangle'">Triangle</button>
+            <button ng-click="activeTool = 'Extent'">Rectangle</button>
+            <button ng-click="activeTool = 'Circle'">Circle</button>
+            <button ng-click="activeTool = 'Ellipse'">Ellipse</button>
+            <button ng-click="activeTool = 'Polygon'">Polygon</button>
+            <button ng-click="activeTool = 'FreehandPolygon'">Freehand Polygon</button>
+        </div>
+        <p>Based on <a href="https://developers.arcgis.com/javascript/jssamples/graphics_add.html">this sample.</a></p>
+        <!-- load Esri JavaScript API -->
+        <script type="text/javascript" src="http://js.arcgis.com/3.11compact"></script>
+        <!-- load Angular -->
+        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
+        <!-- load angular-esri-map directives -->
+        <script src="lib/angular-esri-map.js"></script>
+        <!-- run example app controller -->
+        <script type="text/javascript">
+            'use strict';
+            angular.module('esri-map-example', ['esri.map'])
+                .controller('MapController', function($scope, esriLoader) {
+
+                    // this example requires other Esri modules like graphics, symbols, and toolbars
+                    // so we load them up front using the esriLoader
+                    esriLoader.require([
+                        'esri/toolbars/draw',
+                        'esri/symbols/SimpleMarkerSymbol', 'esri/symbols/SimpleLineSymbol',
+                        'esri/symbols/PictureFillSymbol', 'esri/symbols/CartographicLineSymbol',
+                        'esri/graphic',
+                        'esri/Color'
+                    ], function(
+                        Draw,
+                        SimpleMarkerSymbol, SimpleLineSymbol,
+                        PictureFillSymbol, CartographicLineSymbol,
+                        Graphic,
+                        Color
+                    ) {
+
+                        var map, tb;
+
+                        // markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples
+                        var markerSymbol = new SimpleMarkerSymbol();
+                        markerSymbol.setPath('M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z');
+                        markerSymbol.setColor(new Color('#00FFFF'));
+
+                        // lineSymbol used for freehand polyline, polyline and line.
+                        var lineSymbol = new CartographicLineSymbol(
+                            CartographicLineSymbol.STYLE_SOLID,
+                            new Color([255, 0, 0]), 10,
+                            CartographicLineSymbol.CAP_ROUND,
+                            CartographicLineSymbol.JOIN_MITER, 5
+                        );
+
+                        // fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol
+                        // the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png
+                        var fillSymbol = new PictureFillSymbol(
+                            // 'images/mangrove.png',
+                            'http://developers.arcgis.com/javascript/samples/graphics_add/images/mangrove.png',
+                            new SimpleLineSymbol(
+                                SimpleLineSymbol.STYLE_SOLID,
+                                new Color('#000'),
+                                1
+                            ),
+                            42,
+                            42
+                        );
+
+                        // get a local reference to the map object once it's loaded
+                        // and initialize the drawing toolbar
+                        $scope.initToolbar = function (mapObj) {
+                            map = mapObj;
+                            tb = new Draw(map);
+                            tb.on('draw-end', addGraphic);
+
+                            // set the active tool once a button is clicked
+                            $scope.$watch('activeTool', function(newVal, oldVal) {
+                                if (newVal !== oldVal) {
+                                    var tool = newVal.toLowerCase();
+                                    map.disableMapNavigation();
+                                    tb.activate(tool);
+                                }
+                            });
+                        };
+
+                        function addGraphic(evt) {
+                            //deactivate the toolbar and clear existing graphics
+                            tb.deactivate();
+                            map.enableMapNavigation();
+
+                            // figure out which symbol to use
+                            var symbol;
+                            if (evt.geometry.type === 'point' || evt.geometry.type === 'multipoint') {
+                                symbol = markerSymbol;
+                            } else if (evt.geometry.type === 'line' || evt.geometry.type === 'polyline') {
+                                symbol = lineSymbol;
+                            } else {
+                                symbol = fillSymbol;
+                            }
+
+                            map.graphics.add(new Graphic(evt.geometry, symbol));
+                        }
+                    });
+                });
+        </script>
+    </body>
+</html>