← Back to branch summary

~mortenoh/+junk/dhis2-detailed-import-export

« back to all changes in this revision

Viewing changes to gis/dhis-gis-geostat/mfbase/openlayers/examples/select-feature-openpopup.html

  • Committer: larshelge at gmail
  • Date: 2009-03-03 16:46:36 UTC
  • Revision ID: larshelge@gmail.com-20090303164636-2sjlrquo7ib1gf7r
Initial check-in

Show diffs side-by-side

added added

removed removed

Lines of Context:
gis/dhis-gis-geostat/mfbase/openlayers/examples/select-feature-openpopup.html
 
1
<html xmlns="http://www.w3.org/1999/xhtml">
 
2
  <head>
 
3
    <title>Open Popup on Layer.Vector</title> 
 
4
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
 
5
    <link rel="stylesheet" href="../theme/default/framedCloud.css" type="text/css" />
 
6
    <link rel="stylesheet" href="style.css" type="text/css" />
 
7
    <style type="text/css">
 
8
        #controlToggle li {
 
9
            list-style: none;
 
10
        }
 
11
    </style>
 
12
    <script src="../lib/OpenLayers.js"></script>
 
13
    <script type="text/javascript">
 
14
        var map, drawControls, selectControl, selectedFeature;
 
15
        function onPopupClose(evt) {
 
16
            selectControl.unselect(selectedFeature);
 
17
        }
 
18
        function onFeatureSelect(feature) {
 
19
            selectedFeature = feature;
 
20
            popup = new OpenLayers.Popup.FramedCloud("chicken", 
 
21
                                     feature.geometry.getBounds().getCenterLonLat(),
 
22
                                     null,
 
23
                                     "<div style='font-size:.8em'>Feature: " + feature.id +"<br />Area: " + feature.geometry.getArea()+"</div>",
 
24
                                     null, true, onPopupClose);
 
25
            feature.popup = popup;
 
26
            map.addPopup(popup);
 
27
        }
 
28
        function onFeatureUnselect(feature) {
 
29
            map.removePopup(feature.popup);
 
30
            feature.popup.destroy();
 
31
            feature.popup = null;
 
32
        }    
 
33
        function init(){
 
34
            map = new OpenLayers.Map('map');
 
35
            var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
 
36
                "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}); 
 
37
 
 
38
            var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
 
39
 
 
40
            map.addLayers([wmsLayer, polygonLayer]);
 
41
            map.addControl(new OpenLayers.Control.LayerSwitcher());
 
42
            map.addControl(new OpenLayers.Control.MousePosition());
 
43
            
 
44
            selectControl = new OpenLayers.Control.SelectFeature(polygonLayer,
 
45
                {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
 
46
            drawControls = {
 
47
                polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
 
48
                            OpenLayers.Handler.Polygon),
 
49
                select: selectControl
 
50
            };
 
51
            
 
52
            for(var key in drawControls) {
 
53
                map.addControl(drawControls[key]);
 
54
            }
 
55
 
 
56
            
 
57
            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
 
58
 
 
59
        }
 
60
 
 
61
        function toggleControl(element) {
 
62
            for(key in drawControls) {
 
63
                var control = drawControls[key];
 
64
                if(element.value == key && element.checked) {
 
65
                    control.activate();
 
66
                } else {
 
67
                    control.deactivate();
 
68
                }
 
69
            }
 
70
        }
 
71
    </script>
 
72
  </head>
 
73
  <body onload="init()">
 
74
    <h1 id="title">Open Popup on Layer.Vector</h1> 
 
75
    <p id="shortdesc">
 
76
      Using a Control.SelectFeature, open a popup on click.
 
77
    </p>
 
78
    <div id="map" class="smallmap"></div>
 
79
    <ul id="controlToggle">
 
80
        <li>
 
81
            <input type="radio" name="type" value="none" id="noneToggle"
 
82
                   onclick="toggleControl(this);" checked="checked" />
 
83
            <label for="noneToggle">navigate</label>
 
84
        </li>
 
85
        <li>
 
86
            <input type="radio" name="type" value="polygon" id="polygonToggle"
 
87
                   onclick="toggleControl(this);" />
 
88
            <label for="polygonToggle">draw polygon</label>
 
89
        </li>
 
90
        <li>
 
91
            <input type="radio" name="type" value="select" id="selectToggle"
 
92
                   onclick="toggleControl(this);" />
 
93
            <label for="selectToggle">select polygon on click</label>
 
94
        </li>
 
95
    </ul>       
 
96
    <p>It is possible to use the onSelect/onUnselect hooks on the SelectFeature
 
97
       to do fun things -- like open a popup.
 
98
    </p>   
 
99
  </body>
 
100
</html>