Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and Antoon Uijtdehaag

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 are your presenters?

Antoon Uijtdehaag, Esri NederlandTechnical Consultant

Email: auijtdehaag@esri.nlTwitter @uijtdehaag

Andy Gup, EsriTech Lead for Web APIs and AndroidEsri Developer Network

Email: agup@esri.com Twitter: @agup

Who are you?

Why mobile?

Demo

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(Responsive)

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

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.2compact">

Why use the compact library?

Compact

Full

Size Latency

32 modules vs. 80 modules

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

);

Responsive Frameworks…(partial list)

Boostrap

Less Framework 4

Foundation 3

Skeleton

Less+

jQuery

The Boiler

Wirefy

Susy

Titan

Ingrid

DemoPutting it all together

Hybrid Web Apps

Wrap your app with native framework. Deploy to multiple platforms!

Hybrid Web Apps

Hybrid Web Apps

Direct access to:

GPS

Camera

Storage

Notification

Examples of Hybrid Web Apps

http://www.phonegap.com/app

???

build.phonegap.com

DemoPhonegap build

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

Antoon Uijtdehaag, Esri NederlandTechnisch Consultant

auijtdehaag@esri.nl@esrinederland

Andy Gup, EsriTech Lead for Web APIs and AndroidEsri Developer Network

agup@esri.com http://blog.andygup.net @agup