1. 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

2. Who are your presenters?
Antoon Uijtdehaag, Esri Nederland
Technical Consultant
Email: auijtdehaag@esri.nl
Twitter @uijtdehaag
Andy Gup, Esri
Tech Lead for Web APIs and Android
Esri Developer Network
Email: agup@esri.com
Twitter: @agup

3. Who are you?

4. Why mobile?

5. Demo

6. Mobile usage stats for my website?
Web Server logs
Web analytic tools

7. Sample web-site stats from esri.com

8. Your 3 Approaches
Web app
1. +
Native mobile app
Web app
2. +
Web mobile app
(a.k.a Hybrid)
3. Web app only
(Responsive)

9. Many different screen sizes and pixel densities
1920x1080

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

11. Hmmm…how many map layers do I load?
VS.
1 GB RAM 16 GB RAM

12. How come my map loads so slooow?
VS.
Mostly connected Always connected

13. My survey crews use GPS heavily…
VS.
Limited battery Unlimited power

14. resources.arcgis.com
1440 x 900 480 x 800 hdpi

15. Mobile app – flip view port easily
Portrait Landscape

16. Desktop app on smartphone

17. ArcGIS API for JavaScript - Compact
http://esriurl.com/compactJS
<script type="text/javascript"
src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2compact">

18. Why use the compact library?
32 modules vs. 80 modules
Size Latency
Compact
Full

19. Many mobile frameworks, such as…
The challenge

20. Mobile frameworks help with…
Views
Visual Components
Themes

21. Views
Image courtesy Dojo

22. 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>

23. 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>

24. 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>

25. The view port

26. Setting the mobile view port
<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1, user-scalable=no"/>

27. Setting the mobile view port
Minimum view port
<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1, user-scalable=no"/>
Zoom level on page load
Force map to scale - not the page

28. No viewport With viewport

29. Map touch events
No Change!
function init() {
var map = new esri.Map(...);
dojo.connect(map, "onClick", myClickHandler);
}

30. Styling via resolution & rotation
CSS3 Media Queries

31. CSS3 Media Queries
Target specific devices by screen width
@media screen and (min-device-width:768px) and (max-device-width:1024px) {
/* styles go here */
}
Apply styles by device orientation
@media (orientation: landscape) {
/* styles go here */
}
Target high density screens such as iPhone 4
@media (-webkit-min-device-pixel-ratio: 2) {
/* high resolution device styles go here */
}

32. 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
);

33. Responsive Frameworks…(partial list)
The Boiler
Boostrap Less+
Wirefy
Foundation 3
Titan
Susy
Skeleton Ingrid
Less Framework 4
jQuery

34. Demo
Putting it all together

35. Hybrid Web Apps
Wrap your app with native framework. Deploy to multiple platforms!

36. Hybrid Web Apps

37. Hybrid Web Apps
Direct access to:
GPS
Camera
Storage
Notification

38. Examples of Hybrid Web Apps
http://www.phonegap.com/app

39. build.phonegap.com

40. Demo
Phonegap build

41. HTML5
HTML + CSS3 + JavaScript
HTML5 Logo by W3C

42. HTML5 APIs
• 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

43. Web Storage API
• 5 MB limit vs. 4 KB per regular cookie
• Stores key/value pairs
• localStorage and sessionStorage
// Put the object into storage
localStorage.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"));

44. Geolocation API
• Provides user’s approximate location
• Opt-in only!
navigator.geolocation.getCurrentPosition(
zoomToLocation, locationError
);
watchId = navigator.geolocation.watchPosition(
updateLocation, locationError
);

45. Geolocation API

46. Understanding browsers
!= !=

47. caniuse.com

48. 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
}
}

49. Test on different devices

51. Antoon Uijtdehaag, Esri Nederland
Technisch Consultant
auijtdehaag@esri.nl
@esrinederland
Andy Gup, Esri
Tech Lead for Web APIs and Android
Esri Developer Network
agup@esri.com
http://blog.andygup.net
@agup