Dynamic / animated tile layers (v7) RRS feed

  • General discussion

  • I'm evaluating a couple of different methods to create animated base maps (i.e those in which the underlying tileset changes dynamically), to see whether any of them are actually viable. So far, I've considered:

    • using animated GIF tiles,
    • updating and refreshing the tilesource based on a timer or other event trigger
    • using some clever CSS3 to manipulate the image source for each tile (think http://www.optimum7.com/css3-man/)
    • using a dynamically-created HTML5 <video> overlay (or, rather, an underlay)

    All of these have various pros and cons, but none of them seem to quite do what I'm after. I just wondered if anybody else had tried creating dynamic tile layers and, if so, had got any suggestions or tips on their experience. I can't seem to find any real-life examples on the web, so I'm wondering if nobody else has succeeded either....

    twitter: @alastaira blog: http://alastaira.wordpress.com/
    • Changed type Ricky_Brundritt Tuesday, June 7, 2011 1:13 PM
    • Changed type Ricky_Brundritt Friday, November 11, 2011 6:28 PM
    • Moved by Ricky_Brundritt Friday, March 9, 2012 5:38 PM (From:Bing Maps: Map Control and Web services Development)
    Tuesday, May 17, 2011 2:03 PM

All replies

  • Hi Alastair, I've tried a couple of thing while playing with Seadragon actually.

    It's not an easy one, but as far as I went through my tests, the most performant solution was to update manually the tile image elements based on the current view and use a simple setInterval method.

    Now that we can rely on HTML5, this possibility would be really interesting as this kind of manipulation through a canvas would be accelerated by the GPU in many cases and you should be able to provide a really smooth and nice experience.


    So, to sum up my words, I would go with HTML5 canvas based on composition of multiples videos elements rendering inside the canvas.
    The main thing you need to consider would concern the type of content that you want to show, a video would cost a lot in terms of bandwidth and require lots of efforts to generate a tiled video.

    • If you want detailed and complex elements: video rendering inside canvas based on tile generation
    • If you want less detailed: image rendering inside canvas and setInterval to update all 'tiles' elements inside the canvas
    • If you want to maximise the browser compatibility on this point: use javascript to update img generated-elements directly in the DOM but it's a really hazardous way

    There is no perfect way to do this, let us know what you choose, it could help us all.
    When I will be a little less charged, I will try something. Don't hesitate to reach me directly if you want us to share our thoughts.

    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    Tuesday, May 17, 2011 2:46 PM
  • In the past I used several tile layers and then animated them by changing the visibility. That works fine when you have static tile sets. As for dynamic ones it would be a bit trickery as the tiles would get cached. What about adding the time to the tile source url and then updating this URL on an interval? You could also have two tile layers and alter their visibility. i.e. load one tile layer. In the background set the URL to the second tilelayer, then animate the opacity of the two layers to switch them, then change the tile url of the other tile layer.
    Windows Live Developer MVP - http://rbrundritt.wordpress.com | http://inknowledge.co.uk
    Wednesday, May 18, 2011 6:39 PM
  • Manipulating every DOM elements costs a lot and for performance issues, changing the opacity on the TileLayer directly could be a good option.

    Alastair, did you try something and get some relevant results about it?

    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    Thursday, May 19, 2011 10:09 AM
  • Haven't had chance yet. I was hoping to re-use a tilelayer that refreshed to show an animated timeline. The problem I had was (as Ricky pointed out) the tiles were being cached rather than updated during a session, and changing the tile source URL on an existing tile layer didn't work - I can't seem to find a way to force tiles in a layer to refresh having changed the source URL other than dropping the layer completely and creating a new one.

    Rather than re-using and swapping between only two tile layers, I'm going to have a go at constantly rebuilding a "background" tilelayer and, when it's ready (i.e. when the tiledownloadcomplete event fires), dropping the tilelayer in front of it and making the old background the new foreground tilelayer. Then, creating a new background layer and start to download the tiles for the next frame of animation into that layer and keep repeating the process.

    I've no idea how this is going to work performance-wise - my worry is that I might not get any benefits of caching whatsoever - let's say that my tiles animated on a 20-frame loop. When I got to rebuilding the first frame again at the beginning of the second loop, I want to make sure that I don't download all the tiles again!

    Anyway, I'll let you know if I get anywhere - thanks for your suggestions!

    twitter: @alastaira blog: http://alastaira.wordpress.com/
    Thursday, May 19, 2011 12:39 PM