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>