Examples showing how to use the angular-esri-map directives.
-While these directives can be used, we intend this to be used as an example for building your own - application-specific directives.
-Simplest possible map - simply setting the
- -Loading webmaps from ArcGIS Online
- -Shows how to use angular binding to link a select list to the basemap property of the map.
- -Demonstrates two-way binding of the center, and zoom properties.
-Loads two feature layers into the map.
- -Add a legend via to the map. Also shows a directive that is not an element.
- -Shows how to listen for events raised by the map directive.
-If you've read this far, you will have 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.
-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 & 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. -
-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. -
-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...
-
-<parcel-map pin="ABC123"></parcel-map>
-<lot-layout-map lot="93920-A-23"></lot-layout-map>
-<workorder-map order="10-31-14-002"></workorder-map>
- These directives could be easily integrated into any views in the over-arching application, or even shared across a suite of applications. -
- -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. -
-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. -
-So, as the old saying goes use the right tool for the job!
-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.
+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 & 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. +
+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.
+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. +
+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...
+
+<parcel-map pin="ABC123"></parcel-map>
+<lot-layout-map lot="93920-A-23"></lot-layout-map>
+<workorder-map order="10-31-14-002"></workorder-map>
+ These directives could be easily integrated into any views in the over-arching application, or even shared across a suite of applications. +
+ +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. +
+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. +
+So, as the old saying goes + use the right tool for the job! +
+Basemap: + + Lat: {{ map.center.lat | number:3 }}, Lng: {{ map.center.lng | number:3 }}, Zoom: {{map.zoom}} +
+Based on this sample.
diff --git a/docs/app/examples/basemap.js b/docs/app/examples/basemap.js new file mode 100644 index 0000000..c0ede23 --- /dev/null +++ b/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' + }; + }); diff --git a/docs/app/examples/center-and-zoom.html b/docs/app/examples/center-and-zoom.html new file mode 100644 index 0000000..bdfe968 --- /dev/null +++ b/docs/app/examples/center-and-zoom.html @@ -0,0 +1,13 @@ ++ Lat: + Lng: + , Zoom: + + + +
diff --git a/docs/app/examples/center-and-zoom.js b/docs/app/examples/center-and-zoom.js new file mode 100644 index 0000000..5b44d66 --- /dev/null +++ b/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; + } + }); diff --git a/docs/app/examples/examples.html b/docs/app/examples/examples.html new file mode 100644 index 0000000..d04c119 --- /dev/null +++ b/docs/app/examples/examples.html @@ -0,0 +1,37 @@ +Examples showing how to use the angular-esri-map directives.
+Simplest possible map - simply setting the
+ +Loading webmaps from ArcGIS Online
+ +Shows how to use angular binding to link a select list to the basemap property of the map.
+ +Demonstrates two-way binding of the center, and zoom properties.
+Loads two feature layers into the map.
+ +Add a legend via to the map. Also shows a directive that is not an element.
+ +Shows how to listen for events raised by the map directive.
+Lat: {{ map.center.lat | number:3 }}, Lng: {{ map.center.lng | number:3 }}, Zoom: {{map.zoom}}
+Based on this JS Fiddle.
diff --git a/docs/app/examples/feature-layers.js b/docs/app/examples/feature-layers.js new file mode 100644 index 0000000..c9703b3 --- /dev/null +++ b/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 + }; + }); diff --git a/docs/app/examples/legend.html b/docs/app/examples/legend.html new file mode 100644 index 0000000..7c61059 --- /dev/null +++ b/docs/app/examples/legend.html @@ -0,0 +1,16 @@ +Lat: {{ map.center.lat | number:3 }}, Lng: {{ map.center.lng | number:3 }}, Zoom: {{map.zoom}}
+Based on this sample.
+The map is + notloaded.
+Extent: {{ map.extent.toJson() }}
diff --git a/docs/app/examples/map-events.js b/docs/app/examples/map-events.js new file mode 100644 index 0000000..10bc69f --- /dev/null +++ b/docs/app/examples/map-events.js @@ -0,0 +1,34 @@ +'use strict'; + +angular.module('esri-map-docs') + .controller('MapEventsCtrl', function($scope, esriRegistry) { + $scope.$parent.page = 'examples'; + $scope.map = { + center: { + lng: -122.45, + lat: 37.75 + }, + zoom: 13, + loaded: false, + }; + // one way to get a reference to the map is to + // set a handler for the map directive's load attribute + $scope.mapLoaded = function(map) { + // now you have a reference to the map + // that you can do whatever you want with + console.log(map); + $scope.map.loaded = true; + }; + // another way is to set the register-as attribute on the directive + // and then use the esriRegistry to get the map by name + esriRegistry.get('myMap').then(function(map) { + map.on('click', function(e) { + console.log('map click', e); + }); + }); + // the map directive also exposes an extent-change attribute + $scope.extentChanged = function(e) { + // now you have a reference to the extent + $scope.map.extent = e.extent; + }; + }); diff --git a/docs/app/examples/simple-map.html b/docs/app/examples/simple-map.html new file mode 100644 index 0000000..3093872 --- /dev/null +++ b/docs/app/examples/simple-map.html @@ -0,0 +1,6 @@ +Lat: {{ map.center.lat | number:3 }}, Lng: {{ map.center.lng | number:3 }}, Zoom: {{map.zoom}}
+Based on this sample.
diff --git a/docs/app/examples/simple-map.js b/docs/app/examples/simple-map.js new file mode 100644 index 0000000..a474cca --- /dev/null +++ b/docs/app/examples/simple-map.js @@ -0,0 +1,13 @@ +'use strict'; + +angular.module('esri-map-docs') + .controller('SimpleMapCtrl', function($scope) { + $scope.$parent.page = 'examples'; + $scope.map = { + center: { + lng: -122.45, + lat: 37.75 + }, + zoom: 13 + }; + }); diff --git a/docs/app/examples/web-map.html b/docs/app/examples/web-map.html new file mode 100644 index 0000000..9112bca --- /dev/null +++ b/docs/app/examples/web-map.html @@ -0,0 +1,17 @@ +Lat: {{ map.center.lat | number:3 }}, Lng: {{ map.center.lng | number:3 }}, Zoom: {{map.zoom}}
++ +
+Based on this sample.
diff --git a/docs/app/examples/web-map.js b/docs/app/examples/web-map.js new file mode 100644 index 0000000..f7caabd --- /dev/null +++ b/docs/app/examples/web-map.js @@ -0,0 +1,21 @@ +'use strict'; + +angular.module('esri-map-docs') + .controller('WebMapCtrl', function($scope, esriLoader, esriRegistry) { + $scope.$parent.page = 'examples'; + $scope.map = { + center: { + lng: -122.45, + lat: 37.75 + }, + zoom: 13 + }; + $scope.goToBookmark = function(bookmark) { + esriRegistry.get('myMap').then(function(map) { + esriLoader('esri/geometry/Extent').then(function(Extent) { + var extent = new Extent(bookmark.extent); + map.setExtent(extent); + }); + }); + }; + }); diff --git a/docs/images/jumbotron-background.jpg b/docs/images/jumbotron-background.jpg new file mode 100644 index 0000000..33b206a Binary files /dev/null and b/docs/images/jumbotron-background.jpg differ diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..023c116 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,67 @@ + + + + + + +