Force tiles to reload

[Chris]

Trying to figure out how on the onem function to clear and reload the tiles from the server even if the map hasn't moved.

<div id="map" style="width: 100%; height: 100%"></div>

<script>

      var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',

           osmAttribution = 'Map data © OpenStreetMap contributors, CC-BY-SA',

           osmLayer = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution});

var nexrad = L.tileLayer.wms("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi?"+Math.random()+"&", {

    layers: 'nexrad-n0r-900913',

    format: 'image/png',

    transparent: true,

    opacity: 0.4,

    attribution: "Weather data © 2012 IEM Nexrad",

});

var warnings = new L.tileLayer.wms("http://nowcoast.noaa.gov/wms/com.esri.wms.Esrimap/wwa?", {

    layers: 'WARN_SHORT_TOR,WARN_SHORT_EWW,WARN_SHORT_SVR,WARN_SHORT_FLW,WARN_SHORT_FFW,WARN_SHORT_SMW',

    format: 'image/png',

    transparent: true,

    opacity: 0.6,

    attribution: "Weather data courtesy of nowCOAST"

});

var map = L.map('map').setView([39.1,-94.6], 7);

map.addLayer(osmLayer);

map.addLayer(nexrad);

//map.addLayer(warnings);

var onem = setInterval(onem, 6000);

function onem() {

nexrad.redraw();

}

</script>

[ghybs]

Hi,

Would `myTileLayer.redraw()` fit your need?
http://leafletjs.com/reference.html#tilelayer-redraw

Hope this helps.

[chris brisendine]

I tried that the funny thing is it don't work, I'm watching on chrome
with debug and dont see any new tile request getting sent.

> --
>
> ---
> You received this message because you are subscribed to a topic in the
> Google Groups "Leaflet" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/leaflet-js/YwGkmFC_t70/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to
> leaflet-js+...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

[ghybs]

Sorry I did not pay enough attention to your code.

The browser very probably keeps the images in cache.
So even if Leaflet "redraws" its tiles, the browser will serve the same images without sending network requests.

I guess that is why you included a `Math.random()` parameter in your Tile Layer URL template?

Then following up on that idea, you could simply change that URL template with another random number, before calling the Tile Layer redraw.
That way, the browser will think you request brand new images (which may indeed be the case!) and send network requests.

function onem() {
    // Make sure to change the URL template, otherwise the browser will use its cache, even though
    // Leaflet re-builds its tiles.
    nexrad.setUrl("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi?" + Math.random() + "&");
    nexrad.redraw();
}

Demo: http://jsfiddle.net/ve2huzxw/66/

[chris brisendine]

That done it! Thanks!