[OpenLayers-Users] WFS polygon or point and Popup
arno974
arnaud.sig at gmail.com
Fri Nov 28 01:41:20 EST 2008
Hi all,
I finally succed, i've solve my problem by making my own object. I extended
the Control Class and had a new control call tooltips.
Here is the new class :
/*
*
* Purpose: extends OpenLayers API (toolTips)
* Add New Control ToolTips
* Author: Van De Casteele Arnaud
* Date: february 2008
* Version: 0.1
*
*/
/**
* @requires OpenLayers/Control.js
*/
/**
* Class: OpenLayers.Control.MousePosition
*
* Inherits from:
* - <OpenLayers.Control>
*/
OpenLayers.Control.ToolTips = OpenLayers.Class(OpenLayers.Control, {
/**
* Property: element
* {DOMElement} The DOM element that contains the toolTips Element
*/
element: null,
/**
* Property: text color
* Can be a text as black or hexadecimal color as #000000
* {String}
*/
textColor: "black",
/**
* Property: bold text
* {String}
*/
bold : false,
/**
* Property: Opacity
* {String}
*/
opacity : 100,
/**
* Property: background color
* Can be a text as white or hexadecimal color as #FFFFFF
* {String}
*/
bgColor: "white",
/**
* Property: Padding of the div
* {String}
*/
paddingValue : "2px",
/**
* Property: lastXy
* {<OpenLayers.LonLat>}
*/
lastXy: null,
html : null,
/**
* Constructor: OpenLayers.Control.MousePosition
*
* Parameters:
* options - {DOMElement} Options for control.
*/
initialize: function(options) {
//Extend with new arguments
var newArguments = [];
OpenLayers.Util.extend(this, options);
OpenLayers.Control.prototype.initialize.apply(this, arguments);
},
/**
* Method: destroy
*/
destroy: function() {
if (this.map) {
this.map.events.unregister('mousemove', this, this.redraw);
}
OpenLayers.Control.prototype.destroy.apply(this, arguments);
},
/**
* Method: draw
* Used with the mapadd.Control
* {DOMElement}
*/
draw: function() {
OpenLayers.Control.prototype.draw.apply(this, arguments);
// Create the Div in the DOM
// Div background
this.divBgTtips = document.createElement("div");
this.divBgTtips.id = OpenLayers.Util.createUniqueID("divBgTtips");
this.divBgTtips.className = this.displayClass + 'ToolTipsElement';
this.divBgTtips.style.backgroundColor = this.bgColor;
this.divBgTtips.style.display = "none";
this.divBgTtips.style.position = "absolute";
this.divBgTtips.style.zIndex = "100000";
this.divBgTtips.style.padding = "2px 5px 2px 5px";
this.divBgTtipsTx = document.createElement("span");
if(this.bold){this.divBgTtipsTx.style.fontWeight="bold";}
this.divBgTtips.appendChild(this.divBgTtipsTx);
//BG Opacity
this.divBgTtips.style.filter="alpha(opacity="+this.opacity*100+")";
this.divBgTtips.style.opacity=this.opacity;
//document.getElementById(this.map.div.id).appendChild(this.divBgTtips);
document.body.appendChild(this.divBgTtips);
// Div for the text
// Hack to have a transparent background and a 100 opacity text
this.divTxTtips = document.createElement("div");
this.divTxTtips.id = OpenLayers.Util.createUniqueID("divTxTtips");
this.divTxTtips.style.color = this.textColor;
this.divTxTtips.style.display = "none";
this.divTxTtips.style.position = "absolute";
this.divTxTtips.style.zIndex = "100001";
this.divTxTtips.style.padding = "2px 5px 2px 5px";
if(this.bold){this.divTxTtips.style.fontWeight="bold";}
document.getElementById(this.map.div.id).appendChild(this.divTxTtips);
//this.divTxTtips = this.clone(this.divBgTtips);
document.body.appendChild(this.divTxTtips);
this.map.events.register('mousemove', this, this.redraw);
},
/**
* Method: show
* Show the tooltips on the map
*/
show : function(valueHTML){
this.divBgTtipsTx.innerHTML = valueHTML.html;
this.divBgTtipsTx.style.visibility = "hidden";
this.divTxTtips.innerHTML = valueHTML.html;
this.divTxTtips.style.display = "block";
this.divBgTtips.style.display = "block";
},
/**
* Method: hide
* hide the tooltips on the map
*/
hide : function(){
this.divBgTtips.style.display = "none";
this.divTxTtips.style.display = "none";
},
/**
* Method: findXYmap
* To Know the position of the map in the HTML
*/
findXYMap : function(obj){
var x=0,y=0;
while (obj!=null){
x+=obj.offsetLeft-obj.scrollLeft;
y+=obj.offsetTop-obj.scrollTop;
obj=obj.offsetParent;
}
return {x:x,y:y};
},
/**
* Method: redraw the div
* with new position params
*/
redraw: function(evt) {
marginPos = this.findXYMap(document.getElementById(this.map.div.id));
this.divBgTtips.style.left = ((evt.xy.x+marginPos.x)+22)+"px";
this.divBgTtips.style.top = ((evt.xy.y+marginPos.y)-12)+"px";
this.divTxTtips.style.left = ((evt.xy.x+marginPos.x)+22)+"px";
this.divTxTtips.style.top = ((evt.xy.y+marginPos.y)-12)+"px";
},
CLASS_NAME: "OpenLayers.Control.ToolTips"
});
And an HTML example :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers ToolTips</title>
<style type="text/css">
body {
margin : 20px;
}
#map {
width: 800px;
height: 626px;
border: 1px solid black;
}
</style>
<script src="../lib/js/OpenLayers/OpenLayers.js"
type="text/javascript"></script>
<script src="../lib/js/OpenLayers/lib/OpenLayers/Control/TooltTips.js"
type="text/javascript"></script>
<script defer="defer" type="text/javascript">
function init(){
var bounds = new OpenLayers.Bounds(
55.185611724, -21.415085482499997,
55.867049316, -20.8459795275
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 0.002661865593750007,
projection: "EPSG:4326",
units: 'degrees'
};
map = new OpenLayers.Map('map', options);
var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}, {buffer:
0});
var markers = new OpenLayers.Layer.Markers("Marker");
markers.addMarker(new OpenLayers.Marker(new
OpenLayers.LonLat(55.48,-20.96)));
markers.events.register("mouseover", markers, toolTipsOver);
markers.events.register("mouseout", markers, toolTipsOut);
map.addLayers([wms,markers]);
ttips = new OpenLayers.Control.ToolTips({bgColor:"red",textColor
:"black", bold : true, opacity : 0.50});
map.addControl(ttips);
map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToExtent(bounds);
function toolTipsOver(e) {
ttips.show({html:"My first ToolTips"});
}
function toolTipsOut(e){
ttips.hide();
}
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
If you see something to improve tell me.
Best regards
Arnaud
arno974 wrote:
>
> Hi all,
>
> I've been working for two day in a way to display some popup or labels
> when i'm on hover of a feature WFS object. I've googled and search on this
> list but i couldn't find any solutions.
>
> Maybe you know a "simple" solution to add an hover events on a WFS layer
> and in this events i must know my mouse position to display the popup.
>
> I've tried to do it like that :
>
> sf = new OpenLayers.Control.SelectFeature(wfs, {hover : true , onSelect :
> __toolTips})
>
> It works fine for the onHover event but i can't handler my mouse position
> to display the bubble.
>
> Thnaks for any help.
>
> Arnaud
>
--
View this message in context: http://www.nabble.com/WFS-polygon-or-point-and-Popup-tp20695049p20729651.html
Sent from the OpenLayers Users mailing list archive at Nabble.com.
More information about the Users
mailing list