GIS for the Mobile Web Using Jquery Mobile

GIS for the Mobile Web Using Jquery Mobile + Open. Layers

Overview Mobile GIS Development Options JQuery Mobile Open. Layers Mobile Demonstrations

Mobile GIS Development Options Native i. Phone SDK Native Android SDK Windows Mobile SDK JQuery Mobile + Open. Layers

Native Mobile Development 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)

Why Mobile Web? Pros Multiple platform support Single point of maintenance No restrictions Cons Less aesthetically pleasing UI Business / commercial Not a good gaming platform

JQuery Mobile Follows the standard Jquery development mantra: "write less, do more" Optimized for touch interfaces Adapts gracefully for various device form factors Layouts: list, details, overlays Rich set of UI controls: toggles, sliders, tabs Themable through CSS

Supported Devices i. OS devices (i. Phone / i. Pad) Android devices Windows Mobile devices Blackberry devices Many other devices…

Basic Code Example <!DOCTYPE html> <head> <title>Page Title</title> <link rel="stylesheet" href="http: //code. jquery. com/mobile/1. 0 b 1/jquery. mobile-1. 0 b 1. 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. 0 b 1/jquery. mobile-1. 0 b 1. min. js"></script> </head> <body> <div data-role="page"> <div data-role="header"><h 1>Page Title</h 1></div> <div data-role="content"> <p>Page content goes here. </p> </div> <div data-role="footer"> <h 4>Page Footer</h 4> </div> </div> </body> </html>

Basic Code Example (con’d) <div data-role="page"> <div data-role="header"><h 1>Page Title</h 1></div><!- /header --> <div data-role="content"> <p>Page content goes here. </p> </div> <div data-role="footer"> <h 4>Page Footer</h 4> </div> </div>

UI Examples

What about maps?

Open. Layers Mobile Features Supported Layer Types: WMS, WFS, Arc. Server REST, KML HTML 5 Current Location API Accelerometer API Simple Feature Annotation Support

HTML Code Example <body> <div data-role="page" id="mappage"> <div data-role="content"> <div id="map"></div> <div data-role="footer"> <a href="#searchpage" data-icon="search" data-role="button">Search</a> <a href="#" id="locate" data-icon="locate" data-role="button">Locate</a> <a href="#layerspage" data-icon="layers" data-role="button">Layers</a> </div>

Java. Script Code Example map = new Open. Layers. Map({ div: "map", theme: null, projection: sm, units: "m", num. Zoom. Levels: 18, max. Resolution: 156543. 0339, max. Extent: new Open. Layers. Bounds( -20037508. 34, 20037508. 34 ), controls: [ new Open. Layers. Control. Attribution(), new Open. Layers. Control. Touch. Navigation({ drag. Pan. Options: { enable. Kinetic: true } }), geolocate, select. Control ], layers: [ new Open. Layers. Layer. OSM("Open. Street. Map", null, { transition. Effect: 'resize' }), new Open. Layers. Layer. Bing({ key: api. Key, type: "Road”,

USGS National Map Layer Configuration new Open. Layers. Layer. XYZ("USGS Base Fill Map", "http: //basemap. nationalmap. gov/Arc. GIS/rest/services/TNM_Vector_Fills_Small/Map. Server/tile/$ {z}/${y}/${x}", { spherical. Mercator: true, num. Zoom. Levels: 20 }), new Open. Layers. Layer. XYZ("USGS Base Vector Map", "http: //basemap. nationalmap. gov/Arc. GIS/rest/services/TNM_Vector_Small/Map. Server/tile/${z}/${ y}/${x}", { spherical. Mercator: true, num. Zoom. Levels: 20, is. Base. Map: false }),

Geo. Location Java. Script var geolocate = new Open. Layers. Control. Geolocate({ id: 'locate-control', geolocation. Options: { enable. High. Accuracy: false, maximum. Age: 0, timeout: 7000 } });

JQuery Moble + Open. Layers Examples

Demonstration http: //intranet. usersmarts. com/dev/mobile/

SLAMM View Sea Level Affecting Marshes Model (SLAMM) Designed for a user-friendly, workflow-based approach to assess impacts of sea-level rise on coastal areas over time Mobile version initially developed as experiment

SLAMM Demonstration http: //www. slammview. org/slammview 2/mobile. html

Developer’s Note Open. Layers Mobile will not work with JQuery Mobile Beta 1 Best with the Alpha 3 release Beta 2 should resolve the

References Jquery Mobile - http: //jquerymobile. com/ Open. Layers Mobile - http: //m. openlayers. org/ Jquery – http: //www. jquery. com Open. Layers – http: //www. openlayers. org Demo URL – http: //intranet. usersmarts. com/dev/mobile/ SLAMM – http: //www. slammview. org & http: //www. slammview. org/slammview 2/mobile. html

Questions?