OpenLayers rendering speed - large feature collection (v2)

Revision 2 of this benchmark created on November 13, 2013

Preparation HTML

<script src="http://openlayers.org/api/2.13.1/OpenLayers.js"></script><script src="http://www.gobec.cz/fileadmin/geojson.js"></script>
<div id="mapCanvas" style="width:470px; height:470px; float:right"></div>
<div id="mapSvg" style="width:470px; height:470px; float:right"></div>
<script type="text/javascript">
var layerCANVAS = new OpenLayers.Layer.Vector("vec", { isBaseLayer: true, renderers: ["Canvas", "SVG", "VML"] });
layerCANVAS.addFeatures(new OpenLayers.Format.GeoJSON().read(data["geojson"]));

var layerSVG = new OpenLayers.Layer.Vector("vec", { isBaseLayer: true, renderers: ["SVG", "Canvas", "VML"] });
layerSVG.addFeatures(new OpenLayers.Format.GeoJSON().read(data["geojson"]));
        
var selectCANVAS = new OpenLayers.Control.SelectFeature({
    hover: true,
    highlightOnly: true,
    renderIntent: "temporary",
    autoActivate: true
});

var selectSVG = new OpenLayers.Control.SelectFeature({
    hover: true,
    highlightOnly: true,
    renderIntent: "temporary",
    autoActivate: true
});

var mapCANVAS = new OpenLayers.Map("mapCanvas", {
    maxExtent: layerCANVAS.getDataExtent(),
    layers: [layerCANVAS],
    controls: [selectCANVAS]
});

var mapSVG = new OpenLayers.Map("mapSvg", {
    maxExtent: layerSVG.getDataExtent(),
    layers: [layerSVG],
    controls: [selectSVG]
});

mapCANVAS.zoomToExtent(layerCANVAS.getDataExtent());
mapSVG.zoomToExtent(layerSVG.getDataExtent());
mapCANVAS.zoomIn();
mapSVG.zoomIn();

function redrawCANVAS() {
    layerCANVAS.redraw();
}

function selectFeatureCANVAS() {
    selectCANVAS.highlight(layerCANVAS.features[0]);
    selectCANVAS.unhighlight(layerCANVAS.features[0]);
}

function redrawSVG() {
    layerSVG.redraw();
}

function selectFeatureSVG() {
    selectSVG.highlight(layerSVG.features[0]);
    selectSVG.unhighlight(layerSVG.features[0]);
}
</script>

Test runner

redrawCANVAS();

selectFeatureCANVAS();

redrawSVG();

selectFeatureSVG();

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 2: published on November 13, 2013