1 <html xmlns="http://www.w3.org/1999/xhtml">
3 <title>SelectFeature Control on multiple vector layers</title>
4 <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
5 <link rel="stylesheet" href="style.css" type="text/css" />
6 <style type="text/css">
11 <script src="../lib/OpenLayers.js"></script>
12 <script type="text/javascript">
13 var map, selectControl;
14 OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
16 map = new OpenLayers.Map('map');
17 var wmsLayer = new OpenLayers.Layer.WMS(
19 "http://labs.metacarta.com/wms/vmap0",
23 var vectors1 = new OpenLayers.Layer.Vector("Vector Layer 1", {
24 styleMap: new OpenLayers.StyleMap({
25 "default": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
26 externalGraphic: "../img/marker-green.png",
30 }, OpenLayers.Feature.Vector.style["default"])),
31 "select": new OpenLayers.Style({
32 externalGraphic: "../img/marker-blue.png"
36 var vectors2 = new OpenLayers.Layer.Vector("Vector Layer 2", {
37 styleMap: new OpenLayers.StyleMap({
38 "default": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
41 graphicName: "square",
44 }, OpenLayers.Feature.Vector.style["default"])),
45 "select": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
46 graphicName: "square",
49 }, OpenLayers.Feature.Vector.style["select"]))
52 map.addLayers([wmsLayer, vectors1, vectors2]);
53 map.addControl(new OpenLayers.Control.LayerSwitcher());
55 selectControl = new OpenLayers.Control.SelectFeature(
58 clickout: true, toggle: false,
59 multiple: false, hover: false,
60 toggleKey: "ctrlKey", // ctrl key removes from selection
61 multipleKey: "shiftKey" // shift key adds to selection
65 map.addControl(selectControl);
66 selectControl.activate();
67 map.setCenter(new OpenLayers.LonLat(0, 0), 3);
68 vectors1.addFeatures(createFeatures());
69 vectors2.addFeatures(createFeatures());
72 "featureselected": function(e) {
73 showStatus("selected feature "+e.feature.id+" on Vector Layer 1");
75 "featureunselected": function(e) {
76 showStatus("unselected feature "+e.feature.id+" on Vector Layer 1");
80 "featureselected": function(e) {
81 showStatus("selected feature "+e.feature.id+" on Vector Layer 2");
83 "featureunselected": function(e) {
84 showStatus("unselected feature "+e.feature.id+" on Vector Layer 2");
89 function createFeatures() {
90 var extent = map.getExtent();
92 for(var i=0; i<10; ++i) {
93 features.push(new OpenLayers.Feature.Vector(
94 new OpenLayers.Geometry.Point(extent.left + (extent.right - extent.left) * Math.random(),
95 extent.bottom + (extent.top - extent.bottom) * Math.random()
101 function showStatus(text) {
102 document.getElementById("status").innerHTML = text;
107 <body onload="init()">
108 <h1 id="title">OpenLayers Select Feature on Multiple Layers Example</h1>
110 Select a feature on click with the Control.SelectFeature on multiple
113 <div id="map" class="smallmap"></div>
114 <div id="status"></div>