Leaflet Automatically reload layer with updated time in URL

I have a Leaflet map that shows a rain radar overlay for Australia.

The map correctly loads and shows the latest rain radar however I want it to automatically update every 10 minutes without reloading the entire page. I tried using setUrl on the layer but that did not work. I have included a JSFiddle of my working map without automatic reload.

I define the layer with:

var RainRadarAus = L.tileLayer('https://api.weather.bom.gov.au/v1/rainradar/tiles/{time}/{z}/{x}/{y}.png', {
  attribution: 'Rain data © Bureau of Meteorology',
  time: getRadarTime(),
  maxZoom: 10,
  minZoom: 5,
  tileSize: 256,

I use this function to get the time argument

function getRadarTime() {
  d = new Date();
  d.setTime((Math.trunc(d.valueOf() / 600000) * 600000) - 600000);
  return d.getUTCFullYear().toString() + (d.getUTCMonth() + 1).toString().padStart(2, '0') + d.getUTCDate().toString().padStart(2, '0') + d.getUTCHours().toString().padStart(2, '0') + d.getUTCMinutes().toString().padStart(2, '0');

I want to reload the layer and get a new time value from getRadarTime every 10 minutes.

JSFiddle: https://jsfiddle.net/ghLzykqx/



You can use setInterval to create a timer which is called every x milliseconds. And then you need to update the tile options time and redraw it:

var TIME = 10 * 60 * 1000
    RainRadarAus.options.time = getRadarTime();
}, TIME);