Download - 3 Approaches to Mobile - An A to Z Primer
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: [email protected]
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
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
http://blog.andygup.net
@agup
