Follow along!   http://njgeo.org/html5mobile/
Going mobile withJohn ReiserGeospatial Research Labhttp://gis.rowan.edu/
Overview•   Introduction to & quick history of HTML5•   Some mobile mapping inspiration•   A look at the HTML5 mapping API...
What is HTML5?• HTML5 is the latest version of the structured  document language of the Web.• HTML5 is a set of specificat...
Quick history of HTML• Began as a means to cross-reference  research.• First web servers & browsers appear in the  early 1...
Rise of HTML5• In response to high rate of errors in HTML  pages, XHTML was defined.• XHTML was adopted by browsers, but m...
All about applications• Subsequent progress on HTML5 worked  toward developing Web Applications that  would work across br...
HTML5 Trifecta•HTML•CSS•JavaScript
HTML5 for Mobile• HTML5 support is nearly the same between  desktop browsers and their mobile  equivalents.• Functionality...
Why not Native apps?• Native applications have their place in the  mobile ecosystem.• Device-specific functionality may be...
Which is which?
Which is which?
What do you need to get started?
<!DOCTYPE html>
Mapping with HTML5• The interactive nature of web maps are due  to JavaScript.• You can have an HTML5 map within minutes  ...
Inspiration
The Weather Channelhttp://m.weather.com/mapcenter_local/08505
The Weather Channel• Basic map, very little  functionality.• Temporal data;  looped animation of  previous weather  condit...
Texas Wildfire Risk Assessment http://www.texaswildfirerisk.com/
TxWRAP• Access to the same  data available via the  Desktop version.• Wildfires bring with  the possibility of  evacuation...
Rowan SpaceFinder!http://gis.rowan.edu/projects/finder
Rowan SpaceFinder!• Locates rooms on  Rowan University’s  Glassboro campus.• Designed for  mobile, but works on  desktop.•...
Demo: Real-Time Hazard Console     http://node.dtsagile.com/
Real-Time Hazards• Demonstrates the  networking  capabilities of  HTML5.• Updates from any  viewer are then  pushed out to...
Which API is right for you?
ArcGIS JS API          Mapquest Bing Maps                           OpenLayers                     Modest Maps          HT...
Google Maps
Google Maps• Google Maps is currently the most popular  web mapping API.• Provides base maps & imagery, geocoding  service...
Google Maps• Pros  – start quickly  – a small set of data  – services like    geocoding, traffic, Stree    tView, and elev...
OpenLayers
OpenLayers• OpenLayers provides the most highest  degree of support for different data formats  and projections.• Amazing ...
OpenLayers• Pros  – Very powerful and    extensible  – Huge example library    to help you get started  – Supports project...
Leaflet
Leaflet• Leaflet is developed by CloudMade.• Leaflet is open source.• OpenStreetMap derived basemaps available  through Cl...
Leaflet• Pros  –   Very responsive  –   Lightweight  –   Basemaps available  –   Geocoding and routing      services avail...
Mapping APIs Compared
Additional JS Libraries• These additional JS  libraries can aid in  cross-browser  support and quicker  development times....
Geolocation              http://datenform.de/mapeng.html
Geolocation• HTML5 supports physical location of the  device through the navigator.geolocation  object.• If it exists, you...
Position• The Position object  returned contains  two components:  – Coordinates object     •   latitude     •   longitude...
Geolocation Demo• Fields will continue to  update as you move  around (or as  accuracy improves)• watchPosition called  on...
Other Mobile Sensors• HTML5 Device  Access also exposes  additional data in  JavaScript  – Compass/Magnetomet    er  – Acc...
HTML5 and GIS Data
Web-friendly Formats• Many traditional GIS formats are not ideal for  transmission via the Internet.  – Shapefiles and Cov...
Accessing GIS via Web Services• Requests using Web Services allows GIS  servers to receive queries for specific  data, fil...
Data formats on the Web
eXtensible Markup Language• XML is an open, text-  based interchange  format.• Human readable, but  greater emphasis on  m...
JSON• JavaScript Object  Notation is a open  data format based on  how JavaScript  objects are recorded.• Great as a web-b...
GeoJSON• GeoJSON is JSON  that is specifically  structured to represent  geographic  information.• Specific keys:   – geom...
AJAX• Asynchronous JavaScript and XML is a  technique by which web applications make  additional requests for data.• Typic...
AJAX• While XML is in the name, JSON is often  used.• The browser can incorporate the data  received into the currently di...
These formats work for features,    but what about rasters?
Projections
Web Mercator• Yet another mark of  Google’s influence on  web mapping is the  common projection that  most web mapping  ap...
Why Web Mercator?• While cartographers might bemoan the  distortion associated with Mercator, a  projection that preserves...
Web Mercator• This enables division of  the planet into  increasingly smaller  squares.• These square tiles can  then be s...
Uncached Web Maps
Cache Creation• There are two predominate methods for  populating a tile cache with map tiles.  – Direct: using a desktop ...
Number of Levels• You want to render  only the levels  needed for your  application.• Number of tiles  quadruple as the  z...
Caching Schemes• Precache – render the map tiles for a given  extent or zoom level(s) before deployment.• Cache on demand ...
Caching On Demand GIS      Caching                  WebServer    Software                 Map                     Map Tile...
“Rendering the World” https://speakerdeck.com/u/yhahn
Stamen Watercolors http://maps.stamen.com
@kelsosCorner      & @stamenhttp://sta.mn/py6
I’ve got my map and my data,          now what?
Design for Users
User Interface• HTML5 comes with no required UI or human-  interaction guidelines.• Your applications can be designed howe...
Don’t.
GUI Interaction Methods• Desktop interfaces follow the WIMP model.  – Windows, icons, menus, pointer• Mobile devices break...
http://flickr.com/photos/panaromico/6896060374http://flickr.com/photos/jswaby/3200137639
http://www.flickr.com/photos/ambros/6849368514
Desktop GIS UI• Desktop GIS has  been saddled with the  same UI baggage.• Initially command  line, but then the  WIMP inte...
When designing your mobileapplications, throw out everything  you know about Desktop GIS.
Moving your data online is about getting the broadest audience            possible.
HTML5 can adapt to a variety of desktop and mobile devices.
Thank you!John Reiser             Rowan UniversityCampus GIS Specialist   Geospatial Researchreiser@rowan.edu        Lab85...
Going Mobile with HTML5
Going Mobile with HTML5
Going Mobile with HTML5
Going Mobile with HTML5
Going Mobile with HTML5
Going Mobile with HTML5
Going Mobile with HTML5
Upcoming SlideShare
Loading in...5
×

