SlideShare a Scribd company logo
1 of 30
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  ,[object Object]
Semantic Context
Easy—”Language of the Web”
Logic
Styling,[object Object]
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

More Related Content

Similar to Open source mobile web maps

Creating Yahoo Mobile Widgets
Creating Yahoo Mobile WidgetsCreating Yahoo Mobile Widgets
Creating Yahoo Mobile WidgetsRicardo Varela
 
HTML5 and web technology update
HTML5 and web technology updateHTML5 and web technology update
HTML5 and web technology updateDoug Domeny
 
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersAccelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersTodd Anglin
 
Real-World AJAX with ASP.NET
Real-World AJAX with ASP.NETReal-World AJAX with ASP.NET
Real-World AJAX with ASP.NETgoodfriday
 
J Query Presentation
J Query PresentationJ Query Presentation
J Query PresentationVishal Kumar
 
IBM Lotus Notes Domino XPages and XPages for Mobile
IBM Lotus Notes Domino XPages and XPages for MobileIBM Lotus Notes Domino XPages and XPages for Mobile
IBM Lotus Notes Domino XPages and XPages for MobileChris Toohey
 
CTS Conference Web 2.0 Tutorial Part 2
CTS Conference Web 2.0 Tutorial Part 2CTS Conference Web 2.0 Tutorial Part 2
CTS Conference Web 2.0 Tutorial Part 2Geoffrey Fox
 
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM Alfresco Software
 
Html5 and web technology update
Html5 and web technology updateHtml5 and web technology update
Html5 and web technology updateDoug Domeny
 
Mobile library on drupal cil2011
Mobile library on drupal   cil2011Mobile library on drupal   cil2011
Mobile library on drupal cil2011sc20866
 
BNC Tech Forum 09: Lexcycle Stanza demo
BNC Tech Forum 09: Lexcycle Stanza demoBNC Tech Forum 09: Lexcycle Stanza demo
BNC Tech Forum 09: Lexcycle Stanza demoBookNet Canada
 
Itemscript, a specification for RESTful JSON integration
Itemscript, a specification for RESTful JSON integrationItemscript, a specification for RESTful JSON integration
Itemscript, a specification for RESTful JSON integration{item:foo}
 
DG Group - Active Or Passive Website
DG Group - Active Or Passive WebsiteDG Group - Active Or Passive Website
DG Group - Active Or Passive WebsiteFranco De Bonis
 
Grails Introduction - IJTC 2007
Grails Introduction - IJTC 2007Grails Introduction - IJTC 2007
Grails Introduction - IJTC 2007Guillaume Laforge
 

Similar to Open source mobile web maps (20)

Creating Yahoo Mobile Widgets
Creating Yahoo Mobile WidgetsCreating Yahoo Mobile Widgets
Creating Yahoo Mobile Widgets
 
HTML5 and web technology update
HTML5 and web technology updateHTML5 and web technology update
HTML5 and web technology update
 
Jquery mobile
Jquery mobileJquery mobile
Jquery mobile
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersAccelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
 
Real-World AJAX with ASP.NET
Real-World AJAX with ASP.NETReal-World AJAX with ASP.NET
Real-World AJAX with ASP.NET
 
J Query Presentation
J Query PresentationJ Query Presentation
J Query Presentation
 
IBM Lotus Notes Domino XPages and XPages for Mobile
IBM Lotus Notes Domino XPages and XPages for MobileIBM Lotus Notes Domino XPages and XPages for Mobile
IBM Lotus Notes Domino XPages and XPages for Mobile
 
How to Create and Submit an XML SItemap
How to Create and Submit an XML SItemapHow to Create and Submit an XML SItemap
How to Create and Submit an XML SItemap
 
jQuery
jQueryjQuery
jQuery
 
Html5
Html5Html5
Html5
 
CTS Conference Web 2.0 Tutorial Part 2
CTS Conference Web 2.0 Tutorial Part 2CTS Conference Web 2.0 Tutorial Part 2
CTS Conference Web 2.0 Tutorial Part 2
 
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
Enterprise Google Gadgets Integrated with Alfresco - Open Source ECM
 
Html5 and web technology update
Html5 and web technology updateHtml5 and web technology update
Html5 and web technology update
 
Mobile library on drupal cil2011
Mobile library on drupal   cil2011Mobile library on drupal   cil2011
Mobile library on drupal cil2011
 
BNC Tech Forum 09: Lexcycle Stanza demo
BNC Tech Forum 09: Lexcycle Stanza demoBNC Tech Forum 09: Lexcycle Stanza demo
BNC Tech Forum 09: Lexcycle Stanza demo
 
Itemscript, a specification for RESTful JSON integration
Itemscript, a specification for RESTful JSON integrationItemscript, a specification for RESTful JSON integration
Itemscript, a specification for RESTful JSON integration
 
DG Group - Active Or Passive Website
DG Group - Active Or Passive WebsiteDG Group - Active Or Passive Website
DG Group - Active Or Passive Website
 
Grails Introduction - IJTC 2007
Grails Introduction - IJTC 2007Grails Introduction - IJTC 2007
Grails Introduction - IJTC 2007
 
New Browsers
New BrowsersNew Browsers
New Browsers
 

Recently uploaded

Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfPrecisely
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 

Recently uploaded (20)

Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfHyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 

Open source mobile web maps

  • 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.
  • 8.
  • 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.
  • 14.
  • 16. Native Mobile Apps Alford 2011
  • 17. Mobile Web App Alford 2011
  • 19.
  • 20. LAB 1
  • 22.
  • 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.
  • 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
  • 32.
  • 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.
  • 35. OpenLayers Mobile – http://m.openlayers.org
  • 36. jQuery Mobile – http://jquerymobile.com
  • 37. W3c Mobile -- http://www.w3.org/Mobile/

Editor's Notes

  1. Geospatial on the webDon’t’ think I need to go into this but you all know the importance of this.
  2. 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.
  3. 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
  4. 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
  5. Keep those ideas about opensource in mindCombine that with GIS and the Web === OpenLayers
  6. 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. 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
  8. Describe Native and Mobile Web
  9. 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
  10. Open Layers for mobileGmaps is ok, still have key issueESRI -- Maybe, still in the works
  11. 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
  12. Open Layers for mobileGmaps is ok, still have key issueESRI -- Maybe, still in the works
  13. 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
  14. Open Layers for mobileGmaps is ok, still have key issueESRI -- Maybe, still in the works