Feature Request: Use HTML5 Canvas element to render the map RRS feed

  • General discussion

  • We would like to leverage the new HTML5 Canvas element to render the map tiles and map polylines/shapes/markers instead of using multiple <div>'s and svg.

    This would give us a lot more power with the new Canvas for adding a higher degree of markers/shape vertices to the map than currently available.

    We would also like to see the map using the a smooth canvas zoom of the tiles as demoed at: http://ie.microsoft.com/testdrive/Graphics/DeepZoom/
    • Moved by Ricky_Brundritt Saturday, March 10, 2012 12:19 PM (From:Bing Maps: Map Control and Web services Development)
    Tuesday, February 15, 2011 8:58 PM

All replies

  • The V7 map control already uses HTML5 capabilities as they are available in the browser.  It does not use Canvas for layout of tiles as this turned out to be less efficient than other techniques.  It does however take full advantage of hardware accelerated layout on browsers that support it (like IE9).
    Tuesday, February 15, 2011 10:46 PM
  • Can you give specifics about why Canvas was seen as less efficient?
    Tuesday, February 15, 2011 10:48 PM
  • Canvas involves compositing multiple times (once to composite the map tile image to the canvas buffer, then the canvas buffer has to be composited with the rest of the page elements to the screen).  Animations involve updating every pixel in the canvas element every frame.  Some browsers hardware accelerate this, but it's still a cost that can be noticed on lower-end systems, and if the system falls back to software is very noticeable.  Using CSS transforms to layout page elements directly involves only a single composition.  This was backed up by perf testing using both techniques on all available browsers.  Additionally some browsers (like iOS) hardware accelerate CSS transforms where they do not accelerate canvas image layout.
    Tuesday, February 15, 2011 10:58 PM
  • @Duncan - thankyou for the detailed response - interesting stuff to know.
    Beginning Spatial with SQL Server http://www.apress.com/book/view/1430218290
    Tuesday, February 15, 2011 11:42 PM
  • I think it would be cool if we had some way of opting into using the Canvas. If the map used a canvas element we could add animations and image filters to the map. This would make for some cool features that we currently can not implement. Alternatively a canvas layer (kind of like a tile layer) would be a neat feature.

    Monday, September 19, 2011 5:07 PM
  • There's some nice demos of very responsive maps rendered with HTML5 canvas, containing lots (i.e. millions) of items, here:


    twitter: @alastaira blog: http://alastaira.wordpress.com/
    Tuesday, September 20, 2011 3:24 PM
  • Supporting the HTML5 Canvas element is very important to us. Most of our LOB applications require rendering thousands of features on the fly and the current v7 performance is not acceptable.

    Saturday, December 3, 2011 1:21 AM
  • Hi samm21. As mentioned before, rendering your data on a canvas would make things slower. For what you want to do I would suggest clustering, or creating a service that generates tile layers out of your data at higher zoom levels.

    As for using a canvas in a map, I think the option of a canvas layer would be cool. I hacked a demo togeter recently that placed a canvas over the map and added a snowing animation. It was great, it looked like it was snowing on the map. Another cool thing which would be cool is a canvas pushpin. You could create a pushpin that was animated or make it so you can rotate your icon (frequent question). This would be great if you wanted to show arrows on the map to indicate directions.

    Saturday, December 3, 2011 4:27 PM

    Richard, thank you for your suggestion about using clustering or using a tile service. However this approach doesn't work for us since we regularly need to display and interact with thousands of lines and polygons as opposed to points/pushpins...

    Moreover, we are not convinced that the canvas makes things slower; at least this is not what we are seeing with other vendors implementations; one of these implementations is the one "tanoshimi" has posted earlier: http://www.giscloud.com/blog/gis-cloud-starts-html5-mapping-revolution

    And if the canvas element is a problem for low-end systems as "Duncan Lawler" has pointed above, why not fallback to a <div> solution depending on the system capability? The AJAX Map Control already implements a similar logic when it comes to the animation of tile layers. Tile layer animation could be automatically disabled if the map control detects that the performnace is not going to be acceptable. The AnimationVisibility enumeration is documented at: http://msdn.microsoft.com/en-us/library/hh312798.aspx

    • Edited by samm21 Tuesday, December 6, 2011 1:12 AM
    Tuesday, December 6, 2011 1:07 AM