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. 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. 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. 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. 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
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. 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.
16. 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.
19. 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.
21. 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.
23. 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.
25. 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.
29. 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.
30. 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
32. 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.
33. 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
35. 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.
36. 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
38. 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.
40. 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.
41. Position
• The Position object
returned contains
two components:
– Coordinates object
• latitude
• longitude
• accuracy
• altitude
• altitudeAccuracy
• heading
• speed
– Timestamp
42. 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
43. 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.
45. 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.
46. 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.
48. 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.
49. 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.
50. 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.
51. 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.
52. 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.
57. 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.
58. 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.
59. 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
61. 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.
62. 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.
63. 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.
64. Caching On Demand
GIS Caching Web
Server Software Map
Map Tile does not exist:
Cach
GDB Rendered then stored.
e
GIS Caching Web
Server Software Map
Map Tile does exist:
Cach
GDB Pre-rendered tile returned.
e
70. 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.
72. 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.
77. 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.
78.
79. When designing your mobile
applications, throw out everything
you know about Desktop GIS.
80. Moving your data online is about
getting the broadest audience
possible.
83. Thank you!
John Reiser Rowan University
Campus GIS Specialist Geospatial Research
reiser@rowan.edu Lab
856-256-4817 http://gis.rowan.edu/
@johnjreiser 856-256-4861
@rowangeolab
Notas del editor
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.