sfletche/vector_ordering_with_selectfeature.html

## vector_ordering_with_selectfeature.html
<!DOCTYPE html>
<html>
  <head>
    <title>OpenLayers Mouseover Multiple vectors</title>
    <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css">
    <script src="http://openlayers.org/dev/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, controls, highlightCtrl, outputLayers;

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

            var red_style = new OpenLayers.StyleMap( {
                fillColor: '#993333'
            });
            var green_style = new OpenLayers.StyleMap( {
                fillColor: '#339933'
            });
            var blue_style = new OpenLayers.StyleMap( {
                fillColor: '#333399'
            });

            var red_vector = new OpenLayers.Layer.Vector("red_vector", {isBaseLayer: false, styleMap: red_style});
	        var green_vector = new OpenLayers.Layer.Vector("green_vector", {isBaseLayer: false, styleMap: green_style});
	        var blue_vector = new OpenLayers.Layer.Vector("blue_vector", {isBaseLayer: false, styleMap: blue_style});
            var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                "http://vmap0.tiles.osgeo.org/wms/vmap0",
                {layers: 'basic'}, {'displayInLayerSwitcher':false, 'visible':false} );
            //order matters in terms of mouseover
            map.addLayers([red_vector,green_vector,blue_vector,ol_wms]);

            var feature = new OpenLayers.Feature.Vector(
                OpenLayers.Geometry.fromWKT(
                    "POLYGON((30 0, 130 -15, -1 -60, 30 0))"
                )
            );
            red_vector.addFeatures([feature]);

            var feature2 = new OpenLayers.Feature.Vector(
                OpenLayers.Geometry.fromWKT(
                    "POLYGON((-120 -50, -80 -80, 80 -20, -120 -50))"
                )
            );
            green_vector.addFeatures([feature2]);

            var feature3 = new OpenLayers.Feature.Vector(
                OpenLayers.Geometry.fromWKT(
                    "POLYGON((-10 -10, 30 -10, 30 -40, -10 -40, -10 -10))"
                )
            );
            blue_vector.addFeatures([feature3]);

            var report = function(e) {
                document.getElementById("output").innerHTML = e.feature.id + " from " + e.feature.layer.name;
            };
            var clearout = function(e) {
                document.getElementById("output").innerHTML = "";
            };

            highlightCtrl = new OpenLayers.Control.SelectFeature([red_vector,blue_vector], {
                hover: true,
                eventListeners: {
                    featurehighlighted: report,
                    featureunhighlighted: clearout
                }
            });
            map.addControl(highlightCtrl);
            //highlightCtrl.activate();

            outputLayers = function () {
                var mapLayers = "";
                map.layers.forEach( function(lyr, i) {
                    if (lyr) {
                        mapLayers += '<p>index:' + i + ' layer:' + lyr.name + ' zIndex:' + lyr.getZIndex() + '</p>';
                    }
                });
                document.getElementById("maplayers").innerHTML = mapLayers;
            };
            outputLayers();

            map.setCenter(new OpenLayers.LonLat(0, 0), 1);
        }
    </script>
  </head>

  <body onload="init()">
    <h1 id="title">OpenLayers Mouseover Multiple vectors</h1>
    <div id="map" class="smallmap"></div>
    <div> <strong>Hovered on:</strong> <span id="output"></span></div>
    <div> <strong>Map Layers:</strong> <span id="maplayers"></span></div>
    <div><a href="javascript:highlightCtrl.activate(); outputLayers();">Activate Control</a></div>
    <div><a href="javascript:highlightCtrl.deactivate(); outputLayers();">Deactivate Control</a></div>

  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>OpenLayers Mouseover Multiple vectors</title>
	<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
	<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css">
	<script src="http://openlayers.org/dev/OpenLayers.js"></script>
	<script type="text/javascript">
	var map, controls, highlightCtrl, outputLayers;

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

	var red_style = new OpenLayers.StyleMap( {
	fillColor: '#993333'
	});
	var green_style = new OpenLayers.StyleMap( {
	fillColor: '#339933'
	});
	var blue_style = new OpenLayers.StyleMap( {
	fillColor: '#333399'
	});

	var red_vector = new OpenLayers.Layer.Vector("red_vector", {isBaseLayer: false, styleMap: red_style});
	var green_vector = new OpenLayers.Layer.Vector("green_vector", {isBaseLayer: false, styleMap: green_style});
	var blue_vector = new OpenLayers.Layer.Vector("blue_vector", {isBaseLayer: false, styleMap: blue_style});
	var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
	"http://vmap0.tiles.osgeo.org/wms/vmap0",
	{layers: 'basic'}, {'displayInLayerSwitcher':false, 'visible':false} );
	//order matters in terms of mouseover
	map.addLayers([red_vector,green_vector,blue_vector,ol_wms]);

	var feature = new OpenLayers.Feature.Vector(
	OpenLayers.Geometry.fromWKT(
	"POLYGON((30 0, 130 -15, -1 -60, 30 0))"
	)
	);
	red_vector.addFeatures([feature]);

	var feature2 = new OpenLayers.Feature.Vector(
	OpenLayers.Geometry.fromWKT(
	"POLYGON((-120 -50, -80 -80, 80 -20, -120 -50))"
	)
	);
	green_vector.addFeatures([feature2]);

	var feature3 = new OpenLayers.Feature.Vector(
	OpenLayers.Geometry.fromWKT(
	"POLYGON((-10 -10, 30 -10, 30 -40, -10 -40, -10 -10))"
	)
	);
	blue_vector.addFeatures([feature3]);

	var report = function(e) {
	document.getElementById("output").innerHTML = e.feature.id + " from " + e.feature.layer.name;
	};
	var clearout = function(e) {
	document.getElementById("output").innerHTML = "";
	};

	highlightCtrl = new OpenLayers.Control.SelectFeature([red_vector,blue_vector], {
	hover: true,
	eventListeners: {
	featurehighlighted: report,
	featureunhighlighted: clearout
	}
	});
	map.addControl(highlightCtrl);
	//highlightCtrl.activate();

	outputLayers = function () {
	var mapLayers = "";
	map.layers.forEach( function(lyr, i) {
	if (lyr) {
	mapLayers += '<p>index:' + i + ' layer:' + lyr.name + ' zIndex:' + lyr.getZIndex() + '</p>';
	}
	});
	document.getElementById("maplayers").innerHTML = mapLayers;
	};
	outputLayers();

	map.setCenter(new OpenLayers.LonLat(0, 0), 1);
	}
	</script>
	</head>

	<body onload="init()">
	<h1 id="title">OpenLayers Mouseover Multiple vectors</h1>
	<div id="map" class="smallmap"></div>
	<div> <strong>Hovered on:</strong> <span id="output"></span></div>
	<div> <strong>Map Layers:</strong> <span id="maplayers"></span></div>
	<div><a href="javascript:highlightCtrl.activate(); outputLayers();">Activate Control</a></div>
	<div><a href="javascript:highlightCtrl.deactivate(); outputLayers();">Deactivate Control</a></div>

	</body>
	</html>