angular-esri-map
Advanced tools
A collection of directives to help you use Esri maps and services in your Angular applications
A collection of directives to help you use Esri maps and services in your AngularJS v1.x 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 examples and guides showing how you can use this module to bring Esri maps into your own AngularJS v1.x applications.
To use these directives in your own AngularJS v1.x application, first install the module as a dependency using any of the following methods.
<!-- load angular-esri-map from CDN -->
<script src="https://unpkg.com/angular-esri-map@1"></script>
# OR install via bower
bower install angular-esri-map
# OR install via npm
npm install angular-esri-map
Alternatively, you can 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 refer to the sample code below to use the <esri-map> directive. If you have downloaded or installed locally, point to the location of the module file in your environment (instead of CDN) and load the page in a browser.
<!DOCTYPE html>
<html ng-app="esri-map-example">
<head>
<title>AngularJS Esri Quick Start</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.21/esri/css/esri.css">
</head>
<body ng-controller="MapController as vm">
<esri-map id="map" center="vm.center" zoom="vm.zoom" basemap="topo">
<esri-feature-layer url="//services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Heritage_Trees_Portland/FeatureServer/0"></esri-feature-layer>
<esri-feature-layer url="//services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Portland_Parks/FeatureServer/0"></esri-feature-layer>
</esri-map>
<p>Lat: {{ vm.center.lat | number:3 }}, Lng: {{ vm.center.lng | number:3 }}, Zoom: {{ vm.zoom }}</p>
<!-- load Esri JSAPI -->
<script src="https://js.arcgis.com/3.21compact"></script>
<!-- load AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<!-- load angular-esri-map -->
<script src="https://unpkg.com/angular-esri-map@1"></script>
<script>
angular.module('esri-map-example', ['esri.map'])
.controller('MapController', function() {
var self = this;
self.center = {
lng: -122.676207,
lat: 45.523452
};
self.zoom = 12;
});
</script>
</body>
</html>
See the documentation for examples and guides of how to use the other directives and services.
If your application only shows a map under certain conditions you may want to lazy load the ArcGIS API for JavaScript. You can do this by calling the esriLoader.bootstrap() method. See the Lazy Load Patterns page for an example of how to do this.
These directives and services require, at a minimum, AngularJS v1.3.0 and the ArcGIS API for JavaScript v3.12 (though most will work and are tested on v3.11).
| angular-esri-map | AngularJS | ArcGIS API for JavaScript | Notes |
|---|---|---|---|
| v1.0.0 | v1.3 - v1.5 | v3.12+ | Test coverage included for AngularJS v1.3. |
| v1.1.0 | v1.3 - v1.5 | v3.15+ | |
| v1.1.8 | v1.3+ | v3.15+ | Due to a breaking change in controllers at AngularJS v1.6, e2e test coverage has been performed with v1.3, but will only continue with v1.6. See CHANGELOG. |
Websites
Presentations
While angular-esri-map focuses on providing well tested directives and patterns to help you use Esri maps with AngularJS v1.x, the ArcGIS API for JavaScript can also be used with Angular 2. In addition to the Angular 2 specific information discussed in the 2016 "What's New, What's Next" presentation and more recently in the 2017 "Angular and the ArcGIS API for JavaScript" presentation provided above, there are many resources available to inspire you to try out Esri+Angular 2.
Ionic is a mobile-ready implementation of Angular that is built on top of Cordova/PhoneGap. The coding patterns shown above can also be used with Ionic.
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.
Make sure you have Node and Gulp installed.
cd into the angular-esri-map foldernpm installgulp from the command line. This will run the linting and build commands and then start a local web server hosting the application under the docs foldersrc) and test pages (under test). Test pages are served along with the docs site when you run the gulp task and are accessible from the root (i.e. https://localhost:9002/simple-map.html).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
https://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.
FAQs
A collection of directives to help you use Esri maps and services in your Angular applications
The npm package angular-esri-map receives a total of 388 weekly downloads. As such, angular-esri-map popularity was classified as not popular.
We found that angular-esri-map demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."