Downloaded 73 times
Uploaded byN/A
Open source mobile web maps
This document discusses using OpenLayers and jQuery Mobile to create mobile web maps. It provides examples of basic map implementations using OpenLayers for mapping capabilities and jQuery Mobile for a responsive user interface. It also references resources for using these open source libraries to build mobile-optimized geospatial web applications and sites.
Open source mobile web maps
- 1. Open-sourceMobile web mapsUsingOpenLayers and jQuery MobileGregory L. Gunther
- 3.
- 4. General Web TechnologyLandscape Content encoding
- 5.
- 6.
- 7.
- 8. StylingFormats as RepresentationRepresentationsof a resourceGeoJSON(AGS)GMLJPEG2000KMLGeoRSSJPEG2000AMFWFSHTTP Goodness (RESTful)SOAPWMSResources(Map)
- 9.
- 10.
- 11. OpenLayers“OpenLayers makes iteasy 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
- 13.
- 15.
- 16.
- 17.
- 18.
- 20.
- 21.
- 23.
- 24.
- 25. jQuery Mobile“A unifieduser 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 themeabledesign”
- 27.
- 28. 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>
- 29. 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>
- 30.
Editor's Notes
- #3 Geospatial on the webDon’t’ think I need to go into this but you all know the importance of this.
- #4 So most of us are well aware of this but now its changing again. Problem is from traditonal GIS perspective is that this can be fairly technical. So we are going to be talking about lots of technologiesThis is kind of how things are now. Really, doing traditional GIS requires a fair amount of geeknessDon’t despair, this is doable.
- #5 JavaScriptClient sideLightweightPossitioned well for html 5 revolutionNo proprietary technology (Flex)Modelled after gmaps from 2005AJAXBusiness CaseIts freeSupports universallyFairly Easy to learnLarger sense – GISifiying the webVery very supportive of nearly all Geoweb representations or formatsCompeting SoftwareGmapsapi -- requires key, lots of workarounds for representation and format supportKa-MapArcGIS Server JS API
- #7 Cathedral and the BazaarEric S. Raymond – FetchmailLinuxCathedral – Built by masons with mystical skills (secret) only to be done by experts (software vendors)Bazaar – Grassroots markets, each contributing to a beautiful, well functioning and fully service creation
- #8 Keep those ideas about opensource in mindCombine that with GIS and the Web === OpenLayers
- #9 JavaScriptClient sideLightweightPossitioned well for html 5 revolutionNo proprietary technology (Flex)Modelled after gmaps from 2005AJAXBusiness CaseIts freeSupports universallyFairly Easy to learnLarger sense – GISifiying the webVery very supportive of nearly all Geoweb representations or formatsCompeting SoftwareGmapsapi -- requires key, lots of workarounds for representation and format supportKa-MapArcGIS Server JS API
- #12 This is great but we really need to be playing in the mobile spaceSearch Engines: google has an entirely separate Your site won’t work: Especially for not the most highend devicesMobile device web users web will overtake 3 years: Even growing faster in use than desktop use did1 in 5 americans 2010 accesed the web with a mobile device every day93% us adults own cell phoneEstimated 2 billion cell phones globally
- #13 Describe Native and Mobile Web
- #16 Keep your Web GIS and Opensource ideas in mindMake it mobileREALLY RAW Native js library supporting mobileStill in the worksNot “minimal” download like jsarcgis library
- #17 Open Layers for mobileGmaps is ok, still have key issueESRI -- Maybe, still in the works
- #19 width=device width --the layout of this page is flexible enough to adapt itself to various screen widths, so please use a viewport width that makes the content readableInitial max scale basically mean == I mean itUser-scalable = downt allow user to zoomPage scopeOnloadHtml 5 tagesDiv tag for map
- #20 Open Layers for mobileGmaps is ok, still have key issueESRI -- Maybe, still in the works
- #21 Mobile Space presents us with a variety of issuesBroad based usersWide range of expectations Sovereign and transiet usageMobile web site users are often transient – focused intentDevice divergenceTabletsPhonesOlder phonesScreen size variations and limitationsContinued divergence of mobile browserBBAndroidSafariBrowser that prerenderOpera Mobile and MiniAmazon new Fire BrowserWebOSFireFox MobileSymbianDesign IssuesMouseovers don’t work on touchscreenFatfingeringNo ZOOMBandwidth
- #24 Open Layers for mobileGmaps is ok, still have key issueESRI -- Maybe, still in the works