Updating markers in a layer on a timer - need a better way

[Dave]

Can anyone help me  update markers in a layer that might appear or disappear on the setInterval timer? 

Imagine, if you will, a map with "alarms" that gets refreshed every 5 or so seconds.  The alarms are read in from a webservice and put into a variable called alarmLayer.  New alarms come in or are dismissed after I check the webservice. If I remove then add the layer, there's flashing.  If I don't clear out the existing alarms, it's only adding new alarms. 

I guess what I'd like to do is something more like doing a compare or join or something, probably having to look through each marker in the layer and see what's new and old.  But I don't know how to do that.  Anyone have any ideas?  Here's my currently working and flashing code inside a js file. Oh, also I'm kinda new to the javascript world, so if you see something, I'm open to criticism.

 

// Scope the alarms outside of the function

var alarmsLayer;

// Go get the alarms

GetAlarms();

$(document).ready(function () {

    //When the document finishes, start the timer

    setInterval(function () {

        //remove the alarms

        map.removeLayer(alarmsLayer);

        // Get and add the new alarms

        GetAlarms();

    }, 5000);

     

});

 

function GetAlarms() {

    // Call the asmx code from the C# code behind

    Power.GetJsonAlarms(GotJsonAlarms);

};

function GotJsonAlarms(currentAlarms) {

    // Format and display the alarms using fancy leaflet markers

    jqAlarms = jQuery.parseJSON(currentAlarms);

    alarmsLayer = L.geoJson(jqAlarms, {

        style: function (feature) {

            return { color:feature.properties.markercolor };

        },

        pointToLayer: function (feature, latlng) {

            return L.marker(latlng, {

                icon:

                    L.AwesomeMarkers.icon({

                        icon: feature.properties.iconname,

                        prefix: 'fa',

                        markerColor: feature.properties.iconcolor

                    })

            })

        },

        onEachFeature: function (feature, layer) {

            layer.bindPopup(feature.properties.Warning + " \r\n" + feature.properties.CLLI);

        }

    });

    map.addLayer(alarmsLayer);

};

 

 

[Rowan Winsemius]

Hi Dave,

You might want to take a look at the leaflet realtime plugin
https://github.com/perliedman/leaflet-realtime

It may be a simple option for what you're looking to achieve.

Cheers
Rowan

---

This message is intended for the addressee named and may contain confidential information. If you are not the intended recipient, please delete it and notify the sender. Views expressed in this message are those of the individual sender, and are not necessarily the views of their organisation.

[Dave]

Rowan,

Thanks very much.  I'll look into this.  Seems like the example is simple enough with one point that moves.  I'll see what my beginner skills can do with it!

-Dave