openlayers/tests/manual/popup-keepInMap.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         AutoSizeFramedCloud = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
  22             'autoSize': true,
  23             'panMapIfOutOfView': false
  24         });
  25
  26         function init(){
  27             map = new OpenLayers.Map('map');
  28
  29             markers = new OpenLayers.Layer.Markers("zibo", {isBaseLayer: true});
  30             map.addLayer(markers);
  31
  32             addMarkers();
  33             map.zoomToMaxExtent();
  34         }
  35
  36         function addMarkers() {
  37
  38             var ll, popupClass, popupContentHTML;
  39
  40             //anchored bubble popup small contents autosize closebox
  41             ll = new OpenLayers.LonLat(-35,-15);
  42             popupClass = AutoSizeFramedCloud;
  43             popupContentHTML = "<div>This popup can't be panned to fit in view, so its popup text should fit inside the map. If it doens't, instead of expaning outside, it will simply make the content scroll. Scroll scroll scroll your boat, gently down the stream! Chicken chicken says the popup text is really boring to write. Did you ever see a popup a popup a popup did you ever see a popup a popup right now. With this way and that way and this way and that way did you ever see a popup a popup right now. I wonder if this is long enough. it might be, but maybe i should throw in some other content. <ul><li>one</li><li>two</li><li>three</li><li>four</li></ul>(get your booty on the floor) </div>";
  44             addMarker(ll, popupClass, popupContentHTML, true, true);
  45
  46
  47         }
  48
  49         /**
  50          * Function: addMarker
  51          * Add a new marker to the markers layer given the following lonlat,
  52          *     popupClass, and popup contents HTML. Also allow specifying
  53          *     whether or not to give the popup a close box.
  54          *
  55          * Parameters:
  56          * ll - {<OpenLayers.LonLat>} Where to place the marker
  57          * popupClass - {<OpenLayers.Class>} Which class of popup to bring up
  58          *     when the marker is clicked.
  59          * popupContentHTML - {String} What to put in the popup
  60          * closeBox - {Boolean} Should popup have a close box?
  61          * overflow - {Boolean} Let the popup overflow scrollbars?
  62          */
  63         function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow) {
  64
  65             var feature = new OpenLayers.Feature(markers, ll);
  66             feature.closeBox = closeBox;
  67             feature.popupClass = popupClass;
  68             feature.data.popupContentHTML = popupContentHTML;
  69             feature.data.overflow = (overflow) ? "auto" : "hidden";
  70
  71             var marker = feature.createMarker();
  72
  73             var markerClick = function (evt) {
  74                 if (this.popup == null) {
  75                     this.popup = this.createPopup(this.closeBox);
  76                     map.addPopup(this.popup);
  77                     this.popup.show();
  78                 } else {
  79                     this.popup.toggle();
  80                     this.popup.updateSize();
  81                 }
  82                 currentPopup = this.popup;
  83                 OpenLayers.Event.stop(evt);
  84             };
  85             marker.events.register("mousedown", feature, markerClick);
  86
  87             markers.addMarker(marker);
  88         }
  89
  90     </script>
  91   </head>
  92   <body onload="init()">
  93   <h1 id="title">Popup KeepInMap</h1>
  94
  95            <div id="map" class="smallmap"></div>
  96       </div>
  97       Click on popup, and the content should scroll rather than expanding outside the map.
  98    </div>
  99   </body>
 100 </html>