_HTML5 for Rich Geospatial applications on the web

FOSS4G Denver 2011

_Javier Alvarez


  • 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

_Introducing GeoCAT





  • CSS3 new options

  • Box-shadow

  • Background gradients

  • ...


  • Using Canvas on markers

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

  • ...


  • Add/remove

  • Hide/show

  • Sort

  • ... layers in the map

_Visual Raster

GMBA flash

Visual raster flash



_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!


  • HTML5 brings superb possibilities for web-mapping

  • Canvas enables client side rendering of maps

  • CSS3 help to create great user interfaces

  • IE<9 sucks!


Javier Álvarez

Vizzuality, @xavijam

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