ArcGIS JavaScript samples for use with PhoneGap/Cordova
CSS JavaScript HTML Shell
Latest commit be8c2ff Aug 31, 2016 @andygup andygup committed on GitHub Merge pull request #22 from andygup/update_css_link
Update css to use local pathname

README.md

quickstart-map-phonegap

A set of samples that show how to get started with the ArcGIS API for JavaScript and PhoneGap/Cordova. These samples provide best practices for using PhoneGap and Cordova across different device operating systems and within the PhoneGap/Cordova application lifecycle.

Samples

This repo contains four sample applications.

  • basic-map.html - a basic mapping application configuration.
  • basic-webmap.html - uses a simple web map.
  • basic-gps.html - uses the GPS to acquire current location and center the map.
  • jquery-gps.html - demonstrates how to use jQuery mobile with PhoneGap and the ArcGIS API for JavaScript.

The jQuery sample also makes use of the jquery-mobile-map-js repository's jQueryHelper library.

Life-cycle

It's important that you follow basic guidelines when using the ArcGIS API for JavaScript within a PhoneGap/Cordova framework. The samples included with this repo provide fully working examples.

    <!DOCTYPE html>
    <html>
    <head>
         <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
    </head>
    <body>

    <div id="mapDiv"></div>

    <script>

        // Indicates that Cordova is full loaded
        // More info: https://cordova.apache.org/docs/en/latest/cordova/events/events.html
        document.addEventListener("deviceready", onDeviceReady, false);

        // Wait to load ArcGIS API for JavaScript until after deviceready event
        function onDeviceReady() {

            // Now we load the map
            require(["esri/map", "dojo/domReady!"], function(Map) {
                map = new Map("map", {
                    basemap: "topo",  
                    center: [-122.45, 37.75], // longitude, latitude
                    zoom: 13
                });
            });
        }
    </script>

    <script src="https://js.arcgis.com/3.17"></script>
    <script src="cordova.js"></script>
    </body>
    </html>

Instructions

  1. Follow these instructions to Create your first Cordova app.

  2. Copy the contents from this repo into any newly created /www directories

  3. Set the sample you want to use in config.xml <content> tag.

    <content src="basic-gps.html" />
    
  4. To take advantage of GPS and Geolocation capabilities you may need to install the Geolocation plugin.

  5. Build the app and launch!

Testing

These applications will not work as stand-alone web applications because there are coded specifically for PhoneGap/Cordova.

For the most definitive approach, build and run application directly on a device. Use console.log statements for troubleshooting. With the latest versions of Chrome and Safari you can remotely debug the device as long as it's attached to your laptop via a USB cabable. This is super-convienent and very easy to set up.

Minimum Requirements

  • Access to the ArcGIS API for JavaScript v3.x.
  • One actual working device for each mobile platform you want to deploy to. Simply testing on an emulator isn't good enough for production use. Test on as many devices as possible.
  • AndroidStudio and XCode (iOS)
  • Android SDK - if you are deploying to Android
  • Node.js - for the PhoneGap/Cordova CLI command-line interface.

Resources

Issues

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

Contributing

Anyone and everyone is welcome to contribute.

The create_phonegap_quickstart.sh shell script can be used to create a repository for tracking changes or to make pull requests. If you are unable to run the script you can manually reproduce the steps described in it.

Licensing

Copyright 2016 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

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.