ionic-esri-map's Introduction

ionic-esri-map

An Ionic app demonstrating how to use the Esri ArcGIS API for JavaScript.

This is a work in progress.

Guidance

This is intended for use with v3.16+ of the ArcGIS API for JavaScript. v4.0+ is not currently supported.
Use Esri/angular-esri-map to enable Esri mapping within an Ionic (AngularJS) app.
- Esri and angular-esri-map js + css resources have been added to the initial html page. See fullscreen.html or tabbed.html.
- An <esri-map> directive has been added to the html, either by a template for the tabbed example, or directly in fullscreen.html in the full screen example. Keep in mind that this directive can be given more functionality via a corresponding controller.
A Content Security Policy (CSP) has also been established in the initial html page. More info on CSP here.
See Esri/quickstart-map-phonegap for additional info and ideas.

Do everything described in Step 1 here: Getting Started with Ionic
Create a project using ionic start IonicMap blank or use some other project name you feel is appropriate. Blank indicates a blank app.
Continue with Step 3 of the Ionic getting started guide. Make sure the default app runs without any errors.
Download the contents of this repository and then copy the contents of the www directory into your new project's www directory. Make sure all the files are copied over.
If all goes well with Step 3, then in your project's config.xml change <content src="index.html" /> to point to either tabbed.html or fullscreen.html. In Android, this file is under /res/xml/config.xml.