Build applications for iOS using the ArcGIS API for Javascript

App for iOS built with the ArcGIS API for JavaScriptVersion 2.0 of the ArcGIS API for JavaScript introduced support for devices using iOS (the operating system for iPhone, iPad and iPod Touch). New features like the compact build and built-in support for touch gestures simplify the process of building Web mapping applications for these iOS devices.

Note that in this post we’re just talking about Web applications you can view in the Safari browser on an iOS device: we are not referring to native iOS applications that you might build with the ArcGIS API for iOS and make available in the App Store.

Getting Started

The 2.0 version of the ArcGIS API for JavaScript includes a compact build, designed for building applications where slower Internet speeds and network latency is an issue. The compact build removes the dependency on the Dojo dijit namespace and includes only the most commonly used modules, which reduces the size of the build by 53 Kb gzipped. This smaller build is great for 3G mobile devices, like the iPhone where you want the smallest possible download. To work with the compact build, you simply need to add the following script tag to your application:

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.0compact">
 

Map Interaction

The map handles the touch experience of your iPhone by responding to gestures like:

  • Flick to pan
  • Pinch open or close to zoom in and out
  • Touch the screen to emulate a mouse-click

This allows you to easily pan and zoom the map, and perform tasks like displaying an info window when the user clicks the map. Here’s an example that listens for the map’s onClick event and displays an infoWindow.

dojo.connect(map, "onClick", function(evt) {
map.infoWindow.setTitle("Title");
map.infoWindow.setContent("Content goes here. It can be very long.");
map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
});

For more details on building Web applications for the iPhone operating system view the Safari Reference Library.

Geolocation

Starting with iPhone 3GS, Safari supports the Geolocation API, including the getCurrentPosition method of the Geolocation class. This method performs a one-time check to return the current location. In the example below, once the current position is determined, the map’s centerAndZoom method is used to zoom to the location.

navigator.geolocation.getCurrentPosition(zoomToLocation, locationError);
function zoomToLocation(location) {
var pt = new esri.geometry.Point(location.coords.longitude, location.coords.latitude);
map.centerAndZoom(pt, 16);
}

The Geolocation API also includes the watchPosition method to track a location as it changes. The watchPosition method fires a callback every time the position changes.In this example, a new graphic is added to the map when the device location changes.

navigator.geolocation.watchPosition(showLocation, locationError);
function showLocation(location) {
if (location.coords.accuracy <= 500) {
var attributes = {};
attributes.SPEED = location.coords.speed;
attributes.ACCURACY = location.coords.accuracy;
var pt = new esri.geometry.Point(location.coords.longitude, location.coords.latitude);
var graphic = new esri.Graphic(new esri.geometry.Point(pt, map.spatialReference), null, attributes);
map.centerAt(graphic.geometry);
}
}
 

Samples

The ArcGIS API for JavaScript includes several samples that target the iOS:

  • Simple Map – Get familiar with the compact build of the Javascript API and display a simple map. Learn how to change the layout of the app from portrait to landscape.
  • Location – Learn how to center the map at the user’s location and flag that location with a graphic.
  • ArcGIS.com map in iPhone – Display an ArcGIS.com map in iPhone and use the button to determine your current location.
  • Location with temporal renderer – Track how your user moves using the new temporal renderer in the API.

Contributed by Kelly Hutchins of the ArcGIS API for JavaScript development team

This entry was posted in Services and tagged , . Bookmark the permalink.

Leave a Reply

3 Comments

  1. Will_Branch says:

    Hi, I left the comment above, but was not signed in. Thanks Again. Will

  2. Kelly says:

    Will,

    Can you post the code you are having a problem with, if so I can take a look. If you’d rather you can email it to khutchins@esri.com.

  3. Buddhatown says:

    Fantastic job. Just ported a 1.6 app to Ipad in no time flat.