{"id":13497455,"url":"https://github.com/Esri/angular-esri-map","last_synced_at":"2025-03-28T22:31:45.539Z","repository":{"id":22375692,"uuid":"25712166","full_name":"Esri/angular-esri-map","owner":"Esri","description":"A collection of directives to help you use Esri maps and services in your Angular applications","archived":true,"fork":false,"pushed_at":"2020-11-20T18:10:04.000Z","size":3608,"stargazers_count":213,"open_issues_count":0,"forks_count":106,"subscribers_count":52,"default_branch":"master","last_synced_at":"2025-03-21T08:35:28.023Z","etag":null,"topics":["angular","arcgis","esri","javascript","web-development"],"latest_commit_sha":null,"homepage":"https://esri.github.io/angular-esri-map/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Esri.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-10-24T23:01:06.000Z","updated_at":"2024-11-01T00:54:36.000Z","dependencies_parsed_at":"2022-08-20T21:20:52.491Z","dependency_job_id":null,"html_url":"https://github.com/Esri/angular-esri-map","commit_stats":null,"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Esri%2Fangular-esri-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Esri%2Fangular-esri-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Esri%2Fangular-esri-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Esri%2Fangular-esri-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Esri","download_url":"https://codeload.github.com/Esri/angular-esri-map/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246110215,"owners_count":20725011,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","arcgis","esri","javascript","web-development"],"created_at":"2024-07-31T20:00:31.150Z","updated_at":"2025-03-28T22:31:45.239Z","avatar_url":"https://github.com/Esri.png","language":"JavaScript","readme":"angular-esri-map\n================\n\n**The angular-esri-map repository is now retired and is now archived (November 2020). It started in Long Term Maintenance mode on July 1, 2018.**\n\nDo you have a question related to JavaScript that isn’t specific to Angular? Post these questions in the [GeoNET](https://community.esri.com/community/developers/web-developers/arcgis-api-for-javascript) forum for the ArcGIS API for JavaScript.\n\nPlease take a look at these modern alternatives:\n\n- [Esri-loader](https://github.com/esri/esri-loader) - A tiny library to help load ArcGIS API for JavaScript modules in non-Dojo applications.\n- [Arcgis-webpack-plugin](https://github.com/Esri/arcgis-webpack-plugin) – A webpack wrapper for the ArcGIS API for JavaScript.\n- [Angular-cli-esri-map](https://github.com/Esri/angular-cli-esri-map) – A repo that demos using the ArcGIS API for JavaScript in Angular 9+ applications.\n\n---\n\nA collection of directives to help you use Esri maps and services in your AngularJS v1.x applications.\n\nThese 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...](https://esri.github.io/angular-esri-map/#/about)\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n  - [Quick Start](#quick-start)\n  - [Lazy Loading of the ArcGIS API for JavaScript](#lazy-loading-of-the-arcgis-api-for-javascript)\n- [Dependencies](#dependencies)\n- [Resources](#resources)\n- [What about Angular 2?](#what-about-angular-2)\n- [What about Ionic?](#what-about-ionic)\n- [Issues](#issues)\n- [Contributing](#contributing)\n- [Development Instructions](#development-instructions)\n- [Licensing](#licensing)\n\n## Getting Started\n\nHere are [examples and guides](https://esri.github.io/angular-esri-map/) showing how you can use this module to bring Esri maps into your own AngularJS v1.x applications.\n\n### Quick Start\n\nTo use these directives in your own AngularJS v1.x application, first install the module as a dependency using any of the following methods.\n\n```html\n\u003c!-- load angular-esri-map from CDN --\u003e\n\u003cscript src=\"https://unpkg.com/angular-esri-map@2\"\u003e\u003c/script\u003e\n```\n\n```bash\n# OR install via bower\nbower install angular-esri-map\n\n# OR install via npm\nnpm install angular-esri-map\n```\n\nAlternatively, you can clone or [download](https://github.com/Esri/angular-esri-map/releases) this repo and copy the desired module file (`angular-esri-map.js` or `angular-esri-map.min.js`) into your application.\n\nOnce you've added the module to your application, you can refer the sample code below to use the `\u003cesri-scene-view\u003e` 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.\n\n![App](https://raw.github.com/Esri/angular-esri-map/master/angular-esri-map.png)\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml ng-app=\"esri-map-example\"\u003e\n    \u003chead\u003e\n        \u003cmeta charset=\"utf-8\"\u003e\n        \u003cmeta name=\"viewport\" content=\"initial-scale=1,maximum-scale=1,user-scalable=no\"\u003e\n\n        \u003ctitle\u003eAngularJS Esri Quick Start\u003c/title\u003e\n\n        \u003clink rel=\"stylesheet\" href=\"https://js.arcgis.com/4.8/esri/css/main.css\"\u003e\n        \u003cstyle type=\"text/css\"\u003e\n            html, body, .esri-view {\n                padding: 0;\n                margin: 0;\n                height: 100%;\n                width: 100%;\n            }\n        \u003c/style\u003e\n    \u003c/head\u003e\n    \u003cbody ng-controller=\"MapController as vm\"\u003e\n        \u003cesri-scene-view map=\"vm.map\" view-options=\"{scale: 50000000, center: [-101.17, 21.78]}\"\u003e\n        \u003c/esri-scene-view\u003e\n\n        \u003c!-- load Esri JSAPI --\u003e\n        \u003cscript src=\"https://js.arcgis.com/4.8/\"\u003e\u003c/script\u003e\n        \u003c!-- load AngularJS --\u003e\n        \u003cscript src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js\"\u003e\u003c/script\u003e\n        \u003c!-- load angular-esri-map --\u003e\n        \u003cscript src=\"https://unpkg.com/angular-esri-map@2\"\u003e\u003c/script\u003e\n\n        \u003cscript\u003e\n            angular.module('esri-map-example', ['esri.map'])\n                .controller('MapController', function(esriLoader) {\n                    var self = this;\n                    esriLoader.require(['esri/Map'], function(Map) {\n                        self.map = new Map({\n                            basemap: 'streets'\n                        });\n                    });\n                });\n        \u003c/script\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\nSee the documentation for [examples and guides](https://esri.github.io/angular-esri-map) of how to use the other directives and services.\n\n### Lazy Loading of the ArcGIS API for JavaScript\n\nIf 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](https://esri.github.io/angular-esri-map/#/patterns/lazy-load) for an example of how to do this.\n\n## Dependencies\n\nAt 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).\n\nFor version 2.x, the ArcGIS API for JavaScript v4.0 is required.\n\nSee the compatibility table below for details.\n\nangular-esri-map | AngularJS | ArcGIS API for JavaScript | Notes\n--- | --- | --- | ---\nv1.0.0 | v1.3 - v1.5 | [v3.12 - 3.21](https://developers.arcgis.com/javascript/3/) | Test coverage included for AngularJS v1.3.\nv1.1.0 | v1.3 - v1.5 | [v3.15 - 3.21](https://developers.arcgis.com/javascript/3/) |\nv1.1.8 | v1.3+ | [v3.12 - 3.21](https://developers.arcgis.com/javascript/3/) | 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](https://github.com/Esri/angular-esri-map/blob/v1.x/CHANGELOG.md#v118).\nv2.0.0 | v1.3 - v1.5 | [v4.0 - v4.6](https://developers.arcgis.com/javascript/) | Test coverage included for AngularJS v1.3.\nv2.0.2 | v1.3+ | [v4.0 - v4.6](https://developers.arcgis.com/javascript/) | 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](https://github.com/Esri/angular-esri-map/blob/master/CHANGELOG.md#v202).\nv2.0.5 | v1.3+ | [v4.6 - v4.8](https://developers.arcgis.com/javascript/) | Uses [`.when()` instead of `.then()`](https://www.esri.com/arcgis-blog/products/js-api-arcgis/mapping/making-better-promises/)\n\n## Resources\n\n**Websites**\n* [AngularJS v1.x](https://angularjs.org/)\n* [ArcGIS API for JavaScript](https://developers.arcgis.com/javascript/)\n* [ArcGIS for Developers](https://developers.arcgis.com)\n* [ArcGIS REST API](https://resources.arcgis.com/en/help/arcgis-rest-api/)\n* [@Esri](https://twitter.com/esri)\n\n**Presentations**\n* [Declarative Mapping Applications with AngularJS and the ArcGIS API for JavaScript](https://proceedings.esri.com/library/userconf/devsummit16/papers/dev_int_193.pdf), Esri 2016 International Developer Summit\n* [ArcGIS API for JavaScript and AngularJS: What's New, What's Next](https://jwasilgeo.github.io/esri-jsapi-and-angular-whats-next-dev-summit-2016), Esri 2016 International Developer Summit\n* [Angular and the ArcGIS API for JavaScript](https://jwasilgeo.github.io/presentations/2017/angular-and-the-arcgis-api-for-javascript), Esri 2017 International Developer Summit\n\n## What about Angular 2?\n\nYou can find up to date information on [using the ArcGIS API for JavaScript in an Angular (2+) application at this Angular resources page](https://github.com/esri/jsapi-resources/tree/master/frameworks/angular).\n\n## What about Ionic?\n\nIonic 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.\n\n* [andygup/ionic2-esri-map](https://github.com/andygup/ionic2-esri-map): Example using ArcGIS API for JavaScript with Ionic2 using the angular2-esri-loader pattern with webpack.\n* [jwasilgeo/ionic-esri-map](https://github.com/jwasilgeo/ionic-esri-map): An Ionic1 app showing how to integrate a map using the angular-esri-map v1 pattern.\n\n## Issues\n\nFind a bug or want to request a new feature? Please let us know by submitting an issue. Thank you!\n\n## Contributing\n\nAnyone and everyone is welcome to contribute. Please see our [guidelines for contributing](https://github.com/Esri/angular-esri-map/blob/master/CONTRIBUTING.md).\n\n## Development Instructions\n\nMake sure you have [Node](https://nodejs.org/) and [Gulp](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md#getting-started) installed.\n\n1. [Fork and clone this repo](https://help.github.com/articles/fork-a-repo)\n2. `cd` into the `angular-esri-map` folder\n3. Install the dependencies with `npm install`\n4. 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\n5. 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`).\n6. Make a [pull request](https://help.github.com/articles/creating-a-pull-request) to contribute your changes\n\n## Licensing\n\nCopyright 2014 Esri\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n   https://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n\nA copy of the license is available in the repository's [license.txt](https://raw.github.com/Esri/angular-esri-map/master/LICENSE) file.\n","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FEsri%2Fangular-esri-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FEsri%2Fangular-esri-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FEsri%2Fangular-esri-map/lists"}