1 <html xmlns="http://www.w3.org/1999/xhtml">
3 <title>Vector Layer ZIndex Test</title>
4 <style type="text/css">
18 <script src="../../lib/OpenLayers.js"></script>
19 <script type="text/javascript">
20 var map, layerA, layerB, layerV, selectControl1, selectControl2;
23 map = new OpenLayers.Map('map');
24 var wmsLayer = new OpenLayers.Layer.WMS(
26 "http://labs.metacarta.com/wms/vmap0",
30 layerV = new OpenLayers.Layer.Vector('v');
31 var feature = new OpenLayers.Feature.Vector(
32 new OpenLayers.Geometry.Polygon([
33 new OpenLayers.Geometry.LinearRing([
34 new OpenLayers.Geometry.Point(-110, 60),
35 new OpenLayers.Geometry.Point(-110, 30),
36 new OpenLayers.Geometry.Point(-80, 30),
37 new OpenLayers.Geometry.Point(-110, 60)
41 layerV.addFeatures([feature]);
42 selectControl1 = new OpenLayers.Control.SelectFeature(layerV);
43 selectControl2 = new OpenLayers.Control.SelectFeature(layerV, {
45 selectStyle: OpenLayers.Util.applyDefaults({fillColor: "red"}, OpenLayers.Feature.Vector.style["select"]),
46 onSelect: function(feature) {
47 selectControl2.unselect(feature);
48 layerV.drawFeature(feature, selectControl2.selectStyle);
51 selectControl2.events.register("beforefeatureselected", null, function(feature) {
52 layerV.drawFeature(feature, selectControl2.selectStyle);
56 layerA = new OpenLayers.Layer('a', {'isBaseLayer': false});
57 layerB = new OpenLayers.Layer.WMS(
58 'b', 'http://www2.dmsolutions.ca/cgi-bin/mswms_gmap', {
60 'bathymetry', 'land_fn', 'park', 'drain_fn', 'drainage',
61 'prov_bound', 'fedlimit', 'rail', 'road', 'popplace'
63 'transparent': 'true',
69 map.addLayers([wmsLayer, layerV, layerA, layerB]);
70 map.addControl(selectControl2);
71 map.addControl(selectControl1);
72 map.addControl(new OpenLayers.Control.MousePosition());
73 selectControl2.activate();
74 selectControl1.activate();
76 map.setCenter(new OpenLayers.LonLat(-90, 20), 2);
79 function removeLayerA() {
80 if (OpenLayers.Util.indexOf(map.layers, layerA) > -1) {
81 map.removeLayer(layerA);
85 function toggleSelectControl1() {
86 if (selectControl1.active) {
87 selectControl1.deactivate();
88 alert("SelectFeature control for clicks deactivated.");
90 selectControl1.activate();
91 alert("SelectFeature control for clicks activated.");
95 function toggleSelectControl2() {
96 if (selectControl2.active) {
97 selectControl2.deactivate();
98 alert("SelectFeature control for hover deactivated.");
100 selectControl2.activate();
101 alert("SelectFeature control for hover activated.");
106 <body onload="init()">
107 <h1 id="title">Vector Layer ZIndex Test</h1>
111 The map includes one base layer (vmap0) and three overlays, namely a vector
112 layer, a fake layer with no images, and a dmsolutions layer. The overlays are
113 added to the map in this order: the vector layer, the fake layer, and the
114 dmsolutions layer. The map also includes a select feature control, which
115 when activated bumped the vector layer z-index to some high value. This
116 makes feature selection work, even though other overlays were added after
122 If the fake layer is removed from the map (first link below), the vector layer's
123 z-index must not be reset, so the vector layer must not go under the
124 dmsolutions layer and feature selection must continue to function as
130 If one of the SelectFeature controls is deactivated or activated (second
131 and third link below), the vector layer should change it's position in the
132 layer stack: on top if at least one of the controls is activated, covered
133 by other layers if both are deactivated.
138 <a href="javascript:removeLayerA()">Remove the fake layer</a>
139 <br/><a href="javascript:toggleSelectControl1()">Toggle the click SelectFeature control's active status</a>
140 <br/><a href="javascript:toggleSelectControl2()">Toggle the hover SelectFeature control's active status</a>