Updating Layers in a Sheet / Mapbox

Question

I am trying to do real-time rendering visualization where I get new points through websockets. Initially building these markers on a map seems simple, but I'm not sure what the correct way to update a layer on Mapbox is.

At the moment, when I get a new point, I delete the old layer, create a new one and add it to the map. The problem with this approach is that it is slow and for a large number of points (> 5000) it starts to lag.

    // remove layer
    if (this.pointsLayer != null) {
        map.removeLayer(this.pointsLayer);
    }

    // build geoJSON
    var geoJSON = { "type": "FeatureCollection", "features": [] };
    geoJSON["features"] = tweets.map(function(tweet) {
        return this.getGeoPoint(tweet);
    }.bind(this));

    // add geoJSON to layer
    this.pointsLayer = L.mapbox.featureLayer(geoJSON, {
        pointToLayer: function(feature, latlon) {
            return L.circleMarker(latlon,  {
                fillColor: '#AA5042',
                fillOpacity: 0.7,
                radius: 3,
                stroke: false
            });
        }
    }).addTo(map);

Is there a better way?

Answer 1

You can create an empty GeoJSON layer by passing it falseinstead of real data:

//create empty layer
this.pointsLayer = L.mapbox.featureLayer(false, {
    pointToLayer: function(feature, latlon) {
        return L.circleMarker(latlon,  {
            fillColor: '#AA5042',
            fillOpacity: 0.7,
            radius: 3,
            stroke: false
        });
    }
}).addTo(map);

.addData, , . - :

// build geoJSON
var geoJSON = { "type": "FeatureCollection", "features": [] };
geoJSON["features"] = /**whatever function you use to build a single tweet geoJSON**/

// add geoJSON to layer
this.pointsLayer.addData(geoJSON);

, , Feature FeatureCollection, , .

EDIT: , .addData :

http://jsfiddle.net/nathansnider/4mwrwo0t/

, 10 000 , 15 000 , , , , .

, Leaflet 1.0 beta, , , . 15 000 Leaflet 0.7.5 1.0.0b2. ( , ), .

Answer 2

GeoJSON, . - :

tweets.forEach(function(t) {
    L.marker(this.getGeoPoint(t)).addTo(map);
}, this);

tweets, , . , , , .

Answer 3

I would look at Leaflet Realtime:

Put real-time data on a sheet map: track GPS devices, sensor data, or whatever.

https://github.com/perliedman/leaflet-realtime