openlayers/examples/select-feature-multilayer.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   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">
   7         #controlToggle li {
   8             list-style: none;
   9         }
  10     </style>
  11     <script src="../lib/OpenLayers.js"></script>
  12     <script type="text/javascript">
  13         var map, selectControl;
  14         OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
  15         function init(){
  16             map = new OpenLayers.Map('map');
  17             var wmsLayer = new OpenLayers.Layer.WMS(
  18                 "OpenLayers WMS",
  19                 "http://labs.metacarta.com/wms/vmap0",
  20                 {layers: 'basic'}
  21             );
  22
  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",
  27                         graphicOpacity: 1,
  28                         rotation: -45,
  29                         pointRadius: 10
  30                     }, OpenLayers.Feature.Vector.style["default"])),
  31                     "select": new OpenLayers.Style({
  32                         externalGraphic: "../img/marker-blue.png"
  33                     })
  34                 })
  35             });
  36             var vectors2 = new OpenLayers.Layer.Vector("Vector Layer 2", {
  37                 styleMap: new OpenLayers.StyleMap({
  38                     "default": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
  39                         fillColor: "red",
  40                         strokeColor: "gray",
  41                         graphicName: "square",
  42                         rotation: 45,
  43                         pointRadius: 15
  44                     }, OpenLayers.Feature.Vector.style["default"])),
  45                     "select": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
  46                         graphicName: "square",
  47                         rotation: 45,
  48                         pointRadius: 15
  49                     }, OpenLayers.Feature.Vector.style["select"]))
  50                 })
  51             });
  52             map.addLayers([wmsLayer, vectors1, vectors2]);
  53             map.addControl(new OpenLayers.Control.LayerSwitcher());
  54
  55             selectControl = new OpenLayers.Control.SelectFeature(
  56                 [vectors1, vectors2],
  57                 {
  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
  62                 }
  63             );
  64
  65             map.addControl(selectControl);
  66             selectControl.activate();
  67             map.setCenter(new OpenLayers.LonLat(0, 0), 3);
  68             vectors1.addFeatures(createFeatures());
  69             vectors2.addFeatures(createFeatures());
  70
  71             vectors1.events.on({
  72                 "featureselected": function(e) {
  73                     showStatus("selected feature "+e.feature.id+" on Vector Layer 1");
  74                 },
  75                 "featureunselected": function(e) {
  76                     showStatus("unselected feature "+e.feature.id+" on Vector Layer 1");
  77                 }
  78             });
  79             vectors2.events.on({
  80                 "featureselected": function(e) {
  81                     showStatus("selected feature "+e.feature.id+" on Vector Layer 2");
  82                 },
  83                 "featureunselected": function(e) {
  84                     showStatus("unselected feature "+e.feature.id+" on Vector Layer 2");
  85                 }
  86             });
  87         }
  88
  89         function createFeatures() {
  90             var extent = map.getExtent();
  91             var features = [];
  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()
  96                 )));
  97             }
  98             return features;
  99         }
 100
 101         function showStatus(text) {
 102             document.getElementById("status").innerHTML = text;
 103         }
 104
 105     </script>
 106   </head>
 107   <body onload="init()">
 108     <h1 id="title">OpenLayers Select Feature on Multiple Layers Example</h1>
 109     <p id="shortdesc">
 110       Select a feature on click with the Control.SelectFeature on multiple
 111       vector layers.
 112     </p>
 113     <div id="map" class="smallmap"></div>
 114     <div id="status"></div>
 115   </body>
 116 </html>