Going Mobile with HTML5

2,357
-1

Published on

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,357
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • HTML5 shifts away from ratifying what browser supported features are already implemented. Instead, the focus has been on introducing greater functionality. HTML 5 and supporting technology emphasizes a greater control over connectivity and performance, better support for offline storage of data, and advances in multimedia and 3D support. HTML5 also provides for greater access to the browser and device, including support for geolocation, device orientation, and sensors such as internal accelerometers.
  • Well, that will get you started with an HTML5 document. So if you are looking to add additional functionality to an existing page, you will need to include this (or replace the existing) DTD at the very top of your pages. But in reality, it’s not that simple, we need some additional functionality that is provided by JavaScript.
  • Going Mobile with HTML5

    1. 1. Follow along! http://njgeo.org/html5mobile/
    2. 2. Going mobile withJohn ReiserGeospatial Research Labhttp://gis.rowan.edu/
    3. 3. Overview• Introduction to & quick history of HTML5• Some mobile mapping inspiration• A look at the HTML5 mapping APIs• Locating your users using geolocation• Data formats used on the web• Map Tiles and the Web Mercator projection• Thoughts on designing for mobile• Questions
    4. 4. What is HTML5?• HTML5 is the latest version of the structured document language of the Web.• HTML5 is a set of specifications, dealing document structure as well as with component parts such as JavaScript, stylesheets, audiovisuals, and mobile-specific functionality.• Broad support for HTML5 across desktop and mobile browsers.
    5. 5. Quick history of HTML• Began as a means to cross-reference research.• First web servers & browsers appear in the early 1990s.• W3C formed in 1994 to define standards for HTML and HTTP.• Standards ignored as commercial browsers race for new functionality.• HTML 4 became the standard in 1998.
    6. 6. Rise of HTML5• In response to high rate of errors in HTML pages, XHTML was defined.• XHTML was adopted by browsers, but many pages “upgraded” by incorporating new features but not declaring themselves as XHTML.• W3C continued work on XHTML2.• A new group, WHATWG, formed to push for interoperable web applications.• In 2006, W3C began working with WHATWG.
    7. 7. All about applications• Subsequent progress on HTML5 worked toward developing Web Applications that would work across browsers. – New form fields – Greater, yet secure, access via browsers – Support for more media & functionality – Performance – Emphasis on mobile
    8. 8. HTML5 Trifecta•HTML•CSS•JavaScript
    9. 9. HTML5 for Mobile• HTML5 support is nearly the same between desktop browsers and their mobile equivalents.• Functionality differs due to the nature of the device; smaller form factor and varying levels of support across mobile platforms.• Despite this, the majority of web pages written in HTML5 will appear and function in a similar fashion.
    10. 10. Why not Native apps?• Native applications have their place in the mobile ecosystem.• Device-specific functionality may be required of an application.• HTML5 functionality is gaining support across mobile devices.• The list of reasons why native apps are superior to HTML5 is shrinking.
    11. 11. Which is which?
    12. 12. Which is which?
    13. 13. What do you need to get started?
    14. 14. <!DOCTYPE html>
    15. 15. Mapping with HTML5• The interactive nature of web maps are due to JavaScript.• You can have an HTML5 map within minutes due to the multiple JS libraries available.• There are also several general JS libraries, such as JQuery, which provide functions for cross platform capability and can aid you in your programming tasks.• JQuery Mobile is what is behind the presentation companion site.
    16. 16. Inspiration
    17. 17. The Weather Channelhttp://m.weather.com/mapcenter_local/08505
    18. 18. The Weather Channel• Basic map, very little functionality.• Temporal data; looped animation of previous weather conditions.• Elegant, custom layer switcher.• Experience using the map matches the rest of the website.
    19. 19. Texas Wildfire Risk Assessment http://www.texaswildfirerisk.com/
    20. 20. TxWRAP• Access to the same data available via the Desktop version.• Wildfires bring with the possibility of evacuations.• Making this data available to the public & the emergency responders benefits both parties.
    21. 21. Rowan SpaceFinder!http://gis.rowan.edu/projects/finder
    22. 22. Rowan SpaceFinder!• Locates rooms on Rowan University’s Glassboro campus.• Designed for mobile, but works on desktop.• Provides access to a large amount of data, but still responsive.
    23. 23. Demo: Real-Time Hazard Console http://node.dtsagile.com/
    24. 24. Real-Time Hazards• Demonstrates the networking capabilities of HTML5.• Updates from any viewer are then pushed out to all other viewers.• Uses Node.js and Socket.io to provide the real-time updates.
    25. 25. Which API is right for you?
    26. 26. ArcGIS JS API Mapquest Bing Maps OpenLayers Modest Maps HTML5 Mapping APIs Yahoo! Maps PolymapsLeaflet MapstractionNokia Maps Google Maps
    27. 27. Google Maps
    28. 28. Google Maps• Google Maps is currently the most popular web mapping API.• Provides base maps & imagery, geocoding services, XML-based data parsing.• Free to use, usage fees for higher traffic users.• Many, many resources available for implementing custom functionality.
    29. 29. Google Maps• Pros – start quickly – a small set of data – services like geocoding, traffic, Stree tView, and elevation profiles• Cons – Closed source – Free, to a point
    30. 30. OpenLayers
    31. 31. OpenLayers• OpenLayers provides the most highest degree of support for different data formats and projections.• Amazing amount of functionality out of the box.• Is open source software.• You must provide your own data; base maps not included.• Largest in terms of library size.
    32. 32. OpenLayers• Pros – Very powerful and extensible – Huge example library to help you get started – Supports projections – Editing tools built in• Cons – Codebase is very large – Does not include any services or base maps; you provide the data
    33. 33. Leaflet
    34. 34. Leaflet• Leaflet is developed by CloudMade.• Leaflet is open source.• OpenStreetMap derived basemaps available through CloudMade.• Lightweight.• Easy to understand.• Several helper functions, but you may need to write your own code.
    35. 35. Leaflet• Pros – Very responsive – Lightweight – Basemaps available – Geocoding and routing services available• Cons – API does not include a nearly as much out-of- the-box functionality as either GMaps or OpenLayers
    36. 36. Mapping APIs Compared
    37. 37. Additional JS Libraries• These additional JS libraries can aid in cross-browser support and quicker development times. – JQuery – Prototype – Dojo• JQuery Mobile is used to power the companion site.
    38. 38. Geolocation http://datenform.de/mapeng.html
    39. 39. Geolocation• HTML5 supports physical location of the device through the navigator.geolocation object.• If it exists, you have some geolocation abilities.• Three methods: – getCurrentPosition – get once – watchPosition – get continuously – clearWatch• Methods called asynchronously, passing a Position object.
    40. 40. Position• The Position object returned contains two components: – Coordinates object • latitude • longitude • accuracy • altitude • altitudeAccuracy • heading • speed – Timestamp
    41. 41. Geolocation Demo• Fields will continue to update as you move around (or as accuracy improves)• watchPosition called on page load• clearWatch called when Back button is pressed
    42. 42. Other Mobile Sensors• HTML5 Device Access also exposes additional data in JavaScript – Compass/Magnetomet er – Accelerometer – Device Orientation• These can be combined to provide a richer, location-based http://flickr.com/photos/marcoarment/1955464307/ mobile experience.
    43. 43. HTML5 and GIS Data
    44. 44. Web-friendly Formats• Many traditional GIS formats are not ideal for transmission via the Internet. – Shapefiles and Coverages are composed of several different files with rigid relative structure. – Rasters come in common formats (JPEG) but are often far larger in size than commonly encountered. – Often, users only request a localized portion of the data. Location specific retrieval is not possible with most formats.
    45. 45. Accessing GIS via Web Services• Requests using Web Services allows GIS servers to receive queries for specific data, filtering by location or attribute.• The entire data set could be pushed back to the client, but this is not required.• Making a request to OSM like so: http://www.openstreetmap.org/api/0.6/map?bbox=- 75.120765,39.710157,-75.119697,39.710953 returns data within the bounding box defined.
    46. 46. Data formats on the Web
    47. 47. eXtensible Markup Language• XML is an open, text- based interchange format.• Human readable, but greater emphasis on machine parsing.• HTML and XML are closely related.• Many Web GIS data formats based on XML.
    48. 48. JSON• JavaScript Object Notation is a open data format based on how JavaScript objects are recorded.• Great as a web-based data interchange format.• Text based, human readable.
    49. 49. GeoJSON• GeoJSON is JSON that is specifically structured to represent geographic information.• Specific keys: – geometry – properties (attributes) – crs (projection info)• Still text based & human readable.
    50. 50. AJAX• Asynchronous JavaScript and XML is a technique by which web applications make additional requests for data.• Typically, after the page is loaded within the browser, any open connections are closed until the user navigates to the next page.• AJAX allows for additional data requests that occur in the background.• Background connections allow the rest of the page to function and to not require user input.
    51. 51. AJAX• While XML is in the name, JSON is often used.• The browser can incorporate the data received into the currently displayed page.• Data could be continuously updated and pushed back to the browser on a regular basis.• The browser can also receive user feedback and send the data asynchronously back to the server.
    52. 52. These formats work for features, but what about rasters?
    53. 53. Projections
    54. 54. Web Mercator• Yet another mark of Google’s influence on web mapping is the common projection that most web mapping applications use today.• Based on a spherical model of the Earth, Web Mercator reprojects the planet (minus the poles) into a square.
    55. 55. Why Web Mercator?• While cartographers might bemoan the distortion associated with Mercator, a projection that preserves shape allows for a fixed set of zoom levels.• Pre-Google Maps, there were very few attempts to define an open structure for map tiling.• Serving static map images from disk will always be faster than rendering images from GIS data.
    56. 56. Web Mercator• This enables division of the planet into increasingly smaller squares.• These square tiles can then be served using a static web server, using a defined directory structure.• example.com/z/x/y.png
    57. 57. Uncached Web Maps
    58. 58. Cache Creation• There are two predominate methods for populating a tile cache with map tiles. – Direct: using a desktop computer to generate the tiles from a GIS, storing them locally or remotely. • Arc2Earth, TileMill are two direct tile producers. – Intermediary: using middle-man software that passes on requests to a GIS server while creating and managing the cache. • TileCache and GeoWebCache are two intermediaries.
    59. 59. Number of Levels• You want to render only the levels needed for your application.• Number of tiles quadruple as the zoom level increases.• Limit the zoom levels of your map to what is appropriate.• Specify the tile ordering scheme.
    60. 60. Caching Schemes• Precache – render the map tiles for a given extent or zoom level(s) before deployment.• Cache on demand – only cache areas at high zoom levels when the first request is made. – Stamen’s Watercolor map tiles are cached to a certain level, then drawn as needed. – Using a CDN (like Amazon CloudFront) prevents you from handling on-demand requests.• Cache only in your area of focus.• Cache only areas with data.
    61. 61. Caching On Demand GIS Caching WebServer Software Map Map Tile does not exist: CachGDB Rendered then stored. e GIS Caching WebServer Software Map Map Tile does exist: CachGDB Pre-rendered tile returned. e
    62. 62. “Rendering the World” https://speakerdeck.com/u/yhahn
    63. 63. Stamen Watercolors http://maps.stamen.com
    64. 64. @kelsosCorner & @stamenhttp://sta.mn/py6
    65. 65. I’ve got my map and my data, now what?
    66. 66. Design for Users
    67. 67. User Interface• HTML5 comes with no required UI or human- interaction guidelines.• Your applications can be designed however you see fit.• With mapping applications, one might be tempted to look to the desktop for inspiration.
    68. 68. Don’t.
    69. 69. GUI Interaction Methods• Desktop interfaces follow the WIMP model. – Windows, icons, menus, pointer• Mobile devices break from this model.• Touch changes the way we interact with devices.• Our familiarity with WIMP interfaces is learned.
    70. 70. http://flickr.com/photos/panaromico/6896060374http://flickr.com/photos/jswaby/3200137639
    71. 71. http://www.flickr.com/photos/ambros/6849368514
    72. 72. Desktop GIS UI• Desktop GIS has been saddled with the same UI baggage.• Initially command line, but then the WIMP interface came along and all GIS applications followed suit.• Does not work for a mobile environment.
    73. 73. When designing your mobileapplications, throw out everything you know about Desktop GIS.
    74. 74. Moving your data online is about getting the broadest audience possible.
    75. 75. HTML5 can adapt to a variety of desktop and mobile devices.
    76. 76. Thank you!John Reiser Rowan UniversityCampus GIS Specialist Geospatial Researchreiser@rowan.edu Lab856-256-4817 http://gis.rowan.edu/@johnjreiser 856-256-4861 @rowangeolab
    1. A particular slide catching your eye?

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

    ×