CODEWITHSUNDEEP
javascriptleaflet
Crooker
Crooker

Reputation: 485

Redrawin markers in leaflet

I'm trying to redraw set of markers. The icon source is generating every minute, but the markers still using the icon, which existed, when I refresh the site.

var markers = new L.LayerGroup().addTo(map);

function createMarkers() {
//Markers_start
kopankyM = L.marker([48.9585,17.791666666667]).bindPopup("").bindLabel('6 kt, 90°', { noHide: true }).setIcon(new icon({iconUrl: 'img/kopanky.png'})).addTo(markers);
hvezdarnaM = L.marker([49.037666666667,17.646]).bindPopup("").bindLabel('11 kt, 145°', { noHide: true }).setIcon(new icon({iconUrl: 'img/hvezdarna.png'})).addTo(markers);
banovM = L.marker([48.984166666667,17.704333333333]).bindPopup("").bindLabel('15 kt, 180°', { noHide: true }).setIcon(new icon({iconUrl: 'img/banov.png'})).addTo(markers);
bojkoviceM = L.marker([48.984166666667,17.704333333333]).bindPopup("").bindLabel('11 kt, 180°', { noHide: true }).setIcon(new icon({iconUrl: 'img/bojkovice.png'})).addTo(markers);
vyskovM = L.marker([49.300166666667,17.025166666667]).bindPopup("").bindLabel('11 kt, 180°', { noHide: true }).setIcon(new icon({iconUrl: 'img/vyskov.png'})).addTo(markers);
uhhradisteM = L.marker([49.072833333333,17.462333333333]).bindPopup("").bindLabel('5 kt, 45°', { noHide: true }).setIcon(new icon({iconUrl: 'img/uhhradiste.png'})).addTo(markers);
//Markers_end
console.log("createMarkers");
}

createMarkers();
//createIcons();

setInterval(function(){
    markers.clearLayers();
    createMarkers();
    //createIcons();
}, 10000);

What should I add or edit, to get it working?

Upvotes: 1

Views: 245

Answers (1)

Liedman
Liedman

Reputation: 10329

Sounds like the browser does not reload the images, and instead uses the cached images, for one reason or another.

There might be several solutions, but one, possibly not very elegant, is to add a bogus query parameter to the icon URL, forcing the browser to reload it:

function createMarkers() {
//Markers_start
kopankyM = L.marker([48.9585,17.791666666667]).bindPopup("").bindLabel('6 kt, 90°', { noHide: true }).setIcon(new icon({iconUrl: 'img/kopanky.png?_cache=' + Math.random()})).addTo(markers);
hvezdarnaM = L.marker([49.037666666667,17.646]).bindPopup("").bindLabel('11 kt, 145°', { noHide: true }).setIcon(new icon({iconUrl: 'img/hvezdarna.png?_cache=' + Math.random()})).addTo(markers);
banovM = L.marker([48.984166666667,17.704333333333]).bindPopup("").bindLabel('15 kt, 180°', { noHide: true }).setIcon(new icon({iconUrl: 'img/banov.png?_cache=' + Math.random()})).addTo(markers);
bojkoviceM = L.marker([48.984166666667,17.704333333333]).bindPopup("").bindLabel('11 kt, 180°', { noHide: true }).setIcon(new icon({iconUrl: 'img/bojkovice.png?_cache=' + Math.random()})).addTo(markers);
vyskovM = L.marker([49.300166666667,17.025166666667]).bindPopup("").bindLabel('11 kt, 180°', { noHide: true }).setIcon(new icon({iconUrl: 'img/vyskov.png?_cache=' + Math.random()})).addTo(markers);
uhhradisteM = L.marker([49.072833333333,17.462333333333]).bindPopup("").bindLabel('5 kt, 45°', { noHide: true }).setIcon(new icon({iconUrl: 'img/uhhradiste.png?_cache=' + Math.random()})).addTo(markers);
//Markers_end
console.log("createMarkers");
}

Another solution is to check why the image is cached by the browser - maybe the cache headers for the icon images aren't set properly?

Upvotes: 1

Related Questions