[GIS] Point icons disappearing in OpenLayers

openlayers-2

I have a very simple setup where I have a feature vector layer on top of an OSM layer in OpenLayers 2.13.1. However, I notice that the icons of my points in the vector layer begin to 'become invisible' despite their SVG DOM bounds being positioned where the icon should be, making them sort of invisible as I zoom in.

The layer that holds my features is not overly exciting:

var ooiLayer = new OpenLayers.Layer.Vector('OOI Layer');

And here is how I create my feature vectors:

// Declared elsewhere but added for completeness sake
var ooiStyle = $.extend({}, OpenLayers.Feature.Vector.style['default'], {
    graphicWidth: 25,
    graphicHeight: 25,
    fillOpacity:.7,
    externalGraphic: 'img/ooi.png'
});

function add(ooi) {
    var wkt = new OpenLayers.Format.WKT(ooi);

    // The following line looks more complicated than it is. Assume the variable holds something like "POINT (31.123 34.321)" after evaluation.
    var wktData = ooi.entityInstancesGeometry[0].geometry.geometry.wellKnownText;
    var vector = wkt.read(wktData);
    if (ooi.entityTypeId == 14 && vector.geometry instanceof OpenLayers.Geometry.Point)
        this.createArea.call(this, vector.geometry.x, vector.geometry.y, ooi);
    else {
        var actualVector = new OpenLayers.Feature.Vector(
            latLon(vector.geometry.x, vector.geometry.y), // just a helper function that applies the correct projection if required; works as intended, so no worries here
            ooi,
            $.extend({}, ooiStyle, {
                title: ooi.entityName,
                externalGraphic: graphicFor(ooi.entityTypeId) // returns an URL to a 25x25 PNG
             })
        );

        ooiLayer.addFeatures(actualVector);
    }
}

From the looks of it, it almost appears as if the first icon on the map sets the visual bounding box for all the other icons. I've created a small example to illustrate this behavior: http://youtu.be/_axFRI6Pw1U

What is wrong here?

Best Answer

I am not sure if this is the actual underlying problem, but it would appear that not using the SVG renderer (which OpenLayers seems to use by default for Chrome) fixes this issue. If anyone needs a solution, this did the trick for me:

var ooiLayer = new OpenLayers.Layer.Vector('OOI Layer', { renderers: ["Canvas", "SVG", "VML"] });
Related Question