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,
    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
            $.extend({}, ooiStyle, {
                title: ooi.entityName,
                externalGraphic: graphicFor(ooi.entityTypeId) // returns an URL to a 25x25 PNG


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?


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"] });
| improve this answer | |

Try adding a zIndex to your markers like this.

map.addLayers( [ooiLayer] ); 
ooiLayer.setZIndex( 1001 ); 

Note: the value of 1001 is probably excessive and a single digit value will probably be enough

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.