How i make animation for radar raster like a rainviewer on mapbox

Question

I'm using rainviewer tiles for the radar data.

https://tilecache.rainviewer.com/v2/radar/1568251200/256/{z}/{x}/{y}/3/0_0.png

And i want update the tiles raster with the timestamp to make animation for a radar, like https://rainviewer.com.

I get the timestamps from this url https://tilecache.rainviewer.com/api/maps.json

I apologize for the bad English

function update_radar(){
    $.getJSON("https://tilecache.rainviewer.com/api/maps.json",     function(data) {
    map.removeLayer("rainviewer");
    map.removeSource("rainviewer");
    map.addSource("rainviewer", {
        type: "raster",
        tiles: [
            getPath(data[data.length - 1])
        ],
        tileSize: 256
    });
    map.addLayer({
        id: "rainviewer",
        type: "raster",
        source: "rainviewer",
        paint: {
            "raster-opacity": 1
        },
        minzoom: 0,
        maxzoom: 12
    });
    });
}

function getPath(time) {
    return "https://tilecache.rainviewer.com/v2/radar/" + time + "/256/{z}/{x}/{y}/3/0_0.png";
}

Manish · Answer 1 · 2019-09-12T18:32:17.130

2

You can add a layer for each source initially, then set them all to be hidden and enable the layers one by one based on a time function, say every 2 seconds.

To show or hide a layer:

map.setLayoutProperty("layerId", "visibility", "visible");
map.setLayoutProperty("layerId", "visibility", "none");

To make animation smoother, you should also use:

map.setPaintProperty("layerId", "raster-opacity", opacity);

Here's a codepen with working example similar to rainviewer:

https://codepen.io/manishraj/full/gOYKMjO

edited Sep 12 '19 at 18:32

answered Sep 12 '19 at 18:04

Manish

4,903
1
29
39

I tried your solution, but it doesn't work well, there are glitches, and the radar disappears and appears every time. – Sultan Alrefaei Sep 13 '19 at 02:41

score 0 · Answer 2 · answered Sep 12 '19 at 17:43

0

You could run a setInterval function to update your URL, similar to how it is done in this example. Yours would look something like:

setInterval(function() {
   map.getSource("rainviewer").updateImage({ url: getPath(data[data.length - 1]) });
}, 200);

answered Sep 12 '19 at 17:43

BDD

665
17
31

"updateImage" function, just work with image not with my endpoint url – Sultan Alrefaei Sep 13 '19 at 02:47

How i make animation for radar raster like a rainviewer on mapbox

2 Answers2