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 <link rel="stylesheet" href="style.css" type="text/css" />
6 <style type="text/css">
10 border: 1px solid black;
11 background-color: blue;
15 <script src="../lib/Firebug/firebug.js"></script>
16 <script src="../lib/OpenLayers.js"></script>
17 <script type="text/javascript">
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.";
26 // different popup types
29 AutoSizeAnchored = OpenLayers.Class(OpenLayers.Popup.Anchored, {
33 AutoSizeAnchoredMinSize = OpenLayers.Class(OpenLayers.Popup.Anchored, {
35 'minSize': new OpenLayers.Size(400,400)
38 AutoSizeAnchoredMaxSize = OpenLayers.Class(OpenLayers.Popup.Anchored, {
40 'maxSize': new OpenLayers.Size(100,100)
45 AutoSizeAnchoredBubble = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, {
49 AutoSizeAnchoredBubbleMinSize = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, {
51 'minSize': new OpenLayers.Size(400,400)
54 AutoSizeAnchoredBubbleMaxSize = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, {
56 'maxSize': new OpenLayers.Size(100,100)
61 //disable the autosize for the purpose of our matrix
62 OpenLayers.Popup.FramedCloud.prototype.autoSize = false;
64 AutoSizeFramedCloud = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
68 AutoSizeFramedCloudMinSize = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
70 'minSize': new OpenLayers.Size(400,400)
73 AutoSizeFramedCloudMaxSize = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
75 'maxSize': new OpenLayers.Size(100,100)
80 map = new OpenLayers.Map('map');
82 layer = new OpenLayers.Layer.Image(
85 new OpenLayers.Bounds(-82.5,-71.5,97.5,67.5),
86 new OpenLayers.Size(1024,768)
90 markers = new OpenLayers.Layer.Markers("zibo");
91 map.addLayer(markers);
93 map.addControl(new OpenLayers.Control.LayerSwitcher());
94 map.zoomToMaxExtent();
99 function addMarkers() {
101 var ll, popupClass, popupContentHTML;
104 //Anchored NO OVERFLOW
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
223 //Anchored WITH OVERFLOW
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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);
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.
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?
841 function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow) {
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";
849 var marker = feature.createMarker();
851 var markerClick = function (evt) {
852 if (this.popup == null) {
853 this.popup = this.createPopup(this.closeBox);
854 map.addPopup(this.popup);
859 currentPopup = this.popup;
860 OpenLayers.Event.stop(evt);
862 marker.events.register("mousedown", feature, markerClick);
864 markers.addMarker(marker);
869 <body onload="init()">
870 <h1 id="title">Popup Matrix</h1>
875 All kinds of different popup configurations.
878 <div id="map" class="smallmap"></div>
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>
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).
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.