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.

Development

• 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="https://github.com/jwasilgeo/ionic-esri-map/raw/master/index.html" /> to point to either tabbed.html or fullscreen.html. In Android, this file is under /res/xml/config.xml.

Proof