]> dev.renevier.net Git - syp.git/blob - openlayers/examples/highlight-feature.html
move templates to a specific directory
[syp.git] / 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>