OpenLayers OpenLayers

root/trunk/openlayers/tests/manual/vector-layer-zindex.html

Revision 7879, 5.3 kB (checked in by ahocevar, 5 months ago)

Made the Feature handler more robust to things that are related to changing layer order on the map, by registering an event handler that will bring the handler's layer back to the top of the layer stack in the DOM. Contains a manual test. r=elemoine (closes #1628)

  • Property svn:eol-style set to native
  • Property svn:keywords set to Id Author Date Revision
Line 
1 <html xmlns="http://www.w3.org/1999/xhtml">
2   <head>
3     <title>Vector Layer ZIndex Test</title>
4     <style type="text/css">
5         body {
6             font-size: 0.8em;
7         }
8         p {
9             padding-top: 1em;
10         }
11         #map {
12             margin: 1em;
13             width: 512px;
14             height: 512px;
15         }
16     </style>
17
18     <script src="../../lib/OpenLayers.js"></script>
19     <script type="text/javascript">
20         var map, layerA, layerB, layerV, selectControl1, selectControl2;
21
22         function init() {
23             map = new OpenLayers.Map('map');
24             var wmsLayer = new OpenLayers.Layer.WMS(
25                 "OpenLayers WMS",
26                 "http://labs.metacarta.com/wms/vmap0",
27                 {layers: 'basic'}
28             );
29
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)
38                     ])
39                 ])
40             );
41             layerV.addFeatures([feature]);
42             selectControl1 = new OpenLayers.Control.SelectFeature(layerV);
43             selectControl2 = new OpenLayers.Control.SelectFeature(layerV, {
44                 hover: true,
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);
49                 }
50             });
51             selectControl2.events.register("beforefeatureselected", null, function(feature) {
52                 layerV.drawFeature(feature, selectControl2.selectStyle);
53                 return false;
54             })
55
56             layerA = new OpenLayers.Layer('a', {'isBaseLayer': false});
57             layerB = new OpenLayers.Layer.WMS(
58                 'b', 'http://www2.dmsolutions.ca/cgi-bin/mswms_gmap', {
59                     'layers': [
60                         'bathymetry', 'land_fn', 'park', 'drain_fn', 'drainage',
61                         'prov_bound', 'fedlimit', 'rail', 'road', 'popplace'
62                     ],
63                     'transparent': 'true',
64                     'format': 'image/png'
65                 }, {
66                     'reproject': false
67             });
68
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();
75
76             map.setCenter(new OpenLayers.LonLat(-90, 20), 2);
77         }
78
79         function removeLayerA() {
80             if (OpenLayers.Util.indexOf(map.layers, layerA) > -1) {
81                 map.removeLayer(layerA);
82             }
83         }
84        
85         function toggleSelectControl1() {
86             if (selectControl1.active) {
87                 selectControl1.deactivate();
88                 alert("SelectFeature control for clicks deactivated.");
89             } else {
90                 selectControl1.activate();
91                 alert("SelectFeature control for clicks activated.");
92             }
93         }
94
95         function toggleSelectControl2() {
96             if (selectControl2.active) {
97                 selectControl2.deactivate();
98                 alert("SelectFeature control for hover deactivated.");
99             } else {
100                 selectControl2.activate();
101                 alert("SelectFeature control for hover activated.");
102             }
103         }
104     </script>
105   </head>
106   <body onload="init()">
107     <h1 id="title">Vector Layer ZIndex Test</h1>
108     <div id="map"></div>
109     <p>
110
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
117     the vector layer.
118        
119     </p>
120     <p>
121
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
125     expected.
126        
127     </p>
128     <p>
129
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.
134
135     </p>
136
137     <p>
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>
141     </p>
142   </body>
143 </html>
Note: See TracBrowser for help on using the browser.