Markers popup info not updating

[mivilleb]

I used your eathquake example, only changed the Geojson URL to my local static file, changed the js to show the data in the geojson file. I then manually edited the geojson file to a new value (RA property in my case), saved the file, wait for the update to take place, click on the icon and the data in the popup has not updated. Is there something special that needs to be done for the marker popup data to get updated? If I refresh the whole web page manually the popup data does show the updated value in the geojson file.

If I change the coordinates, then the maker does move but still displays the old data.

Any suggestion?

Js:

function createRealtimeLayer(url, container) {
    return L.realtime(url, {
        interval: 10 * 1000,
        getFeatureId: function(f) {
            return f.properties.STN_ID;
        },
        cache: true,
        container: container,
        onEachFeature(f, l) {
            l.bindPopup(function() {
                return '<h3>' + f.properties.NAME + '</h3>' +
                    '<p>' + new Date(f.properties.DATETIME) +
                    '<br/>Rain (mm): <strong>' + f.properties.RA + '</strong></p>' +
                    '<p><a href="' + f.properties.RA + '">More information</a></p>';
            });
        }
    });
}

var map = L.map('map'),
    clusterGroup = L.markerClusterGroup().addTo(map),
    subgroup1 = L.featureGroup.subGroup(clusterGroup),
    subgroup2 = L.featureGroup.subGroup(clusterGroup),
    realtime1 = createRealtimeLayer('data/test.geojson', subgroup1).addTo(map),
    realtime2 = createRealtimeLayer('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson', subgroup2);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php">USGS Earthquake Hazards Program</a>, &copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.control.layers(null, {
    'Flood': realtime1,
    'All Earthquakes': realtime2
}).addTo(map);

realtime1.once('update', function() {
    map.fitBounds(realtime1.getBounds(), {maxZoom: 14});
});

Geojson file: {"type": "FeatureCollection","features": [{ "type": "Feature", "id": 2490, "properties":{ "STN_ID": "76021", "TYPE": "Automatic Weather Station", "NAME": "Afiamalu - AWS", "DATETIME": "2020-04-16 15:00:00", "RA": "0.0","POWER": "13203"}, "geometry": { "type": "Point", "coordinates": [ -171.782, -13.9084 ] } },{ "type": "Feature", "id": 2492, "properties":{ "STN_ID": "76216", "TYPE": "Automatic Weather Station", "NAME": "Alafua - AWS", "DATETIME": "2020-04-16 15:00:00", "RA": "0.0"}, "geometry": { "type": "Point", "coordinates": [ -171.7935, -13.8593 ] } },{ "type": "Feature", "id": 3544, "properties":{ "STN_ID": "42000", "TYPE": "Automatic Rain Gauge", "NAME": "Mt Le Pue - ARG", "DATETIME": "2020-04-16 15:05:00", "RA": "5.0","POWER": "13793"}, "geometry": { "type": "Point", "coordinates": [ -171.75, -13.9334 ] } },{ "type": "Feature", "id": 2489, "properties":{ "STN_ID": "76225", "TYPE": "Automatic Weather Station", "NAME": "Nafanua - AWS", "DATETIME": "2020-04-16 15:00:00", "RA": "0.0","POWER": "13807"}, "geometry": { "type": "Point", "coordinates": [ -171.7622, -13.858 ] } },{ "type": "Feature", "id": 5905, "properties":{ "STN_ID": "42001", "TYPE": "Automatic Rain Gauge", "NAME": "Tiavi - ARG", "DATETIME": "2020-04-16 15:00:00", "RA": "0.0","POWER": "13822"}, "geometry": { "type": "Point", "coordinates": [ -171.7775, -13.936781 ] } },{ "type": "Feature", "id": 6736, "properties":{ "STN_ID": "46001", "TYPE": "Automatic Rain Gauge", "NAME": "Togitogoga - ARG", "DATETIME": "2020-04-16 15:10:00", "RA": "0.0","POWER": "13353"}, "geometry": { "type": "Point", "coordinates": [ -171.70043, -13.938482 ] } }]}

[mivilleb]

Ok got it now:

var map = new L.Map('map', {
    layers: [
        new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            'attribution': 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
        })
    ],
    center: [0, 0],
    zoom: 0
});

realtime = L.realtime({
  url: 'data/test.geojson',
  crossOrigin: true,
  type: 'json'
}, {
  interval: 3 * 1000,
  getFeatureId: function(f) {
      return f.properties.STN_ID;
    },
}).addTo(map);

realtime.on('update', function(e) {
  map.fitBounds(realtime.getBounds(), {maxZoom: 14});
  Object.keys(e.update).forEach(function(id) {
    var feature = e.update[id];
    this.getLayer(id).bindPopup(feature.properties.RA);
  }.bind(this));
});