Openlayers control z-index between Layer with and without SelectFeature

Question

I have two OpenLayers.Layer.Vector, one with OpenLayers.Control.SelectFeature and the other without SelectFeature.

When I try to change the z-index the layers aren't shown properly because the RootContainer created by SelectFeature is always on top. I also changed the order of the layers into the stack but this didn't work.

Is there another way to control this without adding both layers into the SelectFeature control?

Here is a simulation:

    <!DOCTYPE html>
<html>
  <head>

    <style>
        .smallmap {
            width: 512px;
            height: 256px;
            border: 1px solid #ccc;
        }
    </style>
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">

        var map, controls;

        OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';

        function init(){
            map = new OpenLayers.Map('map');

            var ol_wms = new OpenLayers.Layer.WMS(
                    "OpenLayers WMS",
                    "http://vmap0.tiles.osgeo.org/wms/vmap0",
                    {layers: 'basic',
                     isBaseLayer: true,} 
                );
            map.addLayers([ol_wms]);


            var vectors1 = new OpenLayers.Layer.Vector("vector1");
            map.addLayers([vectors1]);

            var feature = new OpenLayers.Feature.Vector(
                OpenLayers.Geometry.fromWKT(
                    "POLYGON((28.828125 0.3515625, 132.1875 -13.0078125, -1.40625 -59.4140625, 28.828125 0.3515625))"
                ),
                {}, 
                {
                    fillColor:"#00f"
                }
            );
            vectors1.addFeatures([feature]);

            var vectors2 = new OpenLayers.Layer.Vector("vector2");
            map.addLayers([vectors2]);

            var feature2 = new OpenLayers.Feature.Vector(
                OpenLayers.Geometry.fromWKT(
                    "POLYGON((-120.828125 -50.3515625, -80.1875 -80.0078125, 50.40625 0.4140625, -120.828125 -50.3515625))"
                ),
                {}, 
                {
                    fillColor:"#0f0"
                }
            );
            vectors2.addFeatures([feature2]);

            var report = function(e) {
                OpenLayers.Console.log(e.type, e.feature.id);
            };

            var highlightCtrl = new OpenLayers.Control.SelectFeature([vectors1], {
                hover: true,
                highlightOnly: true,
                renderIntent: "temporary",
                eventListeners: {
                    beforefeaturehighlighted: report,
                    featurehighlighted: function(e) {console.log("highlight")},
                    featureunhighlighted: function(e) {console.log("unhighlight")}
                }
            });

            var selectCtrl = new OpenLayers.Control.SelectFeature([vectors1],
                {clickout: true,
                 onSelect: function(e) {
                        console.log(" select ");
                     },
                 onUnselect: function(e) {console.log(" unselect ")}
             }
            );

            map.addControl(highlightCtrl);
            map.addControl(selectCtrl);

            highlightCtrl.activate();
            selectCtrl.activate();

            map.setCenter(new OpenLayers.LonLat(0, 0), 1);


            map.setLayerZIndex(vectors2, 0);
            map.setLayerZIndex(vectors1, -1);
        }
    </script>
  </head>
  <body onload="init()">
    <div id="map" class="smallmap"></div>
  </body>
</html>

When you change the order with

 map.setLayerZIndex(vectors2, 0);
 map.setLayerZIndex(vectors1, -1);

never works because

var selectCtrl = new OpenLayers.Control.SelectFeature([vectors1],

do that the Features will be created into RootContainer at Z-index 725.

So I don't know how to keep into the map different vector layers. Some layers with over and click functionality and another without over or click handlers and be able to order properly the layers.

Thanks & regards, Rafael.

Are you sure that SelectFeature creates a RootContainer? Is there any chance you could reproduce this issue in jsFiddle or something similar, so we can attempt to debug it. — John Powell

Dennis Bauszus Dennis Bauszus · Accepted Answer · 2014-05-09T19:27:53

I assume your code is based on this example.

It really helps if you create a jsFiddle in order to explain your problem.

I created a jsFiddle for you which you can copy an update if needed.

Please check this jsFiddle in which I use the highlight and click select control on the first overlay. It's not necessary to use indeces.

I took out the console report in order to focus on the main parts which are as follows:

 var wkt = new OpenLayers.Format.WKT();    

 var vectors1 = new OpenLayers.Layer.Vector();
 map.addLayers([vectors1]);

 var vector1 = wkt.read("POLYGON((0 0, 0 50, 50 50, 50 0, 0 0)");
 vector1.geometry.transform(map.displayProjection, map.getProjectionObject());         
 vectors1.addFeatures([vector1]);

 var vectors2 = new OpenLayers.Layer.Vector();
 map.addLayers([vectors2]);

 var vector2 = wkt.read("POLYGON((10 10, 10 60, 60 60, 60 10, 10 10)");
 vector2.geometry.transform(map.displayProjection, map.getProjectionObject());         
 vectors2.addFeatures([vector2]);

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

 var selectCtrl = new OpenLayers.Control.SelectFeature(vectors1, {
    clickout: true });

 map.addControl(highlightCtrl);
 map.addControl(selectCtrl);

 highlightCtrl.activate();
 selectCtrl.activate();

I hope this helps you.

EDIT:

I understand your problem now. You cannot use the select control with a z-index set on the overlay. The activation of the select control will always put the layers as defined in the control layer array on top during the activation event.

I suggest you use a different approach. You can use event listeners on the map object to achieve a hover & select functionality regardless of the z-index.

I forked my earlier jsFiddle to show how this can be achieved. Please have a look at this.

Openlayers control z-index between Layer with and without SelectFeature

1 Answers