openlayers/examples/highlight-feature.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>SelectFeature Control for Select and Highlight</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/Firebug/firebug.js"></script>
  12     <script src="../lib/OpenLayers.js"></script>
  13     <script type="text/javascript">
  14
  15         var map, controls;
  16
  17         OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
  18
  19         function init(){
  20             map = new OpenLayers.Map('map');
  21
  22             var vectors = new OpenLayers.Layer.Vector("vector", {isBaseLayer: true});
  23             map.addLayers([vectors]);
  24
  25             var feature = new OpenLayers.Feature.Vector(
  26                 OpenLayers.Geometry.fromWKT(
  27                     "POLYGON((28.828125 0.3515625, 132.1875 -13.0078125, -1.40625 -59.4140625, 28.828125 0.3515625))"
  28                 )
  29             );
  30             vectors.addFeatures([feature]);
  31
  32             var feature2 = new OpenLayers.Feature.Vector(
  33                 OpenLayers.Geometry.fromWKT(
  34                     "POLYGON((-120.828125 -50.3515625, -80.1875 -80.0078125, -40.40625 -20.4140625, -120.828125 -50.3515625))"
  35                 )
  36             );
  37             vectors.addFeatures([feature2]);
  38
  39             var report = function(e) {
  40                 OpenLayers.Console.log(e.type, e.feature.id);
  41             };
  42
  43             var highlightCtrl = new OpenLayers.Control.SelectFeature(vectors, {
  44                 hover: true,
  45                 highlightOnly: true,
  46                 renderIntent: "temporary",
  47                 eventListeners: {
  48                     beforefeaturehighlighted: report,
  49                     featurehighlighted: report,
  50                     featureunhighlighted: report
  51                 }
  52             });
  53
  54             var selectCtrl = new OpenLayers.Control.SelectFeature(vectors,
  55                 {clickout: true}
  56             );
  57
  58             map.addControl(highlightCtrl);
  59             map.addControl(selectCtrl);
  60
  61             highlightCtrl.activate();
  62             selectCtrl.activate();
  63
  64             map.addControl(new OpenLayers.Control.EditingToolbar(vectors));
  65
  66             map.setCenter(new OpenLayers.LonLat(0, 0), 1);
  67
  68         }
  69     </script>
  70   </head>
  71   <body onload="init()">
  72     <h1 id="title">OpenLayers Select and Highlight Feature Example</h1>
  73     <p id="shortdesc">
  74       Select features on click, highlight features on hover.
  75     </p>
  76     <div id="map" class="smallmap"></div>
  77     <p>Select features by clicking on them. Just highlight features by hovering over
  78     them.</p>
  79   </body>
  80 </html>