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.
Going Mobile with HTML5
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 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
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.
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.
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
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.
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.
The Weather Channelhttp://m.weather.com/mapcenter_local/08505
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.
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.
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.
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.
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
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.
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
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.
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
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.
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.
Position• The Position object returned contains two components: – Coordinates object • latitude • longitude • accuracy • altitude • altitudeAccuracy • heading • speed – Timestamp
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
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.
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.
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.
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.
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.
These formats work for features, but what about rasters?
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.
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.
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
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.
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.
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.
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
“Rendering the World” https://speakerdeck.com/u/yhahn
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.
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.
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.
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.