]> dev.renevier.net Git - syp.git/blob - openlayers/examples/popupMatrix.html
err_lonlat_invalid exceptions not thrown correctly
[syp.git] / 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>