popups.html
4.51 KB
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#map {
width: 512px;
height: 512px;
border: 1px solid black;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
<!--
var map, layer, popup;
var markers, feature, marker;
function init(){
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}
function changer() {
popup.setBackgroundColor("red");
popup.setSize(new OpenLayers.Size(100,600));
// popup.moveTo(new OpenLayers.Pixel(120,120));
// popup.setOpacity(.5);
popup.setBorder("2px solid");
popup.setContentHTML("High Chickens");
}
function add() {
popup = new OpenLayers.Popup("chicken",
new OpenLayers.LonLat(5,40),
new OpenLayers.Size(200,200),
"example popup",
true);
map.addPopup(popup);
}
function addAnchor() {
popup = new OpenLayers.Popup.Anchored("chicken",
new OpenLayers.LonLat(5,40),
new OpenLayers.Size(200,200),
"example popup", true);
map.addPopup(popup);
}
function addMarker() {
markers = new OpenLayers.Layer.Markers("zibo");
map.addLayer(markers);
feature = new OpenLayers.Feature(layer,
new OpenLayers.LonLat(0,0));
marker = feature.createMarker();
markers.addMarker(marker);
marker.events.register("mousedown", marker, mousedown);
}
function mousedown(evt) {
// check to see if the popup was hidden by the close box
// if so, then destroy it before continuing
if (popup != null) {
if (!popup.visible()) {
markers.map.removePopup(popup);
popup.destroy();
popup = null;
}
}
if (popup == null) {
popup = feature.createPopup(true);
popup.setContentHTML("<a href='http://www.somethingconstructive.net' target='_blank'>click me</a>");
popup.setBackgroundColor("yellow");
popup.setOpacity(0.7);
markers.map.addPopup(popup);
} else {
markers.map.removePopup(popup);
popup.destroy();
popup = null;
}
Event.stop(evt);
}
/**
* @param {Event} evt
*/
function onPopupMouseDown(evt) {
markers.map.removePopup(popup);
popup.destroy();
popup = null;
Event.stop(evt);
}
function destroy() {
popup.destroy();
}
function remove() {
markers.removeMarker(marker);
}
function removelayer() {
layer.destroy();
// map.removeLayer(markers);
}
// -->
</script>
</head>
<body onload="init()">
<div id="map"></div>
<div style="background-color:purple" onclick="add()"> click to add Popup to map</div>
<div style="background-color:green" onclick="addMarker()"> click to add a Marker with an AnchoredBubble popup</div>
<div style="background-color:blue" onclick="changer()"> click to modify popup's attributes</div>
<div style="background-color:red" onclick="remove()"> click to remove the popup from map</div>
<div style="background-color:grey" onclick="removelayer()"> click to remove the markers layer</div>
<div style="background-color:orange" onclick="alert(marker.onScreen())"> marker.onscreen()?</div>
<div style="background-color:yellow" onclick="destroy()"> click to destroy the popup from map</div>
</body>
</html>