← 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/popups.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/popups.html
 
1
<html xmlns="http://www.w3.org/1999/xhtml">
 
2
  <head>
 
3
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
 
4
    <link rel="stylesheet" href="style.css" type="text/css" />
 
5
    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
 
6
    <script src="../lib/OpenLayers.js"></script>
 
7
    <script type="text/javascript">
 
8
        var map, layer, popup;
 
9
        var markers, feature, marker;
 
10
        
 
11
        function init(){
 
12
            map = new OpenLayers.Map('map');
 
13
            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
 
14
                "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
 
15
            map.addLayer(layer);
 
16
            layer = new OpenLayers.Layer.Google( "Google" );
 
17
            map.addLayer(layer);
 
18
 
 
19
            map.addControl(new OpenLayers.Control.LayerSwitcher());
 
20
            map.zoomToMaxExtent();
 
21
            
 
22
        }
 
23
 
 
24
        function changer() {
 
25
            popup.setBackgroundColor("red");
 
26
            popup.setSize(new OpenLayers.Size(100,600));
 
27
//            popup.moveTo(new OpenLayers.Pixel(120,120));
 
28
//            popup.setOpacity(.5);
 
29
            popup.setBorder("2px solid");    
 
30
            popup.setContentHTML("High Chickens");            
 
31
        }
 
32
 
 
33
        function add() {
 
34
            popup = new OpenLayers.Popup("chicken", 
 
35
                                         new OpenLayers.LonLat(5,40),
 
36
                                         new OpenLayers.Size(200,200),
 
37
                                         "example popup",
 
38
                                         true);
 
39
        
 
40
            map.addPopup(popup);
 
41
        }        
 
42
 
 
43
        function addAnchor() {
 
44
            popup = new OpenLayers.Popup.Anchored("chicken", 
 
45
                                         new OpenLayers.LonLat(5,40),
 
46
                                         new OpenLayers.Size(200,200),
 
47
                                         "example popup", true);
 
48
        
 
49
            map.addPopup(popup);
 
50
        }        
 
51
        
 
52
        function addMarker() {
 
53
    
 
54
            markers = new OpenLayers.Layer.Markers("zibo");
 
55
            map.addLayer(markers);
 
56
 
 
57
            feature = new OpenLayers.Feature(layer, 
 
58
                                                 new OpenLayers.LonLat(0,0));
 
59
 
 
60
 
 
61
            marker = feature.createMarker();
 
62
            
 
63
            markers.addMarker(marker);
 
64
            marker.events.register("mousedown", marker, mousedown);
 
65
                                                             
 
66
        }
 
67
        
 
68
        function mousedown(evt) {
 
69
            if (popup == null) {
 
70
                popup = feature.createPopup(true);
 
71
                popup.setContentHTML("<div style='background-color:red; width:150;height:100'><a href='http://www.somethingconstructive.net' target='_blank'>click me</a></div>");
 
72
                popup.setBackgroundColor("yellow");
 
73
                popup.setOpacity(0.7);
 
74
                markers.map.addPopup(popup);
 
75
            } else {
 
76
                popup.toggle();
 
77
               }
 
78
            OpenLayers.Event.stop(evt);
 
79
        }        
 
80
 
 
81
        /**
 
82
         * @param {Event} evt
 
83
         */
 
84
        function onPopupMouseDown(evt) {
 
85
            markers.map.removePopup(popup);
 
86
            popup.destroy();
 
87
            popup = null;
 
88
            OpenLayers.Event.stop(evt);
 
89
        }
 
90
 
 
91
 
 
92
        function destroy() {
 
93
            popup.destroy();
 
94
        }
 
95
 
 
96
        function remove() {
 
97
            markers.removeMarker(marker);
 
98
        }
 
99
 
 
100
        function removelayer() {
 
101
            layer.destroy();
 
102
//            map.removeLayer(markers);
 
103
        }
 
104
    </script>
 
105
  </head>
 
106
  <body onload="init()">
 
107
  <h1 id="title">Popup Mayhem</h1>
 
108
 
 
109
  <div id="tags">
 
110
  </div>
 
111
  <p id="shortdesc">
 
112
      All kinds of ways to create and interact with Popups.
 
113
  </p>
 
114
 
 
115
  <div id="map" class="smallmap"></div>
 
116
    <p>If you open an anchoredbubble and switch to google, it shouldn't crash. If it does, don't release OpenLayers.</p>  
 
117
    <div style="background-color:purple" onclick="add()"> click to add Popup to map</div>
 
118
    <div style="background-color:green" onclick="addMarker()"> click to add a Marker with an AnchoredBubble popup</div>
 
119
    <div style="background-color:blue" onclick="changer()"> click to modify popup's attributes</div>
 
120
    <div style="background-color:red" onclick="remove()"> click to remove the popup from map</div>
 
121
    <div style="background-color:grey" onclick="removelayer()"> click to remove the markers layer</div>
 
122
    <div style="background-color:orange" onclick="alert(marker.onScreen())"> marker.onscreen()?</div>
 
123
    <div style="background-color:yellow" onclick="destroy()"> click to destroy the popup from map</div> 
 
124
    <div id="docs">
 
125
      Detailed description of this example needs to be written.
 
126
   </div>
 
127
  </body>
 
128
</html>