Question

The Bing Maps and Google Maps JavaScript/Ajax Mapping Controls/Libraries use <img/> tags for rending map tiles and such.

Are there any mapping controls/libraries available that utilize the HTML5 Canvas element for rendering the map tiles?

A more modern control would be nice, especially since it’ll utilize hardware acceleration in the new browsers for rendering the map display.

Answer 1

My current favourite Javascript Maps API is Leaflet (http://leaflet.cloudmade.com). It’s still only a very young control (first public release was a few months ago) and it’s got a few bugs to be ironed out but it’s got a lovely clean, lightweight API.

Best of all, all the map objects are designed to be easily extendable so, starting from the abstract ILayer interface, you can…:

• create regular tile layers that load images referenced by tile x/y/z
  coordinates (http://leaflet.cloudmade.com/reference.html#tilelayer)
• create tile layers that load data from a WMS server
  (http://leaflet.cloudmade.com/reference.html#tilelayer-wms)
• (and this is the specific answer to your question), create tile layers that are drawn using canvas elements on the client side (http://leaflet.cloudmade.com/reference.html#tilelayer-canvas)

And because it’s open source, you can (unlike Bing or Google controls) extend these tile layers still further if you desire….