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 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 any of the following methods.
# 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 use the sample code below to use the map and feature layer directives. Just change the "path/to/angular-esri-map.js" to point to the location of the file in your environment and load the page in a browser.
<!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.14/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/Heritage_Trees_Portland/FeatureServer/0"></esri-feature-layer>
<esri-feature-layer url="http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Portland_Parks/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.14compact"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/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.
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 Deferred Map Example page for an example of how to do this.
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. http://localhost:9002/simple-map.html).These directives and services require, at a minimum, Angular v1.3.0 and the ArcGIS API for JavaScript v3.11. They have been tested on every minor release of each of those libraries since then.
You will need Node and Gulp to do local development.
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)
[v1.0.0-beta.5]
Geographic center coordinates are normalized prior to updating esriMap scope values #93
Add or remove layers from the map programatically #51 @eas604
The feature layer directive now includes optional attributes for opacity, definition expression, and constructor options. Opacity and definition expression act just like the visible attribute, and are watched for changes and can be adjusted at any time. #51 @eas604 #97 and #100
The feature layer directive also now includes optional attributes for the layer's load and update-end events. #103
Added a directive for dynamic map service layers. Like the feature layer directive, it has optional attributes for visibility, opacity and constructor options. #52 @Kollibri
Added a directive to set the info template(s) for layers so that they show a popup when clicked. #52 #118 @Kollibri
Map directive's addLayer accepts an optional index argument, and layers are now added to the esriMap and esriLegend in the order that they appear in the markup.
#104 and #111
Legend directive now uses $scope.$watchCollection to watch map.layerInfos for changes and refresh the legend appropriately. #52 @Kollibri
Examples pages are now driven by configurable JSON and have more consistent titles #94
Using ng-options for zoom level select Set Center and Zoom example page so that it has the correct value selected initially c8659fce
Feature-layers example now includes adjustable layer opacity, definition expression, and additional information on the esriFeatureLayer directive options #97 and #100.
Added an example page for the new dynamic map service layer. c69329b9
Added an example page showing how to add/remove layers from a map. 061ed936
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
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
Added functional testing using Protractor. #82, #94, #112
Published to NPM #80
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 381 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
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.