Embed Size (px)
DESCRIPTION
Citation preview
Follow along!
http://njgeo.org/html5mobile/
John ReiserGeospatial Research Labhttp://gis.rowan.edu/
Going mobile with
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
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.
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 Trifecta
•HTML
•CSS
• JavaScript
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.
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 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.
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 conditions.
• Elegant, custom layer switcher.
• Experience using the map matches the rest of the website.
Texas Wildfire Risk Assessmenthttp://www.texaswildfirerisk.com/
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.
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.
• Provides access to a large amount of data, but still responsive.
Demo: Real-Time Hazard Consolehttp://node.dtsagile.com/
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.
Which API is right for you?
HTML5 Mapping APIs
Bing Maps
Google Maps
OpenLayers
Leaflet
Modest Maps
Mapstraction
Mapquest
Yahoo! Maps
ArcGIS JS API
Polymaps
Nokia Maps
Google Maps
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, StreetView, and elevation profiles
• Cons– Closed source– Free, to a point
OpenLayers
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• 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
Mapping API Size
Basemaps
Built In Geometry
Functionality
Projection Support
Vector Formats Supporte
d
Web Services Supporte
dServices Provided
Google Maps
~100kb Included Medium-High
No (custom
code)
GeoRSS, KML,
Google Fusion Tables
WMTS
Directions, Elevation, Geocoding, Search, StreetView, Traffic, Weather
OpenLayers
~200kb
Not Included High Yes
ArcXML, CSV,
GeoJSON, GeoRSS,
GML, GPX, KML, OSM,
XML
ArcGIS REST,
ArcIMS, Mapserver
, Tilecache,
WFS, WMS, WMTS
None
Leaflet ~26kb
Included (with
developer account)
Low
No (possible
with plugin)
GeoJSON WMS, WMTS
Directions, Geocoding, Search
Mapping APIs Compared
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
http://datenform.de/mapeng.html
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
Other Mobile Sensors• HTML5 Device
Access also exposes additional data in JavaScript– Compass/
Magnetometer– Accelerometer– Device Orientation
• These can be combined to provide a richer, location-based mobile experience.
http://flickr.com/photos/marcoarment/1955464307/
HTML5 and GIS Data
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.
Data formats on the Web
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.
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.
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• 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.
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?
Projections
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
Uncached Web Maps
every time scale or extent is changed
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
Cache
Web Map
Caching Softwar
e
GIS Server
Cache
Web Map
Caching Softwar
e
GIS Server
Map Tile does not exist:Rendered then stored.
Map Tile does exist:Pre-rendered tile returned.GDB
GDB
Updates won’t appear on your web map until the cache is refreshed!
“Rendering the World”https://speakerdeck.com/u/yhahn
Stamen Watercolorshttp://maps.stamen.com
@kelsosCorner & @stamen
http://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
however you see fit.• With mapping applications, one might
be tempted to look to the desktop for inspiration.
Don’t.
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.
http://www.guidebookgallery.org/
http://flickr.com/photos/panaromico/6896060374
http://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 interface came along and all GIS applications followed suit.
• Does not work for a mobile environment.
When designing your mobile applications, 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!
Rowan UniversityGeospatial Research Labhttp://gis.rowan.edu/856-256-4861@rowangeolab
John ReiserCampus GIS [email protected]@johnjreiser
