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
|
<html xmlns="http://www.w3.org/1999/xhtml" debug="true">
<head>
<title>OpenLayers: Popup Mayhem</title>
<link rel="stylesheet" href="../../theme/default/style.css" type="text/css" />
<style type="text/css">
#map {
width: 900px;
height: 500px;
border: 1px solid black;
}
</style>
<script src="../../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map;
var layer, markers;
var currentPopup;
// different popup types
//disable the autosize for the purpose of our matrix
OpenLayers.Popup.FramedCloud.prototype.autoSize = false;
AutoSizeFramedCloud = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
'autoSize': true
});
function init(){
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer(
"popupMatrix",
{isBaseLayer: true}
);
map.addLayer(layer);
markers = new OpenLayers.Layer.Markers("zibo");
map.addLayer(markers);
addMarkers();
map.zoomToMaxExtent();
}
function addMarkers() {
var ll, popupClass, popupContentHTML;
//anchored bubble popup small contents autosize closebox
ll = new OpenLayers.LonLat(-35,-15);
popupClass = AutoSizeFramedCloud;
popupContentHTML = "<div>This text's line-height is affected<br/>by it's parents. Thus we have to<br/>place the content inside<br/>the correct container to get<br/>the rendered size.</div>";
addMarker(ll, popupClass, popupContentHTML, true);
}
/**
* Function: addMarker
* Add a new marker to the markers layer given the following lonlat,
* popupClass, and popup contents HTML. Also allow specifying
* whether or not to give the popup a close box.
*
* Parameters:
* ll - {<OpenLayers.LonLat>} Where to place the marker
* popupClass - {<OpenLayers.Class>} Which class of popup to bring up
* when the marker is clicked.
* popupContentHTML - {String} What to put in the popup
* closeBox - {Boolean} Should popup have a close box?
* overflow - {Boolean} Let the popup overflow scrollbars?
*/
function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow) {
var feature = new OpenLayers.Feature(markers, ll);
feature.closeBox = closeBox;
feature.popupClass = popupClass;
feature.data.popupContentHTML = popupContentHTML;
feature.data.overflow = (overflow) ? "auto" : "hidden";
var marker = feature.createMarker();
var markerClick = function (evt) {
if (this.popup == null) {
this.popup = this.createPopup(this.closeBox);
map.addPopup(this.popup);
this.popup.show();
} else {
this.popup.toggle();
}
currentPopup = this.popup;
OpenLayers.Event.stop(evt);
};
marker.events.register("mousedown", feature, markerClick);
markers.addMarker(marker);
}
</script>
</head>
<body onload="init()">
<h1 id="title">Popup Matrix</h1>
<div id="tags">
</div>
<div style="line-height: 40px;">
<div id="map" class="smallmap"></div>
</div>
Click on popup, should be able to read a full sentence, not just two lines.
</div>
</body>
</html>
|
