New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

angular-esri-map

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular-esri-map

A collection of directives to help you use Esri maps and services in your Angular applications

2.0.0-beta.1
beta
Source
npm

Version published: 9 years ago

Weekly downloads: 259; decreased by-28.65%

Maintainers: 1

Weekly downloads

Created: 9 years ago

Source

angular-esri-map

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

Getting started

Here are a few examples showing how you can use this module to bring Esri maps into your own Angular applications.

Quick Start

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 scene view directive. 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.

App

<!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" href="//js.arcgis.com/4.0beta3/esri/css/main.css">
    </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>
        
        <script src="//js.arcgis.com/4.0beta3/"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/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(esriLoader) {
                    var self = this;
                    esriLoader.require(['esri/Map'], function(Map) {
                        self.map = new Map({
                            basemap: 'streets'
                        });
                    });
                });
        </script>
    </body>
</html>

See the documentation for examples of how to use the other directives.

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.

Development Instructions

Make sure you have Node and Gulp installed.

Fork and clone this repo
cd into the angular-esri-map folder
Install the dependencies with npm install
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
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. http://localhost:9002/simple-map.html).
Make a pull request to contribute your changes

Dependencies

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 beta is required. They 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.xbeta	v1.3+	v4.0beta3+

You will need Node and Gulp to do local development.

Resources

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.

Licensing

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)

Keywords

FAQs

What is angular-esri-map?

Is angular-esri-map popular?

Is angular-esri-map well maintained?

Package last updated on 16 Feb 2016

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.

Install

angular-esri-map