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

   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>