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