910 lines
43 KiB
HTML
910 lines
43 KiB
HTML
<!DOCTYPE html>
|
|
<html debug="true">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<title>OpenLayers: Popup Mayhem</title>
|
|
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
|
<link rel="stylesheet" href="style.css" type="text/css">
|
|
<style type="text/css">
|
|
#map {
|
|
width: 900px;
|
|
height: 500px;
|
|
border: 1px solid black;
|
|
background-color: blue;
|
|
}
|
|
</style>
|
|
|
|
<script src="../lib/Firebug/firebug.js"></script>
|
|
<script src="../lib/OpenLayers.js"></script>
|
|
<script type="text/javascript">
|
|
var map;
|
|
var layer, markers;
|
|
|
|
var currentPopup;
|
|
|
|
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>";
|
|
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.";
|
|
|
|
// different popup types
|
|
|
|
//anchored
|
|
AutoSizeAnchored = OpenLayers.Class(OpenLayers.Popup.Anchored, {
|
|
'autoSize': true
|
|
});
|
|
|
|
AutoSizeAnchoredMinSize = OpenLayers.Class(OpenLayers.Popup.Anchored, {
|
|
'autoSize': true,
|
|
'minSize': new OpenLayers.Size(400,400)
|
|
});
|
|
|
|
AutoSizeAnchoredMaxSize = OpenLayers.Class(OpenLayers.Popup.Anchored, {
|
|
'autoSize': true,
|
|
'maxSize': new OpenLayers.Size(100,100)
|
|
});
|
|
|
|
//anchoredbubble
|
|
|
|
AutoSizeAnchoredBubble = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, {
|
|
'autoSize': true
|
|
});
|
|
|
|
AutoSizeAnchoredBubbleMinSize = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, {
|
|
'autoSize': true,
|
|
'minSize': new OpenLayers.Size(400,400)
|
|
});
|
|
|
|
AutoSizeAnchoredBubbleMaxSize = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, {
|
|
'autoSize': true,
|
|
'maxSize': new OpenLayers.Size(100,100)
|
|
});
|
|
|
|
//framed
|
|
|
|
//disable the autosize for the purpose of our matrix
|
|
OpenLayers.Popup.FramedCloud.prototype.autoSize = false;
|
|
|
|
AutoSizeFramedCloud = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
|
|
'autoSize': true
|
|
});
|
|
|
|
AutoSizeFramedCloudMinSize = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
|
|
'autoSize': true,
|
|
'minSize': new OpenLayers.Size(400,400)
|
|
});
|
|
|
|
AutoSizeFramedCloudMaxSize = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
|
|
'autoSize': true,
|
|
'maxSize': new OpenLayers.Size(100,100)
|
|
});
|
|
|
|
|
|
function init(){
|
|
map = new OpenLayers.Map('map');
|
|
|
|
layer = new OpenLayers.Layer.Image(
|
|
"popupMatrix",
|
|
"img/popupMatrix.jpg",
|
|
new OpenLayers.Bounds(-82.5,-71.5,97.5,67.5),
|
|
new OpenLayers.Size(1024,768)
|
|
);
|
|
map.addLayer(layer);
|
|
|
|
markers = new OpenLayers.Layer.Markers("zibo");
|
|
map.addLayer(markers);
|
|
|
|
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
|
map.zoomToMaxExtent();
|
|
|
|
addMarkers();
|
|
}
|
|
|
|
function addMarkers() {
|
|
|
|
var ll, popupClass, popupContentHTML;
|
|
|
|
//
|
|
//Anchored NO OVERFLOW
|
|
//
|
|
|
|
//anchored popup small contents no autosize
|
|
ll = new OpenLayers.LonLat(-55,20);
|
|
popupClass = OpenLayers.Popup.Anchored;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML);
|
|
|
|
//anchored popup small contents no autosize closebox
|
|
var ll = new OpenLayers.LonLat(-50,20);
|
|
popupClass = OpenLayers.Popup.Anchored;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
|
|
//anchored popup small contents autosize
|
|
ll = new OpenLayers.LonLat(-40,20);
|
|
popupClass = AutoSizeAnchored;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML);
|
|
|
|
//anchored popup small contents autosize closebox
|
|
ll = new OpenLayers.LonLat(-35,20);
|
|
popupClass = AutoSizeAnchored;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
|
|
//anchored popup small contents autosize minsize
|
|
ll = new OpenLayers.LonLat(-25,20);
|
|
popupClass = AutoSizeAnchoredMinSize;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML);
|
|
|
|
//anchored popup small contents autosize minsize closebox
|
|
ll = new OpenLayers.LonLat(-20,20);
|
|
popupClass = AutoSizeAnchoredMinSize;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
|
|
//anchored popup small contents autosize maxsize
|
|
ll = new OpenLayers.LonLat(-10,20);
|
|
popupClass = AutoSizeAnchoredMaxSize;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML);
|
|
|
|
//anchored popup small contents autosize maxsize closebox
|
|
ll = new OpenLayers.LonLat(-5,20);
|
|
popupClass = AutoSizeAnchoredMaxSize;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
|
|
//anchored popup bigger contents autosize
|
|
ll = new OpenLayers.LonLat(5,20);
|
|
popupClass = AutoSizeAnchored;
|
|
popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize<br>' + samplePopupContentsHTML + '</div>';
|
|
addMarker(ll, popupClass, popupContentHTML);
|
|
|
|
//anchored popup bigger contents autosize closebox
|
|
ll = new OpenLayers.LonLat(10,20);
|
|
popupClass = AutoSizeAnchored;
|
|
popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize<br>closebox<br>' + samplePopupContentsHTML + '</div>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
//anchored popup wide short text contents autosize
|
|
ll = new OpenLayers.LonLat(20,20);
|
|
popupClass = AutoSizeAnchored;
|
|
popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize - wide short text<br>' + samplePopupContentsHTML_WideShort + '</div>';
|
|
addMarker(ll, popupClass, popupContentHTML);
|
|
|
|
//anchored popup wide short text contents autosize closebox
|
|
ll = new OpenLayers.LonLat(25,20);
|
|
popupClass = AutoSizeAnchored;
|
|
popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize - wide short text<br>closebox<br>' + samplePopupContentsHTML_WideShort + '</div>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
|
|
//anchored popup wide short fixed contents autosize
|
|
ll = new OpenLayers.LonLat(35,20);
|
|
popupClass = AutoSizeAnchored;
|
|
popupContentHTML = '<img src="img/wideshort.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML);
|
|
|
|
//anchored popup wide short fixed contents autosize closebox
|
|
ll = new OpenLayers.LonLat(40,20);
|
|
popupClass = AutoSizeAnchored;
|
|
popupContentHTML = '<img src="img/wideshort.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
|
|
//anchored popup thin long fixed contents autosize
|
|
ll = new OpenLayers.LonLat(50,20);
|
|
popupClass = AutoSizeAnchored;
|
|
popupContentHTML = '<img src="img/thinlong.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML);
|
|
|
|
//anchored popup thin long fixed contents autosize closebox
|
|
ll = new OpenLayers.LonLat(55,20);
|
|
popupClass = AutoSizeAnchored;
|
|
popupContentHTML = '<img src="img/thinlong.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
|
|
//anchored popup wide long fixed contents autosize
|
|
ll = new OpenLayers.LonLat(65,20);
|
|
popupClass = AutoSizeAnchored;
|
|
popupContentHTML = '<img src="img/widelong.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML);
|
|
|
|
//anchored popup wide long fixed contents autosize closebox
|
|
ll = new OpenLayers.LonLat(70,20);
|
|
popupClass = AutoSizeAnchored;
|
|
popupContentHTML = '<img src="img/widelong.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
//
|
|
//Anchored WITH OVERFLOW
|
|
//
|
|
|
|
//anchored popup small contents no autosize overflow
|
|
var ll = new OpenLayers.LonLat(-55,15);
|
|
popupClass = OpenLayers.Popup.Anchored;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored popup small contents no autosize closebox overflow
|
|
var ll = new OpenLayers.LonLat(-50,15);
|
|
popupClass = OpenLayers.Popup.Anchored;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
|
|
//anchored popup small contents autosize overflow
|
|
ll = new OpenLayers.LonLat(-40,15);
|
|
popupClass = AutoSizeAnchored;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored popup small contents autosize closebox overflow
|
|
ll = new OpenLayers.LonLat(-35,15);
|
|
popupClass = AutoSizeAnchored;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
|
|
//anchored popup small contents autosize minsize overflow
|
|
ll = new OpenLayers.LonLat(-25,15);
|
|
popupClass = AutoSizeAnchoredMinSize;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored popup small contents autosize minsize closebox overflow
|
|
ll = new OpenLayers.LonLat(-20,15);
|
|
popupClass = AutoSizeAnchoredMinSize;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
|
|
//anchored popup small contents autosize maxsize overflow
|
|
ll = new OpenLayers.LonLat(-10,15);
|
|
popupClass = AutoSizeAnchoredMaxSize;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored popup small contents autosize maxsize closebox overflow
|
|
ll = new OpenLayers.LonLat(-5,15);
|
|
popupClass = AutoSizeAnchoredMaxSize;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
|
|
//anchored popup bigger contents autosize overflow
|
|
ll = new OpenLayers.LonLat(5,15);
|
|
popupClass = AutoSizeAnchored;
|
|
popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize<br>overflow<br>' + samplePopupContentsHTML + '</div>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored popup bigger contents autosize closebox overflow
|
|
ll = new OpenLayers.LonLat(10,15);
|
|
popupClass = AutoSizeAnchored;
|
|
popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize<br>overflow<br>closebox<br>' + samplePopupContentsHTML + '</div>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
|
|
//anchored popup wide short text contents autosize overflow
|
|
ll = new OpenLayers.LonLat(20,15);
|
|
popupClass = AutoSizeAnchored;
|
|
popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize<br>overflow<br>' + samplePopupContentsHTML_WideShort + '</div>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored popup wide short text contents autosize closebox overflow
|
|
ll = new OpenLayers.LonLat(25,15);
|
|
popupClass = AutoSizeAnchored;
|
|
popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize<br>overflow<br>closebox<br>' + samplePopupContentsHTML_WideShort + '</div>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
//anchored popup wide short fixed contents autosize overflow
|
|
ll = new OpenLayers.LonLat(35,15);
|
|
popupClass = AutoSizeAnchored;
|
|
popupContentHTML = '<img src="img/wideshort.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored popup wide short fixed contents autosize closebox overflow
|
|
ll = new OpenLayers.LonLat(40,15);
|
|
popupClass = AutoSizeAnchored;
|
|
popupContentHTML = '<img src="img/wideshort.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
|
|
//anchored popup thin long fixed contents autosize overflow
|
|
ll = new OpenLayers.LonLat(50,15);
|
|
popupClass = AutoSizeAnchored;
|
|
popupContentHTML = '<img src="img/thinlong.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored popup thin long fixed contents autosize closebox overflow
|
|
ll = new OpenLayers.LonLat(55,15);
|
|
popupClass = AutoSizeAnchored;
|
|
popupContentHTML = '<img src="img/thinlong.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
|
|
//anchored popup wide long fixed contents autosize overflow
|
|
ll = new OpenLayers.LonLat(65,15);
|
|
popupClass = AutoSizeAnchored;
|
|
popupContentHTML = '<img src="img/widelong.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored popup wide long fixed contents autosize closebox overflow
|
|
ll = new OpenLayers.LonLat(70,15);
|
|
popupClass = AutoSizeAnchored;
|
|
popupContentHTML = '<img src="img/widelong.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
|
|
//
|
|
//Bubble NO OVERFLOW
|
|
//
|
|
|
|
//anchored bubble popup small contents no autosize
|
|
var ll = new OpenLayers.LonLat(-55,5);
|
|
popupClass = OpenLayers.Popup.AnchoredBubble;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false);
|
|
|
|
//anchored bubble popup small contents no autosize closebox
|
|
var ll = new OpenLayers.LonLat(-50,5);
|
|
popupClass = OpenLayers.Popup.AnchoredBubble;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
|
|
//anchored bubble popup small contents autosize
|
|
ll = new OpenLayers.LonLat(-40,5);
|
|
popupClass = AutoSizeAnchoredBubble;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false);
|
|
|
|
//anchored bubble popup small contents autosize closebox
|
|
ll = new OpenLayers.LonLat(-35,5);
|
|
popupClass = AutoSizeAnchoredBubble;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
|
|
//anchored bubble popup small contents autosize minsize
|
|
ll = new OpenLayers.LonLat(-25,5);
|
|
popupClass = AutoSizeAnchoredBubbleMinSize;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false);
|
|
|
|
//anchored bubble popup small contents autosize minsize closebox
|
|
ll = new OpenLayers.LonLat(-20,5);
|
|
popupClass = AutoSizeAnchoredBubbleMinSize;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
|
|
//anchored bubble popup small contents autosize maxsize
|
|
ll = new OpenLayers.LonLat(-10,5);
|
|
popupClass = AutoSizeAnchoredBubbleMaxSize;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false);
|
|
|
|
//anchored bubble popup small contents autosize maxsize closebox
|
|
ll = new OpenLayers.LonLat(-5,5);
|
|
popupClass = AutoSizeAnchoredBubbleMaxSize;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
|
|
//anchored bubble popup bigger contents autosize closebox
|
|
ll = new OpenLayers.LonLat(5,5);
|
|
popupClass = AutoSizeAnchoredBubble;
|
|
popupContentHTML = '<div style="background-color:red;">Popup.AnchoredBubble<br>autosize<br>' + samplePopupContentsHTML + '</div>';
|
|
addMarker(ll, popupClass, popupContentHTML, false);
|
|
|
|
//anchored bubble popup bigger contents autosize closebox
|
|
ll = new OpenLayers.LonLat(10,5);
|
|
popupClass = AutoSizeAnchoredBubble;
|
|
popupContentHTML = '<div style="background-color:red;">Popup.AnchoredBubble<br>autosize<br>closebox<br>' + samplePopupContentsHTML + '</div>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
|
|
//anchored bubble popup wide short text contents autosize
|
|
ll = new OpenLayers.LonLat(20,5);
|
|
popupClass = AutoSizeAnchoredBubble;
|
|
popupContentHTML = '<div style="background-color:red;">Popup.AnchoredBubble<br>autosize - wide short text<br>' + samplePopupContentsHTML_WideShort + '</div>';
|
|
addMarker(ll, popupClass, popupContentHTML);
|
|
|
|
//anchored bubble popup wide short text contents autosize closebox
|
|
ll = new OpenLayers.LonLat(25,5);
|
|
popupClass = AutoSizeAnchoredBubble;
|
|
popupContentHTML = '<div style="background-color:red;">Popup.AnchoredBubble<br>autosize - wide short text<br>closebox<br>' + samplePopupContentsHTML_WideShort + '</div>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
|
|
//anchored bubble popup wide short fixed contents autosize
|
|
ll = new OpenLayers.LonLat(35,5);
|
|
popupClass = AutoSizeAnchoredBubble;
|
|
popupContentHTML = '<img src="img/wideshort.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML);
|
|
|
|
//anchored bubble popup wide short fixed contents autosize closebox
|
|
ll = new OpenLayers.LonLat(40,5);
|
|
popupClass = AutoSizeAnchoredBubble;
|
|
popupContentHTML = '<img src="img/wideshort.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
|
|
//anchored bubble popup thin long fixed contents autosize
|
|
ll = new OpenLayers.LonLat(50,5);
|
|
popupClass = AutoSizeAnchoredBubble;
|
|
popupContentHTML = '<img src="img/thinlong.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML);
|
|
|
|
//anchored bubble popup thin long fixed contents autosize closebox
|
|
ll = new OpenLayers.LonLat(55,5);
|
|
popupClass = AutoSizeAnchoredBubble;
|
|
popupContentHTML = '<img src="img/thinlong.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
|
|
//anchored bubble popup wide long fixed contents autosize
|
|
ll = new OpenLayers.LonLat(65,5);
|
|
popupClass = AutoSizeAnchoredBubble;
|
|
popupContentHTML = '<img src="img/widelong.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML);
|
|
|
|
//anchored bubble popup wide long fixed contents autosize closebox
|
|
ll = new OpenLayers.LonLat(70,5);
|
|
popupClass = AutoSizeAnchoredBubble;
|
|
popupContentHTML = '<img src="img/widelong.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
//
|
|
//Bubble OVERFLOW
|
|
//
|
|
|
|
//anchored bubble popup small contents no autosize
|
|
var ll = new OpenLayers.LonLat(-55,0);
|
|
popupClass = OpenLayers.Popup.AnchoredBubble;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored bubble popup small contents no autosize closebox
|
|
var ll = new OpenLayers.LonLat(-50,0);
|
|
popupClass = OpenLayers.Popup.AnchoredBubble;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
|
|
//anchored bubble popup small contents autosize
|
|
ll = new OpenLayers.LonLat(-40,0);
|
|
popupClass = AutoSizeAnchoredBubble;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored bubble popup small contents autosize closebox
|
|
ll = new OpenLayers.LonLat(-35,0);
|
|
popupClass = AutoSizeAnchoredBubble;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
|
|
//anchored bubble popup small contents autosize minsize
|
|
ll = new OpenLayers.LonLat(-25,0);
|
|
popupClass = AutoSizeAnchoredBubbleMinSize;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored bubble popup small contents autosize minsize closebox
|
|
ll = new OpenLayers.LonLat(-20,0);
|
|
popupClass = AutoSizeAnchoredBubbleMinSize;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
|
|
//anchored bubble popup small contents autosize maxsize
|
|
ll = new OpenLayers.LonLat(-10,0);
|
|
popupClass = AutoSizeAnchoredBubbleMaxSize;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored bubble popup small contents autosize maxsize closebox
|
|
ll = new OpenLayers.LonLat(-5,0);
|
|
popupClass = AutoSizeAnchoredBubbleMaxSize;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
|
|
//anchored bubble popup bigger contents autosize closebox
|
|
ll = new OpenLayers.LonLat(5,0);
|
|
popupClass = AutoSizeAnchoredBubble;
|
|
popupContentHTML = '<div style="background-color:red;">Popup.AnchoredBubble<br>autosize<br>overflow<br>' + samplePopupContentsHTML + '</div>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored bubble popup bigger contents autosize closebox
|
|
ll = new OpenLayers.LonLat(10,0);
|
|
popupClass = AutoSizeAnchoredBubble;
|
|
popupContentHTML = '<div style="background-color:red;">Popup.AnchoredBubble<br>autosize<br>closebox<br>overflow<br>' + samplePopupContentsHTML + '</div>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
|
|
//anchored bubble popup wide short contents autosize overflow
|
|
ll = new OpenLayers.LonLat(20,0);
|
|
popupClass = AutoSizeAnchoredBubble;
|
|
popupContentHTML = '<div style="background-color:red;">Popup.AnchoredBubble<br>autosize<br>overflow<br>' + samplePopupContentsHTML_WideShort + '</div>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored bubble popup wide short contents autosize closebox overflow
|
|
ll = new OpenLayers.LonLat(25,0);
|
|
popupClass = AutoSizeAnchoredBubble;
|
|
popupContentHTML = '<div style="background-color:red;">Popup.AnchoredBubble<br>autosize<br>overflow<br>closebox<br>' + samplePopupContentsHTML_WideShort + '</div>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
|
|
//anchored bubble popup wide short fixed contents autosize overflow
|
|
ll = new OpenLayers.LonLat(35,0);
|
|
popupClass = AutoSizeAnchoredBubble;
|
|
popupContentHTML = '<img src="img/wideshort.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored bubble popup wide short fixed contents autosize closebox overflow
|
|
ll = new OpenLayers.LonLat(40,0);
|
|
popupClass = AutoSizeAnchoredBubble;
|
|
popupContentHTML = '<img src="img/wideshort.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
|
|
//anchored bubble popup thin long fixed contents autosize overflow
|
|
ll = new OpenLayers.LonLat(50,0);
|
|
popupClass = AutoSizeAnchoredBubble;
|
|
popupContentHTML = '<img src="img/thinlong.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored bubble popup thin long fixed contents autosize closebox overflow
|
|
ll = new OpenLayers.LonLat(55,0);
|
|
popupClass = AutoSizeAnchoredBubble;
|
|
popupContentHTML = '<img src="img/thinlong.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
|
|
//anchored bubble popup wide long fixed contents autosize overflow
|
|
ll = new OpenLayers.LonLat(65,0);
|
|
popupClass = AutoSizeAnchoredBubble;
|
|
popupContentHTML = '<img src="img/widelong.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored bubble popup wide long fixed contents autosize closebox overflow
|
|
ll = new OpenLayers.LonLat(70,0);
|
|
popupClass = AutoSizeAnchoredBubble;
|
|
popupContentHTML = '<img src="img/widelong.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
//FRAMED
|
|
|
|
//
|
|
//FRAMED NO OVERFLOW
|
|
//
|
|
|
|
//anchored bubble popup small contents no autosize
|
|
var ll = new OpenLayers.LonLat(-55,-15);
|
|
popupClass = OpenLayers.Popup.FramedCloud;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false);
|
|
|
|
//anchored bubble popup small contents no autosize closebox
|
|
var ll = new OpenLayers.LonLat(-50,-15);
|
|
popupClass = OpenLayers.Popup.FramedCloud;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
|
|
//anchored bubble popup small contents autosize
|
|
ll = new OpenLayers.LonLat(-40,-15);
|
|
popupClass = AutoSizeFramedCloud;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false);
|
|
|
|
//anchored bubble popup small contents autosize closebox
|
|
ll = new OpenLayers.LonLat(-35,-15);
|
|
popupClass = AutoSizeFramedCloud;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
|
|
//anchored bubble popup small contents autosize minsize
|
|
ll = new OpenLayers.LonLat(-25,-15);
|
|
popupClass = AutoSizeFramedCloudMinSize;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false);
|
|
|
|
//anchored bubble popup small contents autosize minsize closebox
|
|
ll = new OpenLayers.LonLat(-20,-15);
|
|
popupClass = AutoSizeFramedCloudMinSize;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
|
|
//anchored bubble popup small contents autosize maxsize
|
|
ll = new OpenLayers.LonLat(-10,-15);
|
|
popupClass = AutoSizeFramedCloudMaxSize;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false);
|
|
|
|
//anchored bubble popup small contents autosize maxsize closebox
|
|
ll = new OpenLayers.LonLat(-5,-15);
|
|
popupClass = AutoSizeFramedCloudMaxSize;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
|
|
//anchored bubble popup bigger contents autosize closebox
|
|
ll = new OpenLayers.LonLat(5,-15);
|
|
popupClass = AutoSizeFramedCloud;
|
|
popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize<br>' + samplePopupContentsHTML + '</div>';
|
|
addMarker(ll, popupClass, popupContentHTML, false);
|
|
|
|
//anchored bubble popup bigger contents autosize closebox
|
|
ll = new OpenLayers.LonLat(10,-15);
|
|
popupClass = AutoSizeFramedCloud;
|
|
popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize<br>closebox<br>' + samplePopupContentsHTML + '</div>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
|
|
//anchored bubble popup wide short text contents autosize
|
|
ll = new OpenLayers.LonLat(20,-15);
|
|
popupClass = AutoSizeFramedCloud;
|
|
popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize - wide short text<br>' + samplePopupContentsHTML_WideShort + '</div>';
|
|
addMarker(ll, popupClass, popupContentHTML);
|
|
|
|
//anchored bubble popup wide short text contents autosize closebox
|
|
ll = new OpenLayers.LonLat(25,-15);
|
|
popupClass = AutoSizeFramedCloud;
|
|
popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize - wide short text<br>closebox<br>' + samplePopupContentsHTML_WideShort + '</div>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
|
|
//anchored bubble popup wide short fixed contents autosize
|
|
ll = new OpenLayers.LonLat(35,-15);
|
|
popupClass = AutoSizeFramedCloud;
|
|
popupContentHTML = '<img src="img/wideshort.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML);
|
|
|
|
//anchored bubble popup wide short fixed contents autosize closebox
|
|
ll = new OpenLayers.LonLat(40,-15);
|
|
popupClass = AutoSizeFramedCloud;
|
|
popupContentHTML = '<img src="img/wideshort.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
|
|
//anchored bubble popup thin long fixed contents autosize
|
|
ll = new OpenLayers.LonLat(50,-15);
|
|
popupClass = AutoSizeFramedCloud;
|
|
popupContentHTML = '<img src="img/thinlong.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML);
|
|
|
|
//anchored bubble popup thin long fixed contents autosize closebox
|
|
ll = new OpenLayers.LonLat(55,-15);
|
|
popupClass = AutoSizeFramedCloud;
|
|
popupContentHTML = '<img src="img/thinlong.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
|
|
//anchored bubble popup wide long fixed contents autosize
|
|
ll = new OpenLayers.LonLat(65,-15);
|
|
popupClass = AutoSizeFramedCloud;
|
|
popupContentHTML = '<img src="img/widelong.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML);
|
|
|
|
//anchored bubble popup wide long fixed contents autosize closebox
|
|
ll = new OpenLayers.LonLat(70,-15);
|
|
popupClass = AutoSizeFramedCloud;
|
|
popupContentHTML = '<img src="img/widelong.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true);
|
|
|
|
//
|
|
//FRAMED OVERFLOW
|
|
//
|
|
|
|
//anchored bubble popup small contents no autosize
|
|
var ll = new OpenLayers.LonLat(-55,-20);
|
|
popupClass = OpenLayers.Popup.FramedCloud;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored bubble popup small contents no autosize closebox
|
|
var ll = new OpenLayers.LonLat(-50,-20);
|
|
popupClass = OpenLayers.Popup.FramedCloud;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
|
|
//anchored bubble popup small contents autosize
|
|
ll = new OpenLayers.LonLat(-40,-20);
|
|
popupClass = AutoSizeFramedCloud;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored bubble popup small contents autosize closebox
|
|
ll = new OpenLayers.LonLat(-35,-20);
|
|
popupClass = AutoSizeFramedCloud;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
|
|
//anchored bubble popup small contents autosize minsize
|
|
ll = new OpenLayers.LonLat(-25,-20);
|
|
popupClass = AutoSizeFramedCloudMinSize;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored bubble popup small contents autosize minsize closebox
|
|
ll = new OpenLayers.LonLat(-20,-20);
|
|
popupClass = AutoSizeFramedCloudMinSize;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
|
|
//anchored bubble popup small contents autosize maxsize
|
|
ll = new OpenLayers.LonLat(-10,-20);
|
|
popupClass = AutoSizeFramedCloudMaxSize;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored bubble popup small contents autosize maxsize closebox
|
|
ll = new OpenLayers.LonLat(-5,-20);
|
|
popupClass = AutoSizeFramedCloudMaxSize;
|
|
popupContentHTML = '<img src="img/small.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
|
|
//anchored bubble popup bigger contents autosize closebox
|
|
ll = new OpenLayers.LonLat(5,-20);
|
|
popupClass = AutoSizeFramedCloud;
|
|
popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize<br>overflow<br>' + samplePopupContentsHTML + '</div>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored bubble popup bigger contents autosize closebox
|
|
ll = new OpenLayers.LonLat(10,-20);
|
|
popupClass = AutoSizeFramedCloud;
|
|
popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize<br>closebox<br>overflow<br>' + samplePopupContentsHTML + '</div>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
|
|
//anchored bubble popup wide short contents autosize overflow
|
|
ll = new OpenLayers.LonLat(20,-20);
|
|
popupClass = AutoSizeFramedCloud;
|
|
popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize<br>overflow<br>' + samplePopupContentsHTML_WideShort + '</div>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored bubble popup wide short contents autosize closebox overflow
|
|
ll = new OpenLayers.LonLat(25,-20);
|
|
popupClass = AutoSizeFramedCloud;
|
|
popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize<br>overflow<br>closebox<br>' + samplePopupContentsHTML_WideShort + '</div>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
|
|
//anchored bubble popup wide short fixed contents autosize overflow
|
|
ll = new OpenLayers.LonLat(35,-20);
|
|
popupClass = AutoSizeFramedCloud;
|
|
popupContentHTML = '<img src="img/wideshort.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored bubble popup wide short fixed contents autosize closebox overflow
|
|
ll = new OpenLayers.LonLat(40,-20);
|
|
popupClass = AutoSizeFramedCloud;
|
|
popupContentHTML = '<img src="img/wideshort.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
|
|
//anchored bubble popup thin long fixed contents autosize overflow
|
|
ll = new OpenLayers.LonLat(50,-20);
|
|
popupClass = AutoSizeFramedCloud;
|
|
popupContentHTML = '<img src="img/thinlong.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored bubble popup thin long fixed contents autosize closebox overflow
|
|
ll = new OpenLayers.LonLat(55,-20);
|
|
popupClass = AutoSizeFramedCloud;
|
|
popupContentHTML = '<img src="img/thinlong.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
|
|
//anchored bubble popup wide long fixed contents autosize overflow
|
|
ll = new OpenLayers.LonLat(65,-20);
|
|
popupClass = AutoSizeFramedCloud;
|
|
popupContentHTML = '<img src="img/widelong.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, false, true);
|
|
|
|
//anchored bubble popup wide long fixed contents autosize closebox overflow
|
|
ll = new OpenLayers.LonLat(70,-20);
|
|
popupClass = AutoSizeFramedCloud;
|
|
popupContentHTML = '<img src="img/widelong.jpg"></img>';
|
|
addMarker(ll, popupClass, popupContentHTML, true, true);
|
|
|
|
|
|
}
|
|
|
|
/**
|
|
* Function: addMarker
|
|
* Add a new marker to the markers layer given the following lonlat,
|
|
* popupClass, and popup contents HTML. Also allow specifying
|
|
* whether or not to give the popup a close box.
|
|
*
|
|
* Parameters:
|
|
* ll - {<OpenLayers.LonLat>} Where to place the marker
|
|
* popupClass - {<OpenLayers.Class>} Which class of popup to bring up
|
|
* when the marker is clicked.
|
|
* popupContentHTML - {String} What to put in the popup
|
|
* closeBox - {Boolean} Should popup have a close box?
|
|
* overflow - {Boolean} Let the popup overflow scrollbars?
|
|
*/
|
|
function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow) {
|
|
|
|
var feature = new OpenLayers.Feature(markers, ll);
|
|
feature.closeBox = closeBox;
|
|
feature.popupClass = popupClass;
|
|
feature.data.popupContentHTML = popupContentHTML;
|
|
feature.data.overflow = (overflow) ? "auto" : "hidden";
|
|
|
|
var marker = feature.createMarker();
|
|
|
|
var markerClick = function (evt) {
|
|
if (this.popup == null) {
|
|
this.popup = this.createPopup(this.closeBox);
|
|
map.addPopup(this.popup);
|
|
this.popup.show();
|
|
} else {
|
|
this.popup.toggle();
|
|
}
|
|
currentPopup = this.popup;
|
|
OpenLayers.Event.stop(evt);
|
|
};
|
|
marker.events.register("mousedown", feature, markerClick);
|
|
|
|
markers.addMarker(marker);
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body onload="init()">
|
|
<h1 id="title">Popup Matrix</h1>
|
|
|
|
<div id="tags">
|
|
popup, popups
|
|
</div>
|
|
<p id="shortdesc">
|
|
All kinds of different popup configurations.
|
|
</p>
|
|
|
|
<div id="map" class="smallmap"></div>
|
|
|
|
<!-- preloading these images so the autosize will work correctly -->
|
|
<img src="img/wideshort.jpg" style="position:absolute; top:-5000px; left: -5000px"></img>
|
|
<img src="img/widelong.jpg" style="position:absolute; top:-5000px; left: -5000px"></img>
|
|
<img src="img/thinlong.jpg" style="position:absolute; top:-5000px; left: -5000px"></img>
|
|
|
|
<p> All of the images in this file a pre-cached, meaning they are
|
|
loaded immediately when you load the page (they are just placed
|
|
far offscreen, that's why you don't see them).
|
|
</p>
|
|
<br>
|
|
<p> The only image that is *not* preloaded is img/small.jpg, the brazilian
|
|
flag. We do this in order to test out to make sure that our auto-sizing
|
|
code does in fact activate itself as the images load. To verify
|
|
this, clear your cache and reload this example page. Click on
|
|
any of the markers in the 'AutoSize' row. If the popup autosizes
|
|
to correctly contain the entire flag: golden. If the popup is
|
|
tiny and you can only see a corner of it, then this code is broken.
|
|
</p>
|
|
|
|
<br>
|
|
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|