ArcGIS and PhoneGap

Here is my first test with Adobe PhoneGap and with the ArcGIS SDK for Javascript. I’ve created this app to run on Android, but the same html code I’m creating here can also be used to create any other PhoneGap supported OS, like iOS or Windows Phone.

I will go through the configuration of PhoneGap on Eclipse, creating then a Hello World. Next I will create a map application using the ArcGIS SDK for Javascript inside Eclipse. At the end I have the code and the .apk so that you can install on your device.

Configure the PhoneGap development environment

First go to PhoneGap donwload page and download the latest PhoneGap available version. In this case 2.0.0

http://phonegap.com/download

Then just follow the instructions on the Getting Started Guide for Android. This guide will help you on how to configure your Eclipse and build a Hello World application

While editing AndroidManifest.xml file I added only the following settings

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

At the end if you want to run you Hello World App on a real device and do not succeed, try this instructions on Android Developer http://developer.android.com/tools/device.html

Create your First ArcGIS Map

Now that you have your Hello World let’s start to build an ArcGIS application.

In this example I want to make an app that will show me the real time earthquake location on  a map. Besides that I want my app to zoom into my current location.

Surfing a bit on www.arcgis.com I found some maps related to earthquake information like this one. This map has a layer that shows the most recent earthquakes above the magnitude of 2.5. The service url is

http://ags.pdc.org/ArcGIS/rest/services/global/pdc_active_hazards/MapServer/4

So to add a ArcGIS map to your PhoneGap app lets first get a sample from ArcGIS API for Javascript page.

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/mobile_simplemap.html

Copy the code to your index.html file in you Eclipse project

After this add the PhoneGap’s JavaScript ibrary reference to the index.html file

<script type="text/javascript" charset="utf-8"

src="cordova-2.0.0.js"></script>

Run the app on a device or emulator and... voila! You are in Paris! Magic!

If you get the error message “The connection to the server was unsuccessful. URL=file:///android_asset/www/index.html” try this.

Now let’s change the initial extent to the whole world. If you simply change this line with your new extent.

var initialExtent = new esri.geometry.Extent({

                             "xmin" : -14161000,

                             "ymin" : -477000,

                             "xmax" : 11669000,

                             "ymax" : 8094000,

                             "spatialReference" : {

                                   "wkid" : 102100

                             }

                       });

Add the Earthquake Map

Now add the earthquake map. For this you will add a FeatureLayer to the map and also the ability to identify the earthquake on tap. Replace the dojo.connect(map, "onLoad", function(evt) block with the following

dojo.connect(map, "onLoad", function(evt) {

//add a feature layer

var content = "<b>MAGNITUDE</b>: ${MAGNITUDE}<br /><b>DEPTH</b>: ${DEPTH} Km<br />${DATE_TIME}";

//create a Info Template

var infoTemplate = new esri.InfoTemplate("Details", content);

map.infoWindow.resize(150,80);

//create the FeatureLayer

var featureLayer = new esri.layers.FeatureLayer("http://ags.pdc.org/ArcGIS/rest/

services/global/pdc_active_hazards/MapServer/4", {

mode : esri.layers.FeatureLayer.MODE_ONDEMAND,

      outFields : ["MAGNITUDE", "DEPTH", "DATE_TIME"],

      infoTemplate : infoTemplate});

//add a click event to the FeaureLayer

dojo.connect(featureLayer, 'onClick', function(evt) {

//select the clicked feature

      var query = new esri.tasks.Query();

      query.geometry = evt.mapPoint;

      featureLayer.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW);});

//add the FeatureLayer to the map

map.addLayer(featureLayer);

});

You must add the dojo imports. After dojo.require("esri.map");

dojo.require("esri.layers.FeatureLayer");

dojo.require("esri.tasks.query");

Run the application and tap on some points

Get the Location and Zoom

To get your device location, both PhoneGap and ArcGIS API for JavaScript use the W3C’s GeoLocation API.

First you must make sure you have the following settings

• in app/res/xml/config.xml you must have the following tag in the plugins section

<plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/>

• in app/AndroidManifest.xml you must have the following tags

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_CO

MMANDS" />

Then in your index.xml file inside dojo.connect(map, "onLoad", function(evt){ after map.addLayer(featureLayer); add the following lines

if (navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(zoomToLocation, locationError);

navigator.geolocation.watchPosition(showLocation, locationError);

}

And then the corresponding listener methods

function locationError(error) {

switch (error.code) {

case error.PERMISSION_DENIED:

alert("Location not provided");

break;

case error.POSITION_UNAVAILABLE:

alert("Current location not available");

break;

case error.TIMEOUT:

alert("Timeout");

break;

default:

alert("unknown error");

break;

}

}

function zoomToLocation(location) {

var point = esri.geometry.geographicToWebMercator(

new esri.geometry.Point(

location.coords.longitude,

location.coords.latitude));

map.centerAndZoom(point, 5);

}

And there you have it! All is calm now around Portugal. But if you live in Puerto Rico or the Dominican Republic things are shaky over there.

  

Download Android apk
Download code