open source mobile web maps
DESCRIPTION
TRANSCRIPT
OPEN-SOURCE MOBILE WEB MAPSUsing OpenLayers and jQuery MobileGregory L. Gunther
REST
GeoRSS
Flex
AJAX
KML
WMS JavaScript
JSON
Design
General Web Technology Landscape
HTML (5)
JavaScript
CSS
• Content encoding
• Semantic Context
• Easy—”Language of the Web”
• Logic
• Styling
Formats as Representation
Resources(Map)
KML GeoRSS
GeoJSON(AGS)
JPEG2000
GMLJPEG2000
Representations of a resource
SOAPWMS
WFSHTTP Goodness (RESTful)
AMF
OPEN-SOURCE
OPENLAYERS
OpenLayers
“OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles and markers loaded from any source. OpenLayers has been developed to further the use of geographic information of all kinds. OpenLayers is completely free, Open Source JavaScript” -- openlayer.org
JavaScript APIBusiness Case
Alternatives
Open Layers Format Support
ArcGIS (Dynamic and
Cached)ArcIMS
Bing
GeoRSS
GMLPerformance
(Kinetic Panning)
Bing Maps
WMS, WFS
XYZ Standard cache
WorldWind
My First OpenLayers Map
Why Mobile?
Search Engines
Your Site Won’t Work
More Mobile Users Than
Desktop
1/5 Access Mobile Web
All American Adults Own Cell Phones
2 B Cell phones Globally
NATIVE
MOBILE WEB
Native Mobile Apps
Pros• Targets specific device
and unique capabilities• Optimized performance• App store presence**
Cons• Longer development time• Multiple development
platforms for multiple devices
• Costs & Licensing (developer licenses $99, $299, etc) Alford 2011
Mobile Web App
Pros• Multiple platform
support• Single point of
maintenance • No restrictionsCons• Less aesthetically
pleasing UI• Business / commercial• Not a good gaming
platform
Alford 2011
OPENLAYERS
MOBILE
Touch Support Performance (Kinetic Panning)
Bing Maps Representation
Support (JSONP)
Open Layers 2.11
LAB 1
Lab 1 Solution
FurtherOpenLayers Mobile
Features
Drawing Graphics w/ Touch
AccelerometerSupport
Geolocation
The Mobile Challenge
Technologies That Help
CSS Media Queries• CSS styling based on device
screen size• Client Side (In Browser)
Server Side Detection• Based on user agent request• Server renders based on user
agentToolkits• OpenLayers Browser
Detection• jQuery Mobile• Minified Libraries (ArcGIS JS
API)
jQuery Mobile
“A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design”
Cross Platform/Device• IOS• Android• BlackBerry• Windows Phone• webOS• More…
Touch Optimized UI Widgets• Provides Native Feel and
Experience• Themable• Bigger
Pages and Popups
Buttons
Lists/Navigation
Form Elements
Themes
UI Examples
Alford 2011
Coding
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head>
……….
<div data-role="page">
<div data-role="header"><h1>Page Title</h1></div
<div data-role="content"> <p>Page content goes here.</p></div>
<div data-role="footer"> <h4>Page Footer</h4> </div>
</div>
OpenLayers and jQuery
<body>
<div data-role="page" id="mappage">
<div data-role="header"><h1>Page Title</h1></div
<div data-role="content">
<div id="map"></div>
</div>
<div data-role="footer">
<a href="#layerspage" data-icon="layers" data-role="button">Layers</a>
</div>
……
<div data-role="page“ id=“layerpage”>
<div data-role="header">
<a href="#mappage" data-role="button"><<Back</a>
</div>
<div data-role="content"> <p>Page content goes here.</p></div>
<div data-role="footer"> <h4>Page Footer</h4> </div>
</div>
LAB 2
Lab 2 Solution
REFERENCES
Raymond, E., S. (1999). The Cathedral and the Bazaar. California: O’Reilly Media Inc.
10 Reasons You Should Have A Mobile Ready Website. Weblog entry. Web Design Tips and FAQ’s. December 1, 2010. http://uniqueamb.com/website-design-blog/?p=112 .
Alford, T. (2011). GIS For The Mobile Web. USGS CDI MAD Presentation. https://my.usgs.gov/confluence/display/cdi/MAD+Meetings
RESOURCES
OpenLayers -- http://openlayers.org/
OpenLayers Mobile – http://m.openlayers.org
jQuery Mobile – http://jquerymobile.com
W3c Mobile -- http://www.w3.org/Mobile/