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

Open source mobile web maps

on

  • 6,064 views

 

Statistics

Views

Total Views
6,064
Views on SlideShare
3,298
Embed Views
2,766

Actions

Likes
2
Downloads
65
Comments
0

7 Embeds 2,766

http://blog.mapvibes.net 2621
http://feeds2.feedburner.com 131
http://translate.googleusercontent.com 9
http://webcache.googleusercontent.com 2
http://www.linkedin.com 1
http://cache.baiducontent.com 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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

Open source mobile web maps Open source mobile web maps Presentation Transcript

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