Open source mobile web maps
•Download as PPTX, PDF•
2 likes•4,003 views
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.
More Related Content
Similar to Open source mobile web maps
Similar to Open source mobile web maps (20)
Recently uploaded
Recently uploaded (20)
Open source mobile web maps
- 1. Open-sourceMobile web maps Using OpenLayers and jQuery Mobile Gregory L. Gunther
- 3. Flex JavaScript WMS REST AJAX Design GeoRSS KML JSON
- 6. Easy—”Language of the Web”
- 7. Logic
- 9. Open-source
- 10. OpenLayers
- 11. 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
- 13. My First OpenLayers Map
- 16. Native Mobile Apps Alford 2011
- 17. Mobile Web App Alford 2011
- 20. LAB 1
- 21. Lab 1 Solution
- 25. 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 themeabledesign”
- 27. UI Examples Alford 2011
- 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. LAB 2
- 31. Lab 2 Solution
- 33. 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.
- 35. OpenLayers Mobile – http://m.openlayers.org
- 36. jQuery Mobile – http://jquerymobile.com
- 37. W3c Mobile -- http://www.w3.org/Mobile/
Editor's Notes
- Geospatial on the webDon’t’ think I need to go into this but you all know the importance of this.
- 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.
- 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
- 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
- Keep those ideas about opensource in mindCombine that with GIS and the Web === OpenLayers
- 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
- 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
- Describe Native and Mobile Web
- 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
- Open Layers for mobileGmaps is ok, still have key issueESRI -- Maybe, still in the works
- 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
- Open Layers for mobileGmaps is ok, still have key issueESRI -- Maybe, still in the works
- 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
- Open Layers for mobileGmaps is ok, still have key issueESRI -- Maybe, still in the works