Search code examples
openlayers

Layer.Text vs Layer.Vector. Performance question

This is very fast in all browsers:

var curLayer = new OpenLayers.Layer.Text("layer", { location: "test.txt"});
map.addLayer(curLayer);

However, the following code is fast in Firefox and Chrome, but incredibly slow in IE8 (loading 500 features takes 30 minutes!):

var curLayer = new OpenLayers.Layer.Vector("layer", {
    protocol: new OpenLayers.Protocol.HTTP({
        url: "test.txt",
        format: new OpenLayers.Format.Text()
    })
});
map.addLayer(curLayer);

By number of reasons I'd prefer to use OpenLayers.Layer.Vector, but cannot due to the IE performance issue.

Does anybody know a good solution? Finally I need to load on a map a lot of clickable point features with customizable popups.

Solution

  • When you are using Layer.Text, the marker symbols are rendered by using html+embedded marker symbols. With a vector layer, the symbols are drawn as vector graphics (svg and/or vml). Since IE has a very poor vector rendering performance, the openlayers wiki recommends using a maximum of 50 Markers in IE 6 (http://trac.openlayers.org/wiki/FrequentlyAskedQuestions#WhyisMyMapSluggishwhenIAdd500Markers).

    I'd recommend to use Openlayer's POI Clustering Strategy (http://openlayers.org/dev/examples/strategy-cluster.html) to reduce the number of Markers in larger scales. When the user zooms in, all markers appear again.