A collection of directives to help you use Esri maps and services in your Angular 1.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 Angular 1.x applications.
To use these directives in your own Angular 1.x application, first install the module as a dependency using any of the following methods.
<!-- load angular-esri-map from CDN -->
<script src="//npmcdn.com/angular-esri-map@2"></script># OR install via bower
bower install angular-esri-map
# OR install via npm
npm install angular-esri-mapAlternatively, 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 use the sample code below to use the scene view 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>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Angular Esri Quick Start</title>
<link rel="stylesheet" href="//js.arcgis.com/4.0/esri/css/main.css">
<style type="text/css">
html, body, .esri-view {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body ng-controller="MapController as vm">
<esri-scene-view map="vm.map" view-options="{scale: 50000000, center: [-101.17, 21.78]}">
</esri-scene-view>
<!-- load Esri JSAPI -->
<script src="//js.arcgis.com/4.0/"></script>
<!-- load AngularJS -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<!-- load angular-esri-map -->
<script src="//npmcdn.com/angular-esri-map@2"></script>
<script type="text/javascript">
angular.module('esri-map-example', ['esri.map'])
.controller('MapController', function(esriLoader) {
var self = this;
esriLoader.require(['esri/Map'], function(Map) {
self.map = new Map({
basemap: 'streets'
});
});
});
</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.
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 source files (under
src) and test pages (undertest). Test pages are served along with the docs site when you run thegulptask and are accessible from the root (i.e.http://localhost:9002/simple-map.html). - Make a pull request to contribute your changes
At version 1.x, these directives and services require, at a minimum, Angular v1.3.0 and the ArcGIS API for JavaScript v3.12 (though most will work and are tested on v3.11).
For version 2.x, the ArcGIS API for JavaScript v4.0 is required. These directives and services have been tested on every minor release of each of those libraries since then.
See the compatibility table below for details.
| angular-esri-map | Angular | ArcGIS API for JavaScript |
|---|---|---|
| v1.0 | v1.3+ | v3.12+ |
| v1.1 | v1.3+ | v3.15+ |
| v2.x | v1.3+ | v4.0+ |
You will need Node and Gulp to do local development.
Websites
Presentations
- Declarative Mapping Applications with AngularJS and the ArcGIS API for JavaScript, Esri 2016 International Developer Summit
- ArcGIS API for JavaScript and AngularJS: What's New, What's Next, Esri 2016 International Developer Summit
While angular-esri-map currently focuses on providing well tested directives and patterns to help you use Esri maps with Angular 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 provided above, there are several resources available to inspire you to try out Esri+Angular 2.
- Esri/esri-system-js: Load ArcGIS API for JavaScript modules using SystemJS
- jwasilgeo/angular2-esri-playground: Example app using the ArcGIS API for JavaScript v4 with Angular 2 loaded via esri-system-js
- tomwayson/angular2-esri-example: Example app using the ArcGIS API for JavaScript v3 with Angular 2 loaded via Webpack based on @lobsteropteryx’s (non-Angular-specific) esri-webpack configuration.
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)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent