A collection of directives to help you use Esri maps and services in your Angular applications.
These directives can be used as-is if your mapping needs are simple, or as reference examples of the patterns that you can use to write your own directives that use the ArcGIS API for JavaScript. Read more...
Here are a few examples showing how you can use this module to bring Esri maps into your own Angular applications.
To use these directives in your own Angular application, first install the module as a dependency using bower:
bower install angular-esri-mapOr clone or download this repo and copy the desired module file (angular-esri-map.js or angular-esri-map.min.js) into your application.
Once you've added the module to your application, you can use the sample code below to use the map and feature layer directives. Just change the paths to point to the locations of the libraries in your environment and go.
<!DOCTYPE html>
<html ng-app="esri-map-example">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.12/esri/css/esri.css">
</head>
<body ng-controller="MapController">
<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>
<script type="text/javascript" src="http://js.arcgis.com/3.12compact"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="path/to/angular-esri-map.js"></script>
<script type="text/javascript">
angular.module('esri-map-example', ['esri.map'])
.controller('MapController', function ($scope) {
$scope.map = {
center: {
lng: -122.676207,
lat: 45.523452
},
zoom: 12
};
});
</script>
</body>
</html>See the documentation for examples of how to use the other directives.
Make sure you have Node and Gulp installed.
- Fork and clone this repo
cdinto theangular-esri-mapfolder- Install the dependencies with
npm install - run
gulpfrom the command line. This will run the linting and build commands and then start a local web server hosting the application under thedocsfolder - Modify the directive source files (under
src) or documentation (underdocs) and your browser will automatically reload as you save your changes - Make a pull request to contribute your changes
These directives were built using Angular v1.2 (specifically 1.2.16) and the ArcGIS API for JavaScript v3.11+. They will likely work with other verstions of those frameworks, but have not been tested outside of the above versions.
You will need Node and Gulp to do local development.
- Angular JS
- ArcGIS API for JavaScript
- ArcGIS for Developers
- ArcGIS REST API
- Importing Data Into Feature Services
- @Esri
Find a bug or want to request a new feature? Please let us know by submitting an issue. Thank you!
Anyone and everyone is welcome to contribute. Please see our guidelines for contributing.
Copyright 2014 Esri
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
A copy of the license is available in the repository's license.txt file.
[](Esri Tags: ArcGIS Web Mapping Angular Framework) [](Esri Language: JavaScript)