Add AnchoredBubble.js, include it in dynamic load, add a bit of demo test.
git-svn-id: http://svn.openlayers.org/trunk/openlayers@349 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
euzuro
+17
-7
@@ -27,9 +27,9 @@
|
|||||||
|
|
||||||
function changer() {
|
function changer() {
|
||||||
popup.setBackgroundColor("red");
|
popup.setBackgroundColor("red");
|
||||||
popup.setSize(new OpenLayers.Size(200,20));
|
popup.setSize(new OpenLayers.Size(100,600));
|
||||||
popup.moveTo(new OpenLayers.Pixel(120,120));
|
// popup.moveTo(new OpenLayers.Pixel(120,120));
|
||||||
popup.setOpacity(.9);
|
// popup.setOpacity(.5);
|
||||||
popup.setBorder("2px solid");
|
popup.setBorder("2px solid");
|
||||||
popup.setContentHTML("High Chickens");
|
popup.setContentHTML("High Chickens");
|
||||||
}
|
}
|
||||||
@@ -52,6 +52,16 @@
|
|||||||
map.addPopup(popup);
|
map.addPopup(popup);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function addAnchorBubble() {
|
||||||
|
popup = new OpenLayers.Popup.AnchoredBubble("chicken",
|
||||||
|
new OpenLayers.LonLat(5,40),
|
||||||
|
new OpenLayers.Size(200,200),
|
||||||
|
"example popup");
|
||||||
|
|
||||||
|
popup.setBackgroundColor("yellow");
|
||||||
|
popup.setOpacity(0.7);
|
||||||
|
map.addPopup(popup);
|
||||||
|
}
|
||||||
function destroy() {
|
function destroy() {
|
||||||
popup.destroy();
|
popup.destroy();
|
||||||
}
|
}
|
||||||
@@ -65,11 +75,11 @@
|
|||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="init()">
|
<body onload="init()">
|
||||||
<h1>OpenLayers Example</h1>
|
|
||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
<div style="background-color:purple" onclick="add()"> click to add popup to map</div>
|
<div style="background-color:purple" onclick="add()"> click to add Popup to map</div>
|
||||||
|
<div style="background-color:green" onclick="addAnchor()"> click to add an Popup.Anchored</div>
|
||||||
|
<div style="background-color:orange" onclick="addAnchorBubble()"> click to add Popup.AnchoredBubble</div>
|
||||||
<div style="background-color:blue" onclick="changer()"> click to modify popup's attributes</div>
|
<div style="background-color:blue" onclick="changer()"> click to modify popup's attributes</div>
|
||||||
<div style="background-color:red" onclick="addAnchor()"> click to add an anchored popup</div>
|
<div style="background-color:red" onclick="remove()"> click to remove the popup from map</div>
|
||||||
<div style="background-color:green" onclick="remove()"> click to remove the popup from map</div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -54,6 +54,7 @@ catch(e){
|
|||||||
"OpenLayers/Layer/WMS.js",
|
"OpenLayers/Layer/WMS.js",
|
||||||
"OpenLayers/Layer/WFS.js",
|
"OpenLayers/Layer/WFS.js",
|
||||||
"OpenLayers/Popup/Anchored.js",
|
"OpenLayers/Popup/Anchored.js",
|
||||||
|
"OpenLayers/Popup/AnchoredBubble.js",
|
||||||
"OpenLayers/Control.js",
|
"OpenLayers/Control.js",
|
||||||
"OpenLayers/Control/MouseDefaults.js",
|
"OpenLayers/Control/MouseDefaults.js",
|
||||||
"OpenLayers/Control/KeyboardDefaults.js",
|
"OpenLayers/Control/KeyboardDefaults.js",
|
||||||
|
|||||||
@@ -0,0 +1,180 @@
|
|||||||
|
// @require: OpenLayers/Popup/Anchored.js
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @class
|
||||||
|
*/
|
||||||
|
OpenLayers.Popup.AnchoredBubble = Class.create();
|
||||||
|
|
||||||
|
//Border space for the rico corners
|
||||||
|
OpenLayers.Popup.AnchoredBubble.CORNER_SIZE = 5;
|
||||||
|
|
||||||
|
OpenLayers.Popup.AnchoredBubble.prototype =
|
||||||
|
Object.extend( new OpenLayers.Popup.Anchored(), {
|
||||||
|
|
||||||
|
/** @type DOMElement */
|
||||||
|
contentDiv:null,
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @constructor
|
||||||
|
*
|
||||||
|
* @param {String} id
|
||||||
|
* @param {OpenLayers.LonLat} lonlat
|
||||||
|
* @param {OpenLayers.Size} size
|
||||||
|
* @param {String} contentHTML
|
||||||
|
*/
|
||||||
|
initialize:function(id, lonlat, size, contentHTML, anchorSize) {
|
||||||
|
OpenLayers.Popup.Anchored.prototype.initialize.apply(this, arguments);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {OpenLayers.Pixel} px
|
||||||
|
*
|
||||||
|
* @returns Reference to a div that contains the drawn popup
|
||||||
|
* @type DOMElement
|
||||||
|
*/
|
||||||
|
draw: function(px) {
|
||||||
|
|
||||||
|
OpenLayers.Popup.Anchored.prototype.draw.apply(this, arguments);
|
||||||
|
|
||||||
|
// make the content Div
|
||||||
|
var contentSize = this.size.copyOf();
|
||||||
|
contentSize.h -= (2 * OpenLayers.Popup.AnchoredBubble.CORNER_SIZE);
|
||||||
|
|
||||||
|
this.contentDiv = OpenLayers.Util.createDiv(
|
||||||
|
this.div.id + "-contentDiv",
|
||||||
|
null,
|
||||||
|
contentSize,
|
||||||
|
"auto",
|
||||||
|
null,
|
||||||
|
"relative");
|
||||||
|
|
||||||
|
this.div.appendChild(this.contentDiv);
|
||||||
|
this.setContentHTML();
|
||||||
|
|
||||||
|
this.setRicoCorners(true);
|
||||||
|
|
||||||
|
//set the popup color and opacity
|
||||||
|
this.setBackgroundColor();
|
||||||
|
this.setOpacity();
|
||||||
|
|
||||||
|
return this.div;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {OpenLayers.Size} size
|
||||||
|
*/
|
||||||
|
setSize:function(size) {
|
||||||
|
OpenLayers.Popup.Anchored.prototype.setSize.apply(this, arguments);
|
||||||
|
|
||||||
|
if (this.contentDiv != null) {
|
||||||
|
|
||||||
|
var contentSize = this.size.copyOf();
|
||||||
|
contentSize.h -= (2 * OpenLayers.Popup.AnchoredBubble.CORNER_SIZE);
|
||||||
|
|
||||||
|
this.contentDiv.style.height = contentSize.h + "px";
|
||||||
|
|
||||||
|
//size has changed - must redo corners
|
||||||
|
this.setRicoCorners(false);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {String} color
|
||||||
|
*/
|
||||||
|
setBackgroundColor:function(color) {
|
||||||
|
if (color != undefined) {
|
||||||
|
this.backgroundColor = color;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.div != null) {
|
||||||
|
if (this.contentDiv != null) {
|
||||||
|
this.div.style.background = "transparent";
|
||||||
|
Rico.Corner.changeColor(this.contentDiv, this.backgroundColor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {float} opacity
|
||||||
|
*/
|
||||||
|
setOpacity:function(opacity) {
|
||||||
|
if (opacity != undefined) {
|
||||||
|
this.opacity = opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.div != null) {
|
||||||
|
if (this.contentDiv != null) {
|
||||||
|
Rico.Corner.changeOpacity(this.contentDiv, this.opacity);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/** Bubble Popups can not have a border
|
||||||
|
*
|
||||||
|
* @param {int} border
|
||||||
|
*/
|
||||||
|
setBorder:function(border) {
|
||||||
|
this.border = 0;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {String} contentHTML
|
||||||
|
*/
|
||||||
|
setContentHTML:function(contentHTML) {
|
||||||
|
if (contentHTML != null) {
|
||||||
|
this.contentHTML = contentHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.contentDiv != null) {
|
||||||
|
this.contentDiv.innerHTML = this.contentHTML;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*
|
||||||
|
* @param {Boolean} firstTime Is this the first time the corners are being
|
||||||
|
* rounded?
|
||||||
|
*
|
||||||
|
* update the rico corners according to the popup's
|
||||||
|
* current relative postion
|
||||||
|
*/
|
||||||
|
setRicoCorners:function(firstTime) {
|
||||||
|
|
||||||
|
var corners = this.getCornersToRound(this.relativePosition);
|
||||||
|
var options = {corners: corners,
|
||||||
|
color: this.backgroundColor,
|
||||||
|
bgColor: "transparent",
|
||||||
|
blend: false};
|
||||||
|
|
||||||
|
if (firstTime) {
|
||||||
|
Rico.Corner.round(this.div, options);
|
||||||
|
} else {
|
||||||
|
Rico.Corner.reRound(this.contentDiv, options);
|
||||||
|
//set the popup color and opacity
|
||||||
|
this.setBackgroundColor();
|
||||||
|
this.setOpacity();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*
|
||||||
|
* @returns The proper corners string ("tr tl bl br") for rico
|
||||||
|
* to round
|
||||||
|
* @type String
|
||||||
|
*/
|
||||||
|
getCornersToRound:function() {
|
||||||
|
|
||||||
|
var corners = ['tl', 'tr', 'bl', 'br'];
|
||||||
|
|
||||||
|
//we want to round all the corners _except_ the opposite one.
|
||||||
|
var corner = OpenLayers.Bounds.oppositeQuadrant(this.relativePosition);
|
||||||
|
corners.remove(corner);
|
||||||
|
|
||||||
|
return corners.join(" ");
|
||||||
|
},
|
||||||
|
|
||||||
|
CLASS_NAME: "OpenLayers.Popup.AnchoredBubble"
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user