Upload
esri-nederland
View
4.321
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
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: [email protected] @uijtdehaag
Andy Gup, EsriTech Lead for Web APIs and AndroidEsri Developer Network
Email: [email protected] 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
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
[email protected]@esrinederland
Andy Gup, EsriTech Lead for Web APIs and AndroidEsri Developer Network
[email protected] http://blog.andygup.net @agup