Refreshing animated tile layer without reloading maps control

Question

I'm using the animated radar layer from the Bing Maps interactive SDK: https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk/weatherradarmap?toWww=1&redig=40890DB2E2C449AC91DAD6CD69209931

I understand how the tile layers are getting assigned. How could I modify that so that the tile layers were refreshed on an interval (say every 15 minutes) without reloading the entire page (meaning without reloading the maps control)?

So far I've pulled out the tileSource loop into its own function:

 function addRadarLayer() {
                // alert to mark time when radar data was loaded or refreshed
                // var d = new Date();
                // alert("Updating radar " + d.toLocaleTimeString());
                // alert (map.layers.length);

                for (var i = 0; i < timestamps.length; i++) {
                    var tileSource = new Microsoft.Maps.TileSource({
                        uriConstructor: urlTemplate.replace('{timestamp}', timestamps[i])
                    });
                    tileSources.push(tileSource);
                };


                if (map.layers.length>0) {
                    // alert('clear layer');
                    // map.layers.clear();
                    // alert(map.layers.length);
                    //alert('add layer')
                    map.layers[0].setOptions({ mercator: tileSources, frameRate: 500 });
                } else {
                    var animatedLayer = new Microsoft.Maps.AnimatedTileLayer({ mercator: tileSources, frameRate: 500 });
                    map.layers.insert(animatedLayer);
                    //alert('New tiles');
                };
            };

then I call that function directly and then using setInterval

                addRadarLayer();

                window.setInterval(function () {
                    addRadarLayer();
                    }, 1000 * 60 * 15); // repeat forever, polling every 15 minutes

            };

But after some time I can see the page no longer refreshing. If I refresh the browser all is OK, but (again) that reloads the map control which is not what I really want.

rbrundritt rbrundritt · Accepted Answer · 2019-07-31T17:01:53

When you refresh the tile source, add a random query string parameter to the URL like

?r=1234 and change the value (1234) on each refresh. This should by pass the local cache which is root cause of your issue.

Refreshing animated tile layer without reloading maps control

1 Answers