]> dev.renevier.net Git - syp.git/blob - openlayers/tests/manual/renderedDimensions.html
show number of features on cluster markers
[syp.git] / openlayers / tests / manual / renderedDimensions.html
1 <html xmlns="http://www.w3.org/1999/xhtml" debug="true">
2   <head>
3     <title>OpenLayers: Popup Mayhem</title>
4     <link rel="stylesheet" href="../../theme/default/style.css" type="text/css" />
5     <style type="text/css">
6         #map {
7             width: 900px;
8             height: 500px;
9             border: 1px solid black;
10         }
11     </style>
12
13     <script src="../../lib/OpenLayers.js"></script>
14     <script type="text/javascript">
15         var map;
16         var layer, markers;
17         
18         var currentPopup;
19         
20         
21 // different popup types
22
23
24         //disable the autosize for the purpose of our matrix
25         OpenLayers.Popup.FramedCloud.prototype.autoSize = false;
26
27         AutoSizeFramedCloud = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
28             'autoSize': true
29         });
30
31         function init(){
32             map = new OpenLayers.Map('map');
33
34             layer = new OpenLayers.Layer(
35                 "popupMatrix", 
36                 {isBaseLayer: true}
37             );
38             map.addLayer(layer);
39
40             markers = new OpenLayers.Layer.Markers("zibo");
41             map.addLayer(markers);
42
43             addMarkers();
44             map.zoomToMaxExtent();
45         }
46         
47         function addMarkers() {
48
49             var ll, popupClass, popupContentHTML;
50
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);
56  
57
58         }
59
60         /**
61          * Function: addMarker
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.
65          * 
66          * Parameters:
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?
73          */
74         function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow) {
75
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";
81                     
82             var marker = feature.createMarker();
83
84             var markerClick = function (evt) {
85                 if (this.popup == null) {
86                     this.popup = this.createPopup(this.closeBox);
87                     map.addPopup(this.popup);
88                     this.popup.show();
89                 } else {
90                     this.popup.toggle();
91                 }
92                 currentPopup = this.popup;
93                 OpenLayers.Event.stop(evt);
94             };
95             marker.events.register("mousedown", feature, markerClick);
96
97             markers.addMarker(marker);
98         }
99
100     </script>
101   </head>
102   <body onload="init()">
103   <h1 id="title">Popup Matrix</h1>
104
105   <div id="tags">
106   </div>
107       <div style="line-height: 40px;">
108            <div id="map" class="smallmap"></div>
109       </div>
110       Click on popup, should be able to read a full sentence, not just two lines.  
111    </div>
112   </body>
113 </html>