_HTML5 for Rich Geospatial applications on the web

FOSS4G Denver 2011

_Javier Alvarez

_Introduction

  • CartoSet on wednesday: great geospatial framework → @jatorre

  • CartoDB on thursday: awesome geospatial DB → @tokumin

  • DesignMaps on thursday as well: how to design best maps → @saleiva

_What is this about?

  • How HTML5 can improve web mapping

  • Demo some projects made by Vizzuality

_What is HTML5?

  • "HTML5 is a language for structuring and presenting content for the World Wide Web, a core technology of the Internet..."(Wikipedia)

  • HTML5 is great for developing web applications

_Where can I use HTML5?

Some technologies appeared before than others in different browsers versions

_Evolution of the Web

Evolution of the Web
NO-OPEN-SOURCE

_Introducing GeoCAT

GeoCAT
OPEN-SOURCE

_GeoCAT!

GeoCAT
OPEN-SOURCE

_CSS3

  • CSS3 new options

  • Box-shadow

  • Background gradients

  • ...

_Canvas

  • Using Canvas on markers

  • Custom OverlayView in Gmaps v3, Leaflet, OSM,...

  • ...

_Layers

  • Add/remove

  • Hide/show

  • Sort

  • ... layers in the map

_Visual Raster

GMBA flash

→

Visual raster flash

_Imazon

Imazon
NO-OPEN-SOURCE

_OMT -> Web workers

  • Asynchronous - "Additional threads not blocking user-interface"

  • Server side vs client side for georeferencing

_Front-end recommendations

  • jQuery framework

  • Modernizr plugin

  • Efforts

  • ...and love!

_Conclusions

  • HTML5 brings superb possibilities for web-mapping

  • Canvas enables client side rendering of maps

  • CSS3 help to create great user interfaces

  • IE<9 sucks!

_Thanks!

Javier Álvarez

Vizzuality, @xavijam


This presentation is available at xavijam.github.com/html5-foss4g

← →

/

#
xavijam