0
Open-sourceMobile web maps<br />Using OpenLayers and jQuery Mobile<br />Gregory L. Gunther<br />
Flex<br />JavaScript<br />WMS<br />REST<br />AJAX<br />Design<br />GeoRSS<br />KML<br />JSON<br />
General Web Technology Landscape <br /><ul><li>Content encoding
Semantic Context
Easy—”Language of the Web”
Logic
Styling</li></li></ul><li>Formats as Representation<br />Representations of  a <br />resource<br />GeoJSON(AGS)<br />GML<b...
Open-source<br />
OpenLayers<br />
OpenLayers<br />“OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles and markers loade...
My First OpenLayers Map<br />
NATIVE<br />MOBILE WEB<br />
Native Mobile Apps<br />Alford 2011<br />
Mobile Web App<br />Alford 2011<br />
OpenLayers<br />MOBILE<br />
LAB 1<br />
Lab 1 Solution<br />
The Mobile Challenge<br />
Technologies That Help<br />
jQuery Mobile<br />“A unified user interface system across all popular mobile device platforms, built on the rock-solid jQ...
UI Examples<br />Alford 2011<br />
Coding<br /><!DOCTYPE html> <br /><html> <br />  <head> <br />    <title>Page Title</title><br />    <link rel="stylesheet...
OpenLayers and jQuery<br /><body><br />  <div data-role="page" id="mappage"><br /><div data-role="header"><h1>Page Title</...
LAB 2<br />
Upcoming SlideShare
Loading in...5
×

Open source mobile web maps

6,063

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,063
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
70
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • 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
  • Transcript of "Open source mobile web maps"

    1. 1. Open-sourceMobile web maps<br />Using OpenLayers and jQuery Mobile<br />Gregory L. Gunther<br />
    2. 2.
    3. 3. Flex<br />JavaScript<br />WMS<br />REST<br />AJAX<br />Design<br />GeoRSS<br />KML<br />JSON<br />
    4. 4. General Web Technology Landscape <br /><ul><li>Content encoding
    5. 5. Semantic Context
    6. 6. Easy—”Language of the Web”
    7. 7. Logic
    8. 8. Styling</li></li></ul><li>Formats as Representation<br />Representations of a <br />resource<br />GeoJSON(AGS)<br />GML<br />JPEG2000<br />KML<br />GeoRSS<br />JPEG2000<br />AMF<br />WFS<br />HTTP Goodness<br /> (RESTful)<br />SOAP<br />WMS<br />Resources<br />(Map)<br />
    9. 9. Open-source<br />
    10. 10. OpenLayers<br />
    11. 11. OpenLayers<br />“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<br />
    12. 12.
    13. 13. My First OpenLayers Map<br />
    14. 14.
    15. 15. NATIVE<br />MOBILE WEB<br />
    16. 16. Native Mobile Apps<br />Alford 2011<br />
    17. 17. Mobile Web App<br />Alford 2011<br />
    18. 18. OpenLayers<br />MOBILE<br />
    19. 19.
    20. 20. LAB 1<br />
    21. 21. Lab 1 Solution<br />
    22. 22.
    23. 23. The Mobile Challenge<br />
    24. 24. Technologies That Help<br />
    25. 25. jQuery Mobile<br />“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”<br />
    26. 26.
    27. 27. UI Examples<br />Alford 2011<br />
    28. 28. Coding<br /><!DOCTYPE html> <br /><html> <br /> <head> <br /> <title>Page Title</title><br /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /><br /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script><br /> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script><br /> </head><br />……….<br /><div data-role="page"><br /> <div data-role="header"><h1>Page Title</h1></div<br /> <div data-role="content"> <p>Page content goes here.</p></div><br /> <div data-role="footer"> <h4>Page Footer</h4> </div><br /></div><br />
    29. 29. OpenLayers and jQuery<br /><body><br /> <div data-role="page" id="mappage"><br /><div data-role="header"><h1>Page Title</h1></div<br /> <div data-role="content"><br /> <div id="map"></div><br /> </div><br /> <div data-role="footer"><br /> <a href="#layerspage" data-icon="layers" data-role="button">Layers</a><br /> </div><br />……<br /><div data-role="page“ id=“layerpage”><br /> <div data-role="header"><br /> <a href="#mappage" data-role="button"><<Back</a><br /></div><br /> <div data-role="content"> <p>Page content goes here.</p></div><br /> <div data-role="footer"> <h4>Page Footer</h4> </div><br /></div><br />
    30. 30. LAB 2<br />
    31. 31. Lab 2 Solution<br />
    32. 32. References<br /><ul><li>Raymond, E., S. (1999). The Cathedral and the Bazaar. California: O’Reilly Media Inc.
    33. 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.
    34. 34. Alford, T. (2011). GIS For The Mobile Web. USGS CDI MAD Presentation.https://my.usgs.gov/confluence/display/cdi/MAD+Meetings</li></li></ul><li>Resources<br /><ul><li>OpenLayers-- http://openlayers.org/
    35. 35. OpenLayers Mobile – http://m.openlayers.org
    36. 36. jQuery Mobile – http://jquerymobile.com
    37. 37. W3c Mobile -- http://www.w3.org/Mobile/</li>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×