Update individual marker icons based on conditions

Hello, So I’ve been working through this issue for a while and have looked through all the issues already closed such as https://github.com/perliedman/leaflet-realtime/issues/60 as well as on stackoverflow. Though since this commit here https://github.com/perliedman/leaflet-realtime/commit/a1205598cd38675161687c9aac278ea034412501#diff-4a0fd53fbba17792254194cc6d6e6601 the updateFeature function has been modified to now only take in feature and oldLayer as arguments and most examples use the old version of the function.

My problem is that I have a bunch of markers on my map and I would like to update their icons individually based on a value within the feature. I’ve gotten to the point where I can change the icons for each marker using pointToLayer at the very start, however I cannot figure out for the life of me how I can take an individual marker and change its icon on every update.

Every time I run the code I get an issue where oldLayer is undefined within updateFeature. I’m sure it’s possible I’m missing something super simple, but is it the case that updating the icon updates every icon on the GEOJson layer or that I need to be using layer group?

Here is my current code just for testing it generates random values-

                var mymap = L.map('map', {center: [35.0545, -95.28], zoom: 4}),
                    realtime = L.realtime({
                        url: "{{ url_for('api.get_data', id=current_user.id) }}",
                        crossOrigin: true,
                        type: 'json'
                    }, {
                        interval: 5 * 1000,
                        pointToLayer: function (feature, latlng) {
                            var rand = Math.floor((Math.random() * 100) + 1);
                            console.log(rand);
                            if (rand >= 50) {
                                marker = L.marker(latlng, {icon: red});
                            }
                            else {
                                marker = L.marker(latlng, {icon: orange});
                            }

                            return marker;
                        },
                        updateFeature: function(f, oldLayer) {
                            var rand = Math.floor((Math.random() * 100) + 1);
                            console.log(rand);
                            if (rand >= 50) {
                                oldLayer.setIcon(orange);
                            }
                            else {
                                oldLayer.setIcon(red);
                            }
                            return L.Realtime.prototype.options.updateFeature(f, oldLayer);
                        },
                        getFeatureId: function (f) {
                            return f.properties.node_id;
                        },
                        onEachFeature: function (f, l) {
                            l.bindPopup(function () {
                                //console.log(f);
                                return '<h3>' + f.properties.node_id + '</h3>' +
                                    '<div class="ui divider"></div>' +
                                    '<p> <b> Current Location: </b>' + node_dict[f.properties.node_id]
                                        .coords[node_dict[f.properties.node_id].coords.length - 1] + '</p>' +
                                    '<p> <b> Last Update: </b>' + node_dict[f.properties.node_id]
                                        .lastUpdate[node_dict[f.properties.node_id].lastUpdate.length - 1] + '</p>'
                            });
                        }
                    }).addTo(mymap);

Any help is greatly appreciated! Thanks

[perliedman]

Hm, yes, updateFeature needs to do all updates on the layer, LRM in itself assumes this is what the function does, and will not automatically call setLatLng or similar (that’s why the default implementation of updateFeature does exactly that).

So, it looks like you’re good - I’m closing this issue for now?

[akaivola]

For those finding this issue later I want to document the actual behaviour of this very vital function.

If you want to programmatically change a marker position, color or rotation when leaflet realtime receives new data, updateFeature works actually as follows:

updateFeature(feature, marker) {
 // feature = updated js object of your feature data
 // marker = leaflet marker object

return marker // important!
}```