1 <html xmlns="http://www.w3.org/1999/xhtml" debug="true">
3 <title>OpenLayers: Popup Mayhem</title>
4 <link rel="stylesheet" href="../../theme/default/style.css" type="text/css" />
5 <style type="text/css">
9 border: 1px solid black;
13 <script src="../../lib/OpenLayers.js"></script>
14 <script type="text/javascript">
21 // different popup types
24 //disable the autosize for the purpose of our matrix
25 OpenLayers.Popup.FramedCloud.prototype.autoSize = false;
27 AutoSizeFramedCloud = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
32 map = new OpenLayers.Map('map');
34 layer = new OpenLayers.Layer(
40 markers = new OpenLayers.Layer.Markers("zibo");
41 map.addLayer(markers);
44 map.zoomToMaxExtent();
47 function addMarkers() {
49 var ll, popupClass, popupContentHTML;
51 //anchored bubble popup small contents autosize closebox
52 ll = new OpenLayers.LonLat(-35,-15);
53 popupClass = AutoSizeFramedCloud;
54 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>";
55 addMarker(ll, popupClass, popupContentHTML, true);
62 * Add a new marker to the markers layer given the following lonlat,
63 * popupClass, and popup contents HTML. Also allow specifying
64 * whether or not to give the popup a close box.
67 * ll - {<OpenLayers.LonLat>} Where to place the marker
68 * popupClass - {<OpenLayers.Class>} Which class of popup to bring up
69 * when the marker is clicked.
70 * popupContentHTML - {String} What to put in the popup
71 * closeBox - {Boolean} Should popup have a close box?
72 * overflow - {Boolean} Let the popup overflow scrollbars?
74 function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow) {
76 var feature = new OpenLayers.Feature(markers, ll);
77 feature.closeBox = closeBox;
78 feature.popupClass = popupClass;
79 feature.data.popupContentHTML = popupContentHTML;
80 feature.data.overflow = (overflow) ? "auto" : "hidden";
82 var marker = feature.createMarker();
84 var markerClick = function (evt) {
85 if (this.popup == null) {
86 this.popup = this.createPopup(this.closeBox);
87 map.addPopup(this.popup);
92 currentPopup = this.popup;
93 OpenLayers.Event.stop(evt);
95 marker.events.register("mousedown", feature, markerClick);
97 markers.addMarker(marker);
102 <body onload="init()">
103 <h1 id="title">Popup Matrix</h1>
107 <div style="line-height: 40px;">
108 <div id="map" class="smallmap"></div>
110 Click on popup, should be able to read a full sentence, not just two lines.