openlayers/tests/manual/feature-handler.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>Feature Handler Acceptance Test</title>
   4     <style type="text/css">
   5
   6         body {
   7             font-size: 0.8em;
   8         }
   9         p {
  10             padding-top: 1em;
  11         }
  12         li {
  13             list-style: none;
  14         }
  15         #output {
  16             width: 300px;
  17             height: 300px;
  18         }
  19         #west {
  20             width: 425px;
  21         }
  22
  23         #east {
  24             position: absolute;
  25             left: 450px;
  26             top: 5px;
  27         }
  28         #map {
  29             width: 400px;
  30             height: 400px;
  31             border: 1px solid gray;
  32         }
  33
  34     </style>
  35
  36     <script src="../../lib/OpenLayers.js"></script>
  37     <script type="text/javascript">
  38
  39         var map, draw, handler, controls;
  40         OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
  41
  42         function init(){
  43             map = new OpenLayers.Map('map');
  44
  45             var vectors = new OpenLayers.Layer.Vector(
  46                 "Vector Layer",
  47                 {isBaseLayer: true}
  48             );
  49             map.addLayer(vectors);
  50
  51
  52             draw = new OpenLayers.Control.DrawFeature(
  53                 vectors, OpenLayers.Handler.Polygon
  54             );
  55             map.addControl(draw);
  56
  57             var callbacks = {
  58                 "over": function(feature) {
  59                     log("over " + feature.id);
  60                 },
  61                 "out": function(feature) {
  62                     log("out " + feature.id);
  63                 },
  64                 "click": function(feature) {
  65                     log("click " + feature.id);
  66                 },
  67                 "dblclick": function(feature) {
  68                     log("dblclick " + feature.id);
  69                 },
  70                 "clickout": function(feature) {
  71                     log("clickout " + feature.id);
  72                 }
  73             };
  74
  75             handler = new OpenLayers.Handler.Feature(
  76                 {map: map}, vectors, callbacks
  77             );
  78
  79             map.setCenter(new OpenLayers.LonLat(0, 0), 3);
  80
  81         }
  82
  83         function log(msg) {
  84             document.getElementById('output').value += msg + "\n";
  85         }
  86
  87         function clearLog() {
  88             document.getElementById('output').value = "";
  89         }
  90
  91     </script>
  92   </head>
  93   <body onload="init()">
  94     <div id="west">
  95         <div id="map"></div>
  96         <p>
  97             Draw a few polygons on the map.  Some overlapping.  Activate the
  98             feature handler and ensure that "over" and "out" are called only
  99             when mousing over/out of a feature for the first time.  The
 100             "click" callback should be called for every click on a feature.
 101             The "clickout" callback should be called when?
 102         </p>
 103     </div>
 104     <div id="east">
 105         <ul>
 106             <li>
 107                 <input type="radio" name="type" value="none" id="noneToggle"
 108                        onclick="draw.deactivate();handler.deactivate();" checked="checked" />
 109                 <label for="noneToggle">navigate</label>
 110             </li>
 111             <li>
 112                 <input type="radio" name="type" value="polygon" id="polygonToggle"
 113                        onclick="draw.activate();handler.deactivate();" />
 114                 <label for="polygonToggle">draw polygon</label>
 115             </li>
 116             <li>
 117                 <input type="radio" name="type" value="feature" id="featureToggle"
 118                        onclick="draw.deactivate();handler.activate();" />
 119                 <label for="featureToggle">activate feature handler</label>
 120             </li>
 121         </ul>
 122         <button onclick="clearLog();">clear log</button><br />
 123         <textarea id="output"></textarea>
 124     </div>
 125   </body>
 126 </html>