openlayers/examples/popupMatrix.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     <link rel="stylesheet" href="style.css" type="text/css" />
   6     <style type="text/css">
   7         #map {
   8             width: 900px;
   9             height: 500px;
  10             border: 1px solid black;
  11             background-color: blue;
  12         }
  13     </style>
  14
  15     <script src="../lib/Firebug/firebug.js"></script>
  16     <script src="../lib/OpenLayers.js"></script>
  17     <script type="text/javascript">
  18         var map;
  19         var layer, markers;
  20
  21         var currentPopup;
  22
  23         var samplePopupContentsHTML = "Old man down, way down down, down by the docks of the city.<br>Blind and dirty, asked me for a dime, a dime for a cup of coffee.<br>I got no dime but I got some time to hear his story.<br>My name is August West, and I love my Pearly Baker best more than my wine.<br>More than my wine - more than my maker, though he's no friend of mine.<br><br>Everyone said, I'd come to no good, I knew I would Pearly, believe them.<br>Half of my life, I spent doin' time for some other fucker's crime,<br>The other half found me stumbling 'round drunk on Burgundy wine.<br><br>But I'll get back on my feet again someday,<br>The good Lord willin', if He says I may.<br>I know that the life i'm livin's no good,<br>I'll get a new start, live the life I should.<br>I'll get up and fly away, I'll get up and fly away, fly away.<br><br>Pearly's been true, true to me, true to my dyin' day he said,<br>I said to him, I said to him, I'm sure she's been.<br>I said to him, I'm sure she's been tru to you.<br><br>Got up and wandered, wandered downtown, nowhere to go but just hang around.<br>I've got a girl, named Bonnie Lee, I know that girl's been true to me.<br>I know she's been, I'm sure she's been true to me.<br><br>";
  24         var samplePopupContentsHTML_WideShort = "Old man down, way down down, down by the docks of the city.Blind and dirty, asked me for a dime, a dime for a cup of coffee.I got no dime but I got some time to hear his story.My name is August West, and I love my Pearly Baker best more than my wine.More than my wine - more than my maker, though he's no friend of mine.Everyone said, I'd come to no good, I knew I would Pearly, believe them.<br>Half of my life, I spent doin' time for some other fucker's crime,The other half found me stumbling 'round drunk on Burgundy wine.But I'll get back on my feet again someday,The good Lord willin', if He says I may.I know that the life i'm livin's no good,I'll get a new start, live the life I should.I'll get up and fly away, I'll get up and fly away, fly away.Pearly's been true, true to me, true to my dyin' day he said,I said to him, I said to him, I'm sure she's been.I said to him, I'm sure she's been tru to you.Got up and wandered, wandered downtown, nowhere to go but just hang around.I've got a girl, named Bonnie Lee, I know that girl's been true to me.I know she's been, I'm sure she's been true to me.";
  25
  26 // different popup types
  27
  28     //anchored
  29         AutoSizeAnchored = OpenLayers.Class(OpenLayers.Popup.Anchored, {
  30             'autoSize': true
  31         });
  32
  33         AutoSizeAnchoredMinSize = OpenLayers.Class(OpenLayers.Popup.Anchored, {
  34             'autoSize': true,
  35             'minSize': new OpenLayers.Size(400,400)
  36         });
  37
  38         AutoSizeAnchoredMaxSize = OpenLayers.Class(OpenLayers.Popup.Anchored, {
  39             'autoSize': true,
  40             'maxSize': new OpenLayers.Size(100,100)
  41         });
  42
  43         //anchoredbubble
  44
  45         AutoSizeAnchoredBubble = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, {
  46             'autoSize': true
  47         });
  48
  49         AutoSizeAnchoredBubbleMinSize = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, {
  50             'autoSize': true,
  51             'minSize': new OpenLayers.Size(400,400)
  52         });
  53
  54         AutoSizeAnchoredBubbleMaxSize = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, {
  55             'autoSize': true,
  56             'maxSize': new OpenLayers.Size(100,100)
  57         });
  58
  59         //framed
  60
  61         //disable the autosize for the purpose of our matrix
  62         OpenLayers.Popup.FramedCloud.prototype.autoSize = false;
  63
  64         AutoSizeFramedCloud = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
  65             'autoSize': true
  66         });
  67
  68         AutoSizeFramedCloudMinSize = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
  69             'autoSize': true,
  70             'minSize': new OpenLayers.Size(400,400)
  71         });
  72
  73         AutoSizeFramedCloudMaxSize = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
  74             'autoSize': true,
  75             'maxSize': new OpenLayers.Size(100,100)
  76         });
  77
  78
  79         function init(){
  80             map = new OpenLayers.Map('map');
  81
  82             layer = new OpenLayers.Layer.Image(
  83                 "popupMatrix",
  84                 "popupMatrix.jpg",
  85                 new OpenLayers.Bounds(-82.5,-71.5,97.5,67.5),
  86                 new OpenLayers.Size(1024,768)
  87             );
  88             map.addLayer(layer);
  89
  90             markers = new OpenLayers.Layer.Markers("zibo");
  91             map.addLayer(markers);
  92
  93             map.addControl(new OpenLayers.Control.LayerSwitcher());
  94             map.zoomToMaxExtent();
  95
  96             addMarkers();
  97         }
  98
  99         function addMarkers() {
 100
 101             var ll, popupClass, popupContentHTML;
 102
 103         //
 104         //Anchored NO OVERFLOW
 105         //
 106
 107             //anchored popup small contents no autosize
 108             ll = new OpenLayers.LonLat(-55,20);
 109             popupClass = OpenLayers.Popup.Anchored;
 110             popupContentHTML = '<img src="small.jpg"></img>';
 111             addMarker(ll, popupClass, popupContentHTML);
 112
 113             //anchored popup small contents no autosize closebox
 114             var ll = new OpenLayers.LonLat(-50,20);
 115             popupClass = OpenLayers.Popup.Anchored;
 116             popupContentHTML = '<img src="small.jpg"></img>';
 117             addMarker(ll, popupClass, popupContentHTML, true);
 118
 119
 120             //anchored popup small contents autosize
 121             ll = new OpenLayers.LonLat(-40,20);
 122             popupClass = AutoSizeAnchored;
 123             popupContentHTML = '<img src="small.jpg"></img>';
 124             addMarker(ll, popupClass, popupContentHTML);
 125
 126             //anchored popup small contents autosize closebox
 127             ll = new OpenLayers.LonLat(-35,20);
 128             popupClass = AutoSizeAnchored;
 129             popupContentHTML = '<img src="small.jpg"></img>';
 130             addMarker(ll, popupClass, popupContentHTML, true);
 131
 132
 133             //anchored popup small contents autosize minsize
 134             ll = new OpenLayers.LonLat(-25,20);
 135             popupClass = AutoSizeAnchoredMinSize;
 136             popupContentHTML = '<img src="small.jpg"></img>';
 137             addMarker(ll, popupClass, popupContentHTML);
 138
 139             //anchored popup small contents autosize minsize closebox
 140             ll = new OpenLayers.LonLat(-20,20);
 141             popupClass = AutoSizeAnchoredMinSize;
 142             popupContentHTML = '<img src="small.jpg"></img>';
 143             addMarker(ll, popupClass, popupContentHTML, true);
 144
 145
 146             //anchored popup small contents autosize maxsize
 147             ll = new OpenLayers.LonLat(-10,20);
 148             popupClass = AutoSizeAnchoredMaxSize;
 149             popupContentHTML = '<img src="small.jpg"></img>';
 150             addMarker(ll, popupClass, popupContentHTML);
 151
 152             //anchored popup small contents autosize maxsize closebox
 153             ll = new OpenLayers.LonLat(-5,20);
 154             popupClass = AutoSizeAnchoredMaxSize;
 155             popupContentHTML = '<img src="small.jpg"></img>';
 156             addMarker(ll, popupClass, popupContentHTML, true);
 157
 158
 159             //anchored popup bigger contents autosize
 160             ll = new OpenLayers.LonLat(5,20);
 161             popupClass = AutoSizeAnchored;
 162             popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize<br>' + samplePopupContentsHTML + '</div>'
 163             addMarker(ll, popupClass, popupContentHTML);
 164
 165             //anchored popup bigger contents autosize closebox
 166             ll = new OpenLayers.LonLat(10,20);
 167             popupClass = AutoSizeAnchored;
 168             popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize<br>closebox<br>' + samplePopupContentsHTML + '</div>'
 169             addMarker(ll, popupClass, popupContentHTML, true);
 170
 171             //anchored popup wide short text contents autosize
 172             ll = new OpenLayers.LonLat(20,20);
 173             popupClass = AutoSizeAnchored;
 174             popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize - wide short text<br>' + samplePopupContentsHTML_WideShort + '</div>'
 175             addMarker(ll, popupClass, popupContentHTML);
 176
 177             //anchored popup wide short text contents autosize closebox
 178             ll = new OpenLayers.LonLat(25,20);
 179             popupClass = AutoSizeAnchored;
 180             popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize - wide short text<br>closebox<br>' + samplePopupContentsHTML_WideShort + '</div>'
 181             addMarker(ll, popupClass, popupContentHTML, true);
 182
 183
 184             //anchored popup wide short fixed contents autosize
 185             ll = new OpenLayers.LonLat(35,20);
 186             popupClass = AutoSizeAnchored;
 187             popupContentHTML = '<img src="wideshort.jpg"></img>';
 188             addMarker(ll, popupClass, popupContentHTML);
 189
 190             //anchored popup wide short fixed contents autosize closebox
 191             ll = new OpenLayers.LonLat(40,20);
 192             popupClass = AutoSizeAnchored;
 193             popupContentHTML = '<img src="wideshort.jpg"></img>';
 194             addMarker(ll, popupClass, popupContentHTML, true);
 195
 196
 197             //anchored popup thin long fixed contents autosize
 198             ll = new OpenLayers.LonLat(50,20);
 199             popupClass = AutoSizeAnchored;
 200             popupContentHTML = '<img src="thinlong.jpg"></img>';
 201             addMarker(ll, popupClass, popupContentHTML);
 202
 203             //anchored popup thin long fixed contents autosize closebox
 204             ll = new OpenLayers.LonLat(55,20);
 205             popupClass = AutoSizeAnchored;
 206             popupContentHTML = '<img src="thinlong.jpg"></img>';
 207             addMarker(ll, popupClass, popupContentHTML, true);
 208
 209
 210             //anchored popup wide long fixed contents autosize
 211             ll = new OpenLayers.LonLat(65,20);
 212             popupClass = AutoSizeAnchored;
 213             popupContentHTML = '<img  src="widelong.jpg"></img>'
 214             addMarker(ll, popupClass, popupContentHTML);
 215
 216             //anchored popup wide long fixed contents autosize closebox
 217             ll = new OpenLayers.LonLat(70,20);
 218             popupClass = AutoSizeAnchored;
 219             popupContentHTML = '<img  src="widelong.jpg"></img>'
 220             addMarker(ll, popupClass, popupContentHTML, true);
 221
 222         //
 223         //Anchored WITH OVERFLOW
 224         //
 225
 226             //anchored popup small contents no autosize overflow
 227             var ll = new OpenLayers.LonLat(-55,15);
 228             popupClass = OpenLayers.Popup.Anchored;
 229             popupContentHTML = '<img src="small.jpg"></img>';
 230             addMarker(ll, popupClass, popupContentHTML, false, true);
 231
 232             //anchored popup small contents no autosize closebox overflow
 233             var ll = new OpenLayers.LonLat(-50,15);
 234             popupClass = OpenLayers.Popup.Anchored;
 235             popupContentHTML = '<img src="small.jpg"></img>';
 236             addMarker(ll, popupClass, popupContentHTML, true, true);
 237
 238
 239             //anchored popup small contents autosize overflow
 240             ll = new OpenLayers.LonLat(-40,15);
 241             popupClass = AutoSizeAnchored;
 242             popupContentHTML = '<img src="small.jpg"></img>';
 243             addMarker(ll, popupClass, popupContentHTML, false, true);
 244
 245             //anchored popup small contents autosize closebox overflow
 246             ll = new OpenLayers.LonLat(-35,15);
 247             popupClass = AutoSizeAnchored;
 248             popupContentHTML = '<img src="small.jpg"></img>';
 249             addMarker(ll, popupClass, popupContentHTML, true, true);
 250
 251
 252             //anchored popup small contents autosize minsize overflow
 253             ll = new OpenLayers.LonLat(-25,15);
 254             popupClass = AutoSizeAnchoredMinSize;
 255             popupContentHTML = '<img src="small.jpg"></img>';
 256             addMarker(ll, popupClass, popupContentHTML, false, true);
 257
 258             //anchored popup small contents autosize minsize closebox overflow
 259             ll = new OpenLayers.LonLat(-20,15);
 260             popupClass = AutoSizeAnchoredMinSize;
 261             popupContentHTML = '<img src="small.jpg"></img>';
 262             addMarker(ll, popupClass, popupContentHTML, true, true);
 263
 264
 265             //anchored popup small contents autosize maxsize overflow
 266             ll = new OpenLayers.LonLat(-10,15);
 267             popupClass = AutoSizeAnchoredMaxSize;
 268             popupContentHTML = '<img src="small.jpg"></img>';
 269             addMarker(ll, popupClass, popupContentHTML, false, true);
 270
 271             //anchored popup small contents autosize maxsize closebox overflow
 272             ll = new OpenLayers.LonLat(-5,15);
 273             popupClass = AutoSizeAnchoredMaxSize;
 274             popupContentHTML = '<img src="small.jpg"></img>';
 275             addMarker(ll, popupClass, popupContentHTML, true, true);
 276
 277
 278             //anchored popup bigger contents autosize overflow
 279             ll = new OpenLayers.LonLat(5,15);
 280             popupClass = AutoSizeAnchored;
 281             popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize<br>overflow<br>' + samplePopupContentsHTML + '</div>'
 282             addMarker(ll, popupClass, popupContentHTML, false, true);
 283
 284             //anchored popup bigger contents autosize closebox overflow
 285             ll = new OpenLayers.LonLat(10,15);
 286             popupClass = AutoSizeAnchored;
 287             popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize<br>overflow<br>closebox<br>' + samplePopupContentsHTML + '</div>'
 288             addMarker(ll, popupClass, popupContentHTML, true, true);
 289
 290
 291             //anchored popup wide short text contents autosize overflow
 292             ll = new OpenLayers.LonLat(20,15);
 293             popupClass = AutoSizeAnchored;
 294             popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize<br>overflow<br>' + samplePopupContentsHTML_WideShort + '</div>'
 295             addMarker(ll, popupClass, popupContentHTML, false, true);
 296
 297             //anchored popup wide short text contents autosize closebox overflow
 298             ll = new OpenLayers.LonLat(25,15);
 299             popupClass = AutoSizeAnchored;
 300             popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize<br>overflow<br>closebox<br>' + samplePopupContentsHTML_WideShort + '</div>'
 301             addMarker(ll, popupClass, popupContentHTML, true, true);
 302
 303             //anchored popup wide short fixed contents autosize overflow
 304             ll = new OpenLayers.LonLat(35,15);
 305             popupClass = AutoSizeAnchored;
 306             popupContentHTML = '<img src="wideshort.jpg"></img>'
 307             addMarker(ll, popupClass, popupContentHTML, false, true);
 308
 309             //anchored popup wide short fixed contents autosize closebox overflow
 310             ll = new OpenLayers.LonLat(40,15);
 311             popupClass = AutoSizeAnchored;
 312             popupContentHTML = '<img src="wideshort.jpg"></img>'
 313             addMarker(ll, popupClass, popupContentHTML, true, true);
 314
 315
 316             //anchored popup thin long fixed contents autosize overflow
 317             ll = new OpenLayers.LonLat(50,15);
 318             popupClass = AutoSizeAnchored;
 319             popupContentHTML = '<img src="thinlong.jpg"></img>'
 320             addMarker(ll, popupClass, popupContentHTML, false, true);
 321
 322             //anchored popup thin long fixed contents autosize closebox overflow
 323             ll = new OpenLayers.LonLat(55,15);
 324             popupClass = AutoSizeAnchored;
 325             popupContentHTML = '<img src="thinlong.jpg"></img>'
 326             addMarker(ll, popupClass, popupContentHTML, true, true);
 327
 328
 329             //anchored popup wide long fixed contents autosize overflow
 330             ll = new OpenLayers.LonLat(65,15);
 331             popupClass = AutoSizeAnchored;
 332             popupContentHTML = '<img src="widelong.jpg"></img>'
 333             addMarker(ll, popupClass, popupContentHTML, false, true);
 334
 335             //anchored popup wide long fixed contents autosize closebox overflow
 336             ll = new OpenLayers.LonLat(70,15);
 337             popupClass = AutoSizeAnchored;
 338             popupContentHTML = '<img src="widelong.jpg"></img>'
 339             addMarker(ll, popupClass, popupContentHTML, true, true);
 340
 341
 342         //
 343         //Bubble NO OVERFLOW
 344         //
 345
 346             //anchored bubble popup small contents no autosize
 347             var ll = new OpenLayers.LonLat(-55,5);
 348             popupClass = OpenLayers.Popup.AnchoredBubble;
 349             popupContentHTML = '<img src="small.jpg"></img>';
 350             addMarker(ll, popupClass, popupContentHTML, false);
 351
 352             //anchored bubble popup small contents no autosize closebox
 353             var ll = new OpenLayers.LonLat(-50,5);
 354             popupClass = OpenLayers.Popup.AnchoredBubble;
 355             popupContentHTML = '<img src="small.jpg"></img>';
 356             addMarker(ll, popupClass, popupContentHTML, true);
 357
 358
 359             //anchored bubble popup small contents autosize
 360             ll = new OpenLayers.LonLat(-40,5);
 361             popupClass = AutoSizeAnchoredBubble;
 362             popupContentHTML = '<img src="small.jpg"></img>';
 363             addMarker(ll, popupClass, popupContentHTML, false);
 364
 365             //anchored bubble popup small contents autosize closebox
 366             ll = new OpenLayers.LonLat(-35,5);
 367             popupClass = AutoSizeAnchoredBubble;
 368             popupContentHTML = '<img src="small.jpg"></img>';
 369             addMarker(ll, popupClass, popupContentHTML, true);
 370
 371
 372             //anchored bubble popup small contents autosize minsize
 373             ll = new OpenLayers.LonLat(-25,5);
 374             popupClass = AutoSizeAnchoredBubbleMinSize;
 375             popupContentHTML = '<img src="small.jpg"></img>';
 376             addMarker(ll, popupClass, popupContentHTML, false);
 377
 378             //anchored bubble popup small contents autosize minsize closebox
 379             ll = new OpenLayers.LonLat(-20,5);
 380             popupClass = AutoSizeAnchoredBubbleMinSize;
 381             popupContentHTML = '<img src="small.jpg"></img>';
 382             addMarker(ll, popupClass, popupContentHTML, true);
 383
 384
 385             //anchored bubble popup small contents autosize maxsize
 386             ll = new OpenLayers.LonLat(-10,5);
 387             popupClass = AutoSizeAnchoredBubbleMaxSize;
 388             popupContentHTML = '<img src="small.jpg"></img>';
 389             addMarker(ll, popupClass, popupContentHTML, false);
 390
 391             //anchored bubble popup small contents autosize maxsize closebox
 392             ll = new OpenLayers.LonLat(-5,5);
 393             popupClass = AutoSizeAnchoredBubbleMaxSize;
 394             popupContentHTML = '<img src="small.jpg"></img>';
 395             addMarker(ll, popupClass, popupContentHTML, true);
 396
 397
 398             //anchored bubble popup bigger contents autosize closebox
 399             ll = new OpenLayers.LonLat(5,5);
 400             popupClass = AutoSizeAnchoredBubble;
 401             popupContentHTML = '<div style="background-color:red;">Popup.AnchoredBubble<br>autosize<br>' + samplePopupContentsHTML + '</div>'
 402             addMarker(ll, popupClass, popupContentHTML, false);
 403
 404             //anchored bubble popup bigger contents autosize closebox
 405             ll = new OpenLayers.LonLat(10,5);
 406             popupClass = AutoSizeAnchoredBubble;
 407             popupContentHTML = '<div style="background-color:red;">Popup.AnchoredBubble<br>autosize<br>closebox<br>' + samplePopupContentsHTML + '</div>'
 408             addMarker(ll, popupClass, popupContentHTML, true);
 409
 410
 411             //anchored bubble popup wide short text contents autosize
 412             ll = new OpenLayers.LonLat(20,5);
 413             popupClass = AutoSizeAnchoredBubble;
 414             popupContentHTML = '<div style="background-color:red;">Popup.AnchoredBubble<br>autosize - wide short text<br>' + samplePopupContentsHTML_WideShort + '</div>'
 415             addMarker(ll, popupClass, popupContentHTML);
 416
 417             //anchored bubble popup wide short text contents autosize closebox
 418             ll = new OpenLayers.LonLat(25,5);
 419             popupClass = AutoSizeAnchoredBubble;
 420             popupContentHTML = '<div style="background-color:red;">Popup.AnchoredBubble<br>autosize - wide short text<br>closebox<br>' + samplePopupContentsHTML_WideShort + '</div>'
 421             addMarker(ll, popupClass, popupContentHTML, true);
 422
 423
 424             //anchored bubble popup wide short fixed contents autosize
 425             ll = new OpenLayers.LonLat(35,5);
 426             popupClass = AutoSizeAnchoredBubble;
 427             popupContentHTML = '<img src="wideshort.jpg"></img>'
 428             addMarker(ll, popupClass, popupContentHTML);
 429
 430             //anchored bubble popup wide short fixed contents autosize closebox
 431             ll = new OpenLayers.LonLat(40,5);
 432             popupClass = AutoSizeAnchoredBubble;
 433             popupContentHTML = '<img src="wideshort.jpg"></img>'
 434             addMarker(ll, popupClass, popupContentHTML, true);
 435
 436
 437             //anchored bubble popup thin long fixed contents autosize
 438             ll = new OpenLayers.LonLat(50,5);
 439             popupClass = AutoSizeAnchoredBubble;
 440             popupContentHTML = '<img src="thinlong.jpg"></img>'
 441             addMarker(ll, popupClass, popupContentHTML);
 442
 443             //anchored bubble popup thin long fixed contents autosize closebox
 444             ll = new OpenLayers.LonLat(55,5);
 445             popupClass = AutoSizeAnchoredBubble;
 446             popupContentHTML = '<img src="thinlong.jpg"></img>'
 447             addMarker(ll, popupClass, popupContentHTML, true);
 448
 449
 450             //anchored bubble popup wide long fixed contents autosize
 451             ll = new OpenLayers.LonLat(65,5);
 452             popupClass = AutoSizeAnchoredBubble;
 453             popupContentHTML = '<img src="widelong.jpg"></img>'
 454             addMarker(ll, popupClass, popupContentHTML);
 455
 456             //anchored bubble popup wide long fixed contents autosize closebox
 457             ll = new OpenLayers.LonLat(70,5);
 458             popupClass = AutoSizeAnchoredBubble;
 459             popupContentHTML = '<img src="widelong.jpg"></img>'
 460             addMarker(ll, popupClass, popupContentHTML, true);
 461
 462           //
 463           //Bubble OVERFLOW
 464           //
 465
 466               //anchored bubble popup small contents no autosize
 467             var ll = new OpenLayers.LonLat(-55,0);
 468             popupClass = OpenLayers.Popup.AnchoredBubble;
 469             popupContentHTML = '<img src="small.jpg"></img>';
 470             addMarker(ll, popupClass, popupContentHTML, false, true);
 471
 472               //anchored bubble popup small contents no autosize closebox
 473             var ll = new OpenLayers.LonLat(-50,0);
 474             popupClass = OpenLayers.Popup.AnchoredBubble;
 475             popupContentHTML = '<img src="small.jpg"></img>';
 476             addMarker(ll, popupClass, popupContentHTML, true, true);
 477
 478
 479             //anchored bubble popup small contents autosize
 480             ll = new OpenLayers.LonLat(-40,0);
 481             popupClass = AutoSizeAnchoredBubble;
 482             popupContentHTML = '<img src="small.jpg"></img>';
 483             addMarker(ll, popupClass, popupContentHTML, false, true);
 484
 485             //anchored bubble popup small contents autosize closebox
 486             ll = new OpenLayers.LonLat(-35,0);
 487             popupClass = AutoSizeAnchoredBubble;
 488             popupContentHTML = '<img src="small.jpg"></img>';
 489             addMarker(ll, popupClass, popupContentHTML, true, true);
 490
 491
 492             //anchored bubble popup small contents autosize minsize
 493             ll = new OpenLayers.LonLat(-25,0);
 494             popupClass = AutoSizeAnchoredBubbleMinSize;
 495             popupContentHTML = '<img src="small.jpg"></img>';
 496             addMarker(ll, popupClass, popupContentHTML, false, true);
 497
 498             //anchored bubble popup small contents autosize minsize closebox
 499             ll = new OpenLayers.LonLat(-20,0);
 500             popupClass = AutoSizeAnchoredBubbleMinSize;
 501             popupContentHTML = '<img src="small.jpg"></img>';
 502             addMarker(ll, popupClass, popupContentHTML, true, true);
 503
 504
 505             //anchored bubble popup small contents autosize maxsize
 506             ll = new OpenLayers.LonLat(-10,0);
 507             popupClass = AutoSizeAnchoredBubbleMaxSize;
 508             popupContentHTML = '<img src="small.jpg"></img>';
 509             addMarker(ll, popupClass, popupContentHTML, false, true);
 510
 511             //anchored bubble popup small contents autosize maxsize closebox
 512             ll = new OpenLayers.LonLat(-5,0);
 513             popupClass = AutoSizeAnchoredBubbleMaxSize;
 514             popupContentHTML = '<img src="small.jpg"></img>';
 515             addMarker(ll, popupClass, popupContentHTML, true, true);
 516
 517
 518             //anchored bubble popup bigger contents autosize closebox
 519             ll = new OpenLayers.LonLat(5,0);
 520             popupClass = AutoSizeAnchoredBubble;
 521             popupContentHTML = '<div style="background-color:red;">Popup.AnchoredBubble<br>autosize<br>overflow<br>' + samplePopupContentsHTML + '</div>'
 522             addMarker(ll, popupClass, popupContentHTML, false, true);
 523
 524             //anchored bubble popup bigger contents autosize closebox
 525             ll = new OpenLayers.LonLat(10,0);
 526             popupClass = AutoSizeAnchoredBubble;
 527             popupContentHTML = '<div style="background-color:red;">Popup.AnchoredBubble<br>autosize<br>closebox<br>overflow<br>' + samplePopupContentsHTML + '</div>'
 528             addMarker(ll, popupClass, popupContentHTML, true, true);
 529
 530
 531             //anchored bubble popup wide short contents autosize overflow
 532             ll = new OpenLayers.LonLat(20,0);
 533             popupClass = AutoSizeAnchoredBubble;
 534             popupContentHTML = '<div style="background-color:red;">Popup.AnchoredBubble<br>autosize<br>overflow<br>' + samplePopupContentsHTML_WideShort + '</div>'
 535             addMarker(ll, popupClass, popupContentHTML, false, true);
 536
 537             //anchored bubble popup wide short contents autosize closebox overflow
 538             ll = new OpenLayers.LonLat(25,0);
 539             popupClass = AutoSizeAnchoredBubble;
 540             popupContentHTML = '<div style="background-color:red;">Popup.AnchoredBubble<br>autosize<br>overflow<br>closebox<br>' + samplePopupContentsHTML_WideShort + '</div>'
 541             addMarker(ll, popupClass, popupContentHTML, true, true);
 542
 543
 544             //anchored bubble popup wide short fixed contents autosize overflow
 545             ll = new OpenLayers.LonLat(35,0);
 546             popupClass = AutoSizeAnchoredBubble;
 547             popupContentHTML = '<img src="wideshort.jpg"></img>'
 548             addMarker(ll, popupClass, popupContentHTML, false, true);
 549
 550             //anchored bubble popup wide short fixed contents autosize closebox overflow
 551             ll = new OpenLayers.LonLat(40,0);
 552             popupClass = AutoSizeAnchoredBubble;
 553             popupContentHTML = '<img src="wideshort.jpg"></img>'
 554             addMarker(ll, popupClass, popupContentHTML, true, true);
 555
 556
 557             //anchored bubble popup thin long fixed contents autosize overflow
 558             ll = new OpenLayers.LonLat(50,0);
 559             popupClass = AutoSizeAnchoredBubble;
 560             popupContentHTML = '<img src="thinlong.jpg"></img>'
 561             addMarker(ll, popupClass, popupContentHTML, false, true);
 562
 563             //anchored bubble popup thin long fixed contents autosize closebox overflow
 564             ll = new OpenLayers.LonLat(55,0);
 565             popupClass = AutoSizeAnchoredBubble;
 566             popupContentHTML = '<img src="thinlong.jpg"></img>'
 567             addMarker(ll, popupClass, popupContentHTML, true, true);
 568
 569
 570             //anchored bubble popup wide long fixed contents autosize overflow
 571             ll = new OpenLayers.LonLat(65,0);
 572             popupClass = AutoSizeAnchoredBubble;
 573             popupContentHTML = '<img src="widelong.jpg"></img>'
 574             addMarker(ll, popupClass, popupContentHTML, false, true);
 575
 576             //anchored bubble popup wide long fixed contents autosize closebox overflow
 577             ll = new OpenLayers.LonLat(70,0);
 578             popupClass = AutoSizeAnchoredBubble;
 579             popupContentHTML = '<img src="widelong.jpg"></img>'
 580             addMarker(ll, popupClass, popupContentHTML, true, true);
 581
 582    //FRAMED
 583
 584           //
 585           //FRAMED NO OVERFLOW
 586           //
 587
 588               //anchored bubble popup small contents no autosize
 589             var ll = new OpenLayers.LonLat(-55,-15);
 590             popupClass = OpenLayers.Popup.FramedCloud;
 591             popupContentHTML = '<img src="small.jpg"></img>';
 592             addMarker(ll, popupClass, popupContentHTML, false);
 593
 594               //anchored bubble popup small contents no autosize closebox
 595             var ll = new OpenLayers.LonLat(-50,-15);
 596             popupClass = OpenLayers.Popup.FramedCloud;
 597             popupContentHTML = '<img src="small.jpg"></img>';
 598             addMarker(ll, popupClass, popupContentHTML, true);
 599
 600
 601             //anchored bubble popup small contents autosize
 602             ll = new OpenLayers.LonLat(-40,-15);
 603             popupClass = AutoSizeFramedCloud;
 604             popupContentHTML = '<img src="small.jpg"></img>';
 605             addMarker(ll, popupClass, popupContentHTML, false);
 606
 607             //anchored bubble popup small contents autosize closebox
 608             ll = new OpenLayers.LonLat(-35,-15);
 609             popupClass = AutoSizeFramedCloud;
 610             popupContentHTML = '<img src="small.jpg"></img>';
 611             addMarker(ll, popupClass, popupContentHTML, true);
 612
 613
 614             //anchored bubble popup small contents autosize minsize
 615             ll = new OpenLayers.LonLat(-25,-15);
 616             popupClass = AutoSizeFramedCloudMinSize;
 617             popupContentHTML = '<img src="small.jpg"></img>';
 618             addMarker(ll, popupClass, popupContentHTML, false);
 619
 620             //anchored bubble popup small contents autosize minsize closebox
 621             ll = new OpenLayers.LonLat(-20,-15);
 622             popupClass = AutoSizeFramedCloudMinSize;
 623             popupContentHTML = '<img src="small.jpg"></img>';
 624             addMarker(ll, popupClass, popupContentHTML, true);
 625
 626
 627             //anchored bubble popup small contents autosize maxsize
 628             ll = new OpenLayers.LonLat(-10,-15);
 629             popupClass = AutoSizeFramedCloudMaxSize;
 630             popupContentHTML = '<img src="small.jpg"></img>';
 631             addMarker(ll, popupClass, popupContentHTML, false);
 632
 633             //anchored bubble popup small contents autosize maxsize closebox
 634             ll = new OpenLayers.LonLat(-5,-15);
 635             popupClass = AutoSizeFramedCloudMaxSize;
 636             popupContentHTML = '<img src="small.jpg"></img>';
 637             addMarker(ll, popupClass, popupContentHTML, true);
 638
 639
 640             //anchored bubble popup bigger contents autosize closebox
 641             ll = new OpenLayers.LonLat(5,-15);
 642             popupClass = AutoSizeFramedCloud;
 643             popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize<br>' + samplePopupContentsHTML + '</div>'
 644             addMarker(ll, popupClass, popupContentHTML, false);
 645
 646             //anchored bubble popup bigger contents autosize closebox
 647             ll = new OpenLayers.LonLat(10,-15);
 648             popupClass = AutoSizeFramedCloud;
 649             popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize<br>closebox<br>' + samplePopupContentsHTML + '</div>'
 650             addMarker(ll, popupClass, popupContentHTML, true);
 651
 652
 653             //anchored bubble popup wide short text contents autosize
 654             ll = new OpenLayers.LonLat(20,-15);
 655             popupClass = AutoSizeFramedCloud;
 656             popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize - wide short text<br>' + samplePopupContentsHTML_WideShort + '</div>'
 657             addMarker(ll, popupClass, popupContentHTML);
 658
 659             //anchored bubble popup wide short text contents autosize closebox
 660             ll = new OpenLayers.LonLat(25,-15);
 661             popupClass = AutoSizeFramedCloud;
 662             popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize - wide short text<br>closebox<br>' + samplePopupContentsHTML_WideShort + '</div>'
 663             addMarker(ll, popupClass, popupContentHTML, true);
 664
 665
 666             //anchored bubble popup wide short fixed contents autosize
 667             ll = new OpenLayers.LonLat(35,-15);
 668             popupClass = AutoSizeFramedCloud;
 669             popupContentHTML = '<img src="wideshort.jpg"></img>'
 670             addMarker(ll, popupClass, popupContentHTML);
 671
 672             //anchored bubble popup wide short fixed contents autosize closebox
 673             ll = new OpenLayers.LonLat(40,-15);
 674             popupClass = AutoSizeFramedCloud;
 675             popupContentHTML = '<img src="wideshort.jpg"></img>'
 676             addMarker(ll, popupClass, popupContentHTML, true);
 677
 678
 679             //anchored bubble popup thin long fixed contents autosize
 680             ll = new OpenLayers.LonLat(50,-15);
 681             popupClass = AutoSizeFramedCloud;
 682             popupContentHTML = '<img src="thinlong.jpg"></img>'
 683             addMarker(ll, popupClass, popupContentHTML);
 684
 685             //anchored bubble popup thin long fixed contents autosize closebox
 686             ll = new OpenLayers.LonLat(55,-15);
 687             popupClass = AutoSizeFramedCloud;
 688             popupContentHTML = '<img src="thinlong.jpg"></img>'
 689             addMarker(ll, popupClass, popupContentHTML, true);
 690
 691
 692             //anchored bubble popup wide long fixed contents autosize
 693             ll = new OpenLayers.LonLat(65,-15);
 694             popupClass = AutoSizeFramedCloud;
 695             popupContentHTML = '<img src="widelong.jpg"></img>'
 696             addMarker(ll, popupClass, popupContentHTML);
 697
 698             //anchored bubble popup wide long fixed contents autosize closebox
 699             ll = new OpenLayers.LonLat(70,-15);
 700             popupClass = AutoSizeFramedCloud;
 701             popupContentHTML = '<img src="widelong.jpg"></img>'
 702             addMarker(ll, popupClass, popupContentHTML, true);
 703
 704           //
 705           //FRAMED OVERFLOW
 706           //
 707
 708               //anchored bubble popup small contents no autosize
 709             var ll = new OpenLayers.LonLat(-55,-20);
 710             popupClass = OpenLayers.Popup.FramedCloud;
 711             popupContentHTML = '<img src="small.jpg"></img>';
 712             addMarker(ll, popupClass, popupContentHTML, false, true);
 713
 714               //anchored bubble popup small contents no autosize closebox
 715             var ll = new OpenLayers.LonLat(-50,-20);
 716             popupClass = OpenLayers.Popup.FramedCloud;
 717             popupContentHTML = '<img src="small.jpg"></img>';
 718             addMarker(ll, popupClass, popupContentHTML, true, true);
 719
 720
 721             //anchored bubble popup small contents autosize
 722             ll = new OpenLayers.LonLat(-40,-20);
 723             popupClass = AutoSizeFramedCloud;
 724             popupContentHTML = '<img src="small.jpg"></img>';
 725             addMarker(ll, popupClass, popupContentHTML, false, true);
 726
 727             //anchored bubble popup small contents autosize closebox
 728             ll = new OpenLayers.LonLat(-35,-20);
 729             popupClass = AutoSizeFramedCloud;
 730             popupContentHTML = '<img src="small.jpg"></img>';
 731             addMarker(ll, popupClass, popupContentHTML, true, true);
 732
 733
 734             //anchored bubble popup small contents autosize minsize
 735             ll = new OpenLayers.LonLat(-25,-20);
 736             popupClass = AutoSizeFramedCloudMinSize;
 737             popupContentHTML = '<img src="small.jpg"></img>';
 738             addMarker(ll, popupClass, popupContentHTML, false, true);
 739
 740             //anchored bubble popup small contents autosize minsize closebox
 741             ll = new OpenLayers.LonLat(-20,-20);
 742             popupClass = AutoSizeFramedCloudMinSize;
 743             popupContentHTML = '<img src="small.jpg"></img>';
 744             addMarker(ll, popupClass, popupContentHTML, true, true);
 745
 746
 747             //anchored bubble popup small contents autosize maxsize
 748             ll = new OpenLayers.LonLat(-10,-20);
 749             popupClass = AutoSizeFramedCloudMaxSize;
 750             popupContentHTML = '<img src="small.jpg"></img>';
 751             addMarker(ll, popupClass, popupContentHTML, false, true);
 752
 753             //anchored bubble popup small contents autosize maxsize closebox
 754             ll = new OpenLayers.LonLat(-5,-20);
 755             popupClass = AutoSizeFramedCloudMaxSize;
 756             popupContentHTML = '<img src="small.jpg"></img>';
 757             addMarker(ll, popupClass, popupContentHTML, true, true);
 758
 759
 760             //anchored bubble popup bigger contents autosize closebox
 761             ll = new OpenLayers.LonLat(5,-20);
 762             popupClass = AutoSizeFramedCloud;
 763             popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize<br>overflow<br>' + samplePopupContentsHTML + '</div>'
 764             addMarker(ll, popupClass, popupContentHTML, false, true);
 765
 766             //anchored bubble popup bigger contents autosize closebox
 767             ll = new OpenLayers.LonLat(10,-20);
 768             popupClass = AutoSizeFramedCloud;
 769             popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize<br>closebox<br>overflow<br>' + samplePopupContentsHTML + '</div>'
 770             addMarker(ll, popupClass, popupContentHTML, true, true);
 771
 772
 773             //anchored bubble popup wide short contents autosize overflow
 774             ll = new OpenLayers.LonLat(20,-20);
 775             popupClass = AutoSizeFramedCloud;
 776             popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize<br>overflow<br>' + samplePopupContentsHTML_WideShort + '</div>'
 777             addMarker(ll, popupClass, popupContentHTML, false, true);
 778
 779             //anchored bubble popup wide short contents autosize closebox overflow
 780             ll = new OpenLayers.LonLat(25,-20);
 781             popupClass = AutoSizeFramedCloud;
 782             popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize<br>overflow<br>closebox<br>' + samplePopupContentsHTML_WideShort + '</div>'
 783             addMarker(ll, popupClass, popupContentHTML, true, true);
 784
 785
 786             //anchored bubble popup wide short fixed contents autosize overflow
 787             ll = new OpenLayers.LonLat(35,-20);
 788             popupClass = AutoSizeFramedCloud;
 789             popupContentHTML = '<img src="wideshort.jpg"></img>'
 790             addMarker(ll, popupClass, popupContentHTML, false, true);
 791
 792             //anchored bubble popup wide short fixed contents autosize closebox overflow
 793             ll = new OpenLayers.LonLat(40,-20);
 794             popupClass = AutoSizeFramedCloud;
 795             popupContentHTML = '<img src="wideshort.jpg"></img>'
 796             addMarker(ll, popupClass, popupContentHTML, true, true);
 797
 798
 799             //anchored bubble popup thin long fixed contents autosize overflow
 800             ll = new OpenLayers.LonLat(50,-20);
 801             popupClass = AutoSizeFramedCloud;
 802             popupContentHTML = '<img src="thinlong.jpg"></img>'
 803             addMarker(ll, popupClass, popupContentHTML, false, true);
 804
 805             //anchored bubble popup thin long fixed contents autosize closebox overflow
 806             ll = new OpenLayers.LonLat(55,-20);
 807             popupClass = AutoSizeFramedCloud;
 808             popupContentHTML = '<img src="thinlong.jpg"></img>'
 809             addMarker(ll, popupClass, popupContentHTML, true, true);
 810
 811
 812             //anchored bubble popup wide long fixed contents autosize overflow
 813             ll = new OpenLayers.LonLat(65,-20);
 814             popupClass = AutoSizeFramedCloud;
 815             popupContentHTML = '<img src="widelong.jpg"></img>'
 816             addMarker(ll, popupClass, popupContentHTML, false, true);
 817
 818             //anchored bubble popup wide long fixed contents autosize closebox overflow
 819             ll = new OpenLayers.LonLat(70,-20);
 820             popupClass = AutoSizeFramedCloud;
 821             popupContentHTML = '<img src="widelong.jpg"></img>'
 822             addMarker(ll, popupClass, popupContentHTML, true, true);
 823
 824
 825         }
 826
 827         /**
 828          * Function: addMarker
 829          * Add a new marker to the markers layer given the following lonlat,
 830          *     popupClass, and popup contents HTML. Also allow specifying
 831          *     whether or not to give the popup a close box.
 832          *
 833          * Parameters:
 834          * ll - {<OpenLayers.LonLat>} Where to place the marker
 835          * popupClass - {<OpenLayers.Class>} Which class of popup to bring up
 836          *     when the marker is clicked.
 837          * popupContentHTML - {String} What to put in the popup
 838          * closeBox - {Boolean} Should popup have a close box?
 839          * overflow - {Boolean} Let the popup overflow scrollbars?
 840          */
 841         function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow) {
 842
 843             var feature = new OpenLayers.Feature(markers, ll);
 844             feature.closeBox = closeBox;
 845             feature.popupClass = popupClass;
 846             feature.data.popupContentHTML = popupContentHTML;
 847             feature.data.overflow = (overflow) ? "auto" : "hidden";
 848
 849             var marker = feature.createMarker();
 850
 851             var markerClick = function (evt) {
 852                 if (this.popup == null) {
 853                     this.popup = this.createPopup(this.closeBox);
 854                     map.addPopup(this.popup);
 855                     this.popup.show();
 856                 } else {
 857                     this.popup.toggle();
 858                 }
 859                 currentPopup = this.popup;
 860                 OpenLayers.Event.stop(evt);
 861             };
 862             marker.events.register("mousedown", feature, markerClick);
 863
 864             markers.addMarker(marker);
 865         }
 866
 867     </script>
 868   </head>
 869   <body onload="init()">
 870   <h1 id="title">Popup Matrix</h1>
 871
 872   <div id="tags">
 873   </div>
 874       <p id="shortdesc">
 875           All kinds of different popup configurations.
 876       </p>
 877
 878       <div id="map" class="smallmap"></div>
 879
 880         <!-- preloading these images so the autosize will work correctly -->
 881         <img src="wideshort.jpg" style="position:absolute; top:-5000px; left: -5000px"></img>
 882         <img src="widelong.jpg" style="position:absolute; top:-5000px; left: -5000px"></img>
 883         <img src="thinlong.jpg" style="position:absolute; top:-5000px; left: -5000px"></img>
 884
 885        <p> All of the images in this file a pre-cached, meaning they are
 886            loaded immediately when you load the page (they are just placed
 887            far offscreen, that's why you don't see them).
 888        </p>
 889        <br>
 890        <p> The only image that is *not* preloaded is small.jpg, the brazilian
 891            flag. We do this in order to test out to make sure that our auto-sizing
 892              code does in fact activate itself as the images load. To verify
 893              this, clear your cache and reload this example page. Click on
 894              any of the markers in the 'AutoSize' row. If the popup autosizes
 895              to correctly contain the entire flag: golden. If the popup is
 896              tiny and you can only see a corner of it, then this code is broken.
 897         </p>
 898
 899       <br/>
 900
 901
 902    </div>
 903   </body>
 904 </html>