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-rc.1]
Added support for defining and using a custom basemap. #121
Fixed a bug causing the legend to not show after re-loading a route. #129
Map directive no longer creates an InfoWindow from map options infoWindow property. #116
Update map and layer directives to use controllerAs and bindToController instead of injecting $socpe into controllers. #123
Refactored shared code out of directives and into controllers and services. #108
Moved services out of the esri.map module and into an esri.core module that can be used stand-alone. #69
Added additional example pages for dynamic map services and custom basemap. #124
Added an API section to the documentation pages generated by ngDocs. #99
Added additional e2e tests for dynamic map services and legend. #115 and #139
Added unit tests for esri.core services using Karma #30 and #146
Replaced jshint with eslint for automated linting and code style enforcement #138
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 286 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
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.