How to improve OpenLayer Vector layers refresh for 200 elements?

Question

I want to develop a kind of timemap combining the jquery-ui slider component and the OpenLayer library.

I'm simply using the Vector layer of OpenLayers with Rules style.

 map = new OpenLayers.Map('map', {maxResolution:'auto'});
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                                   "http://vmap0.tiles.osgeo.org/wms/vmap0",
                                   {layers: 'basic'} );
map.addLayer(wms);
map.setCenter(new OpenLayers.LonLat(0, 0), 0);

// create 20 random features with a random type attribute. The
// type attribute is a value between 0 and 2.
var features = new Array(20);
for (var i=0; i<20; i++) {
    features[i] = new OpenLayers.Feature.Vector(
        new OpenLayers.Geometry.Point(Math.random()*360-180, Math.random()*180-90),
        {type: parseInt(Math.random()*80)}
    );
}  

var style = new OpenLayers.Style(
    {                           
        graphicHeight: 20,
        graphicYOffset: -19,
        rotation: "${angle}"
    },
    {
        rules: [ new OpenLayers.Rule({
                     filter: new OpenLayers.Filter.Comparison({
                        type: OpenLayers.Filter.Comparison.LESS_THAN,
                        property: "value",
                        value: 20
                    }),                             
                    symbolizer: {
                        externalGraphic: "http://dev.openlayers.org/releases/OpenLayers-2.13.1/img/marker-blue.png"
                    }
                }),
                new OpenLayers.Rule({
                        filter: new OpenLayers.Filter.Comparison({
                            type: OpenLayers.Filter.Comparison.BETWEEN,
                            property: "value",
                            lowerBoundary: 20,
                            upperBoundary: 40

                        }),                             
                        symbolizer: {
                            externalGraphic: "http://dev.openlayers.org/releases/OpenLayers-2.13.1/img/marker-green.png"
                        }
                }),
                new OpenLayers.Rule({
                        filter: new OpenLayers.Filter.Comparison({
                            type: OpenLayers.Filter.Comparison.GREATER_THAN,
                            property: "value",
                            value: 40
                        }),                             
                        symbolizer: {
                            externalGraphic: "http://dev.openlayers.org/releases/OpenLayers-2.13.1/img/marker-gold.png"
                        }
               })
        ]
    }
);

layer = new OpenLayers.Layer.Vector('Points', {
    styleMap: new OpenLayers.StyleMap(style)
});

layer.addFeatures(features);
map.addLayer(layer);

I change the displayed value though the slide event of the jquery-ui slider.

 $( "#slider" ).slider({
        value:0,
        min: 0,
        max: 100,
        step: 1,
        slide: function( event, ui ) {
            var end = false;
            //launched.push(ui.value);
            $( "#value" ).val( ui.value );

            function redraw(){
                //launched.pop();
                for(var i = 0 ; i < features.length; i++){
                    features[i].attributes["value"] = Math.random()*60;             
                }
                map.getLayersByName("Points")[0].redraw();

            };
            redraw();


        }
    });

It work very well with few elements. But if I set the number of displayed element to 200 and open my script with Firefox, the slider is very slow and do not follow the mouse cursor, although it work well with Chrome.

You can find my source code on this jsfiddle : http://jsfiddle.net/jeje/5XPcc/6/

Anybody have an idea of what I did wrong ? Do you think there is a way to improve it ?

Answer 1

I tried your code with forEach method, inverse order, ++counter and the result still the same, so the problem could be map.getLayersByName("Points")[0].redraw() instruction.

If you comment for loop inside your redraw function, it keeps executing your code slower (just redrawing Points layer when you change your slider value). It seems like a lot of points to redraw in real time and JS can't do it faster enough on FF).

Maybe you can dive into OpenLayers library and try to hack it to make some improvements on FF. Other solution is post this code on OpenLayers mail list so maybe they could help you better.