Building Mobile Applications with the ArcGIS API for JavaScript

Andy Gup

Esri Southwest User ConferenceSeptember 17-19, 2012 | Denver, Colorado

Agenda

Goal: You’ll get an A to Z mobile web primer

Why build mobile map apps?

3 Approaches

Frameworks

CSS3 & HTML5

Hybrid Map apps

Who am I?

Andy Gup, Esri

Tech Lead for Web APIs and Android

Esri Developer Network

Email: agup@esri.com

Twitter: @agup

Who are you?

Why mobile?

Demo

X

Mobile usage stats for my website?

Web Server logs

Web analytic tools

Sample web-site stats from esri.com

Your 3 Approaches

Web app+

Native mobile app

Web app+

Web mobile app(a.k.a Hybrid)

Web app only

1.

2.

3.

Many different screen sizes and pixel densities

1920x1080

Wait…how do I pan and zoom the map??

Hmmm…how many map layers do I load?

VS.

1 GB RAM 16 GB RAM

How come my map loads so slooow?

VS.

Mostly connected Always connected

My survey crews use GPS heavily…

VS.

Limited battery Unlimited power

arcgis.com

1440 x 900 480 x 800 hdpi

resources.arcgis.com

1440 x 900 480 x 800 hdpi

Portrait Landscape

Mobile app – flip view port easily

Desktop app on smartphone

ArcGIS API for JavaScript - Compact

http://esriurl.com/compactJS

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

Library Size vs. Download vs. Parse

Compact

Full

The challengeMany mobile frameworks, such as…

Mobile frameworks help with…

Views

Visual Components

Themes

Views

Image courtesy Dojo

Views

<div id="mapView" dojoType="dojox.mobile.View“ style="width:100%;height:100%;"> <h1 dojoType="dojox.mobile.Heading" back="Back" moveTo="mainView"> 5 + 10 minute Drive Times </h1> <div id="map“ style="width:100%; height:100%;“/></div>

Easy!

Visual Components

<div dojoType="dojox.charting.widget.Chart2D" theme="dojox.charting.themes.Claro" id="viewsChart" style="width: 550px; height: 550px;">

     <!-- Pie Chart: add the plot -->    <div class="plot" name="default" type="Pie"

radius="200" fontColor="#000" labelOffset="-20"></div>     <!-- pieData is the data source -->    <div class="series" name="Last Week's Visits" array="chartData"> </div> </div>

Themes

  <!--Legend Dialog-->  <div data-role="dialog" id="legendDialog"   data-theme="f">    <div data-role="header">      <h1>Legend</h1>    </div>    <div data-role="content" >      <div id="legendDiv"></div>    </div>  </div>

The view port

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-

scalable=no"/>

Setting the mobile view port

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-

scalable=no"/>

Setting the mobile view port

Minimum view port

Zoom level on page load

Force map to scale - not the page

No viewport With viewport

Map touch events

No Change!

function init() {        var map = new esri.Map(...);        dojo.connect(map, "onClick", myClickHandler);}

Styling via resolution & rotation

CSS3 Media Queries

CSS3 Media QueriesTarget specific devices by screen width

Apply styles by device orientation

Target high density screens such as iPhone 4

@media screen and (min-device-width:768px) and (max-device-width:1024px) {/* styles go here */}

@media (orientation: landscape) {/* styles go here */}

@media (-webkit-min-device-pixel-ratio: 2) {/* high resolution device styles go here */}

Listen for device rotation

var supportsOrientationChange = "onorientationchange" in window,orientationEvent =

supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, dojo.hitch(this,function(){ //... TODO

this.orientationChanged = orientationChanged; }), false

);

DemoPutting it all together

Hybrid Web Apps

+

Android SDKJava Project

HTML + Mobile JavaScript

Framework

=

Hybrid Web Apps

Hybrid Web Apps

Direct access to:

GPS

Camera

SD Card

Examples of Hybrid Web Apps

http://www.phonegap.com/app

???

Hybrid Web App Platforms

build.phonegap.com

build.phonegap.com

Scan the QR code to install

Hello-World PhoneGap Map

Remote debugging

HTML5

HTML + CSS3 + JavaScript

HTML5 Logo by W3C

• Several new APIs

- Drag and drop API

- FileSystem API(s)

- Geolocation API

- Web Storage: localStorage/sessionStorage- Web Workers (threaded JavaScript!)

- Cross-Origin Resource Sharing (CORS)

- Browser History

HTML5 APIs

• 5 MB limit vs. 4 KB per regular cookie

• Stores key/value pairs

• localStorage and sessionStorage

Web Storage API

// Put the object into storagelocalStorage.setItem(“address”, someAddress);

// Retrieve the object from storage var userAddress = localStorage.getItem(“address”);

// Save data to a the current session's store sessionStorage.setItem("username", "John");

// Access some stored data var userName = sessionStorage.getItem("username"));

• Provides user’s approximate location

• Opt-in only!

navigator.geolocation.getCurrentPosition( zoomToLocation, locationError);

watchId = navigator.geolocation.watchPosition( updateLocation, locationError);

Geolocation API

Geolocation API

Understanding browsers

!= !=

caniuse.com

Feature detection pattern

useLocalStorage = supports_local_storage();

function supports_local_storage() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch( e ){ return false; }}

function doSomething() { if(useLocalStorage == true){ //write to local storage } else {

//degrade gracefully }}

Test on different devices

Andy Gup, Esri

Tech Lead for Web APIs and Android

Esri Developer Network

agup@esri.com

http://blog.andygup.net

@agup