❤
npm
Sign UpSign In

angular-esri-map

2.0.5 • Public • Published

angular-esri-map

Build Status

A collection of directives to help you use Esri maps and services in your AngularJS v1.x applications.

**NOTE: ** AngularJS goes into Long Term Support on July 1, 2018. For more information go here.

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...

Table of Contents

Status

This project is no longer being actively maintained. It will not be updated or tested with the latest versions of the ArcGIS API for JavaScript and AngularJS v1.x. Ideas for new features or pull requests are not likely to be reviewed or merged.

No guarantee of future support is provided, but we will try to respond to new issues about bugs. These should include a link to an existing application or live demo (e.g. Plunkr, JS Bin, JsFiddle) where the bug can be verified, otherwise it is unlikely that we'll be able to help.

You can find up to date information on using the ArcGIS API for JavaScript in an Angular (2+) application at this Angular resources page.

Getting Started

Here are examples and guides showing how you can use this module to bring Esri maps into your own AngularJS v1.x applications.

Quick Start

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@2"></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 the sample code below to use the <esri-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.

App

<!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>AngularJS Esri Quick Start</title>
 
        <link rel="stylesheet" href="https://js.arcgis.com/4.8/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="https://js.arcgis.com/4.8/"></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@2"></script> 
 
        <script>
            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.

Lazy Loading of the ArcGIS API for JavaScript

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.

Dependencies

At version 1.x, 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).

For version 2.x, the ArcGIS API for JavaScript v4.0 is required.

See the compatibility table below for details.

angular-esri-map AngularJS ArcGIS API for JavaScript Notes
v1.0.0 v1.3 - v1.5 v3.12 - 3.21 Test coverage included for AngularJS v1.3.
v1.1.0 v1.3 - v1.5 v3.15 - 3.21
v1.1.8 v1.3+ v3.12 - 3.21 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.
v2.0.0 v1.3 - v1.5 v4.0 - v4.6 Test coverage included for AngularJS v1.3.
v2.0.2 v1.3+ v4.0 - v4.6 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.
v2.0.5 v1.3+ v4.6 - v4.8 Uses .when() instead of .then()

Resources

Websites

Presentations

What about Angular 2?

You can find up to date information on using the ArcGIS API for JavaScript in an Angular (2+) application at this Angular resources page.

What about Ionic?

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.

  • andygup/ionic2-esri-map: Example using ArcGIS API for JavaScript with Ionic2 using the angular2-esri-loader pattern with webpack.
  • jwasilgeo/ionic-esri-map: An Ionic1 app showing how to integrate a map using the angular-esri-map v1 pattern.

Issues

Find a bug or want to request a new feature? Please let us know by submitting an issue. Thank you!

Contributing

Anyone and everyone is welcome to contribute. Please see our guidelines for contributing.

Development Instructions

Make sure you have Node and Gulp installed.

  1. Fork and clone this repo
  2. cd into the angular-esri-map folder
  3. Install the dependencies with npm install
  4. run gulp 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 folder
  5. Modify the source files (under src) 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).
  6. Make a pull request to contribute your changes

Licensing

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.

Readme

Keywords

Package Sidebar

Install

npm i angular-esri-map

Repository

github.com/Esri/angular-esri-map

Homepage

github.com/Esri/angular-esri-map

Weekly Downloads

578

Version

2.0.5

License

Apache

Unpacked Size

1.06 MB

Total Files

131

Last publish

Collaborators

  • tomwayson
Try on RunKit
Report malware