SlideShare ist ein Scribd-Unternehmen logo
1 von 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

Weitere Àhnliche Inhalte

Ähnlich wie Open source mobile web maps

Mobile library on drupal cil2011
Mobile library on drupal   cil2011Mobile library on drupal   cil2011
Mobile library on drupal cil2011
sc20866
 
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
BookNet Canada
 
New Browsers
New BrowsersNew Browsers
New Browsers
Rafael Mumme
 

Ähnlich wie 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
 

KĂŒrzlich hochgeladen

KĂŒrzlich hochgeladen (20)

🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 

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/

Hinweis der Redaktion

  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