Your SlideShare is downloading. ×
Open source mobile web maps
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Open source mobile web maps

5,908
views

Published on

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,908
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
69
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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

    • 1. Open-sourceMobile web maps
      Using OpenLayers and jQuery Mobile
      Gregory L. Gunther
    • 2.
    • 3. Flex
      JavaScript
      WMS
      REST
      AJAX
      Design
      GeoRSS
      KML
      JSON
    • 4. General Web Technology Landscape
      • Content encoding
      • 5. Semantic Context
      • 6. Easy—”Language of the Web”
      • 7. Logic
      • 8. Styling
    • Formats as Representation
      Representations of a
      resource
      GeoJSON(AGS)
      GML
      JPEG2000
      KML
      GeoRSS
      JPEG2000
      AMF
      WFS
      HTTP Goodness
      (RESTful)
      SOAP
      WMS
      Resources
      (Map)
    • 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
    • 12.
    • 13. My First OpenLayers Map
    • 14.
    • 15. NATIVE
      MOBILE WEB
    • 16. Native Mobile Apps
      Alford 2011
    • 17. Mobile Web App
      Alford 2011
    • 18. OpenLayers
      MOBILE
    • 19.
    • 20. LAB 1
    • 21. Lab 1 Solution
    • 22.
    • 23. The Mobile Challenge
    • 24. Technologies That Help
    • 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”
    • 26.
    • 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
    • 32. References
      • Raymond, E., S. (1999). The Cathedral and the Bazaar. California: O’Reilly Media Inc.
      • 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. 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/
      • 35. OpenLayers Mobile – http://m.openlayers.org
      • 36. jQuery Mobile – http://jquerymobile.com
      • 37. W3c Mobile -- http://www.w3.org/Mobile/

    ×