Hi,
How can I add tool tip as PanLeft, PanRight, PanDown,PanUp to the PanZoomBar arrows.. as like Google map.
As I seen there is only one tooltip option available for map. like map1.Tooltip.
Please guide me.
Thanks.
Raja.
PanZoomBar need tool tip like PanLeft,PanRight..etc
Raja,
We don't support add tooltips to PanZoomBar, however, here is a workaround for you temporarily, you could implement it on the client side. The code likes this:
Tooltip div:
var OnMapCreated = function(map) {
var PanZoomBar_panup = $get('PanZoomBar_panup');
$addHandler(PanZoomBar_panup, 'mouseover', Function.createCallback(showTooltip, { text: PanZoomBar_panup.id.split('_')[1] }));
$addHandler(PanZoomBar_panup, 'mouseout', hideTooltip);
}
var showTooltip = function(evt, result) {
var context = $get('tooltipDiv');
context.style.top = evt.clientY;
context.style.left = evt.clientX;
context.innerText = result.text;
context.style.display = 'block';
}
var hideTooltip = function() {
var context = $get('tooltipDiv');
context.style.display = 'none';
}
Thanks,
Johnny
I already had OnMapCreatingfunction. will it affect. Is the divtag always visible?
function OnMapCreating() {
OpenLayers.Events.prototype.includeXY = true;
OpenLayers.Events.prototype.getMousePosition = function (evt) {
if (!this.includeXY) {
this.clearMouseCache();
} else if (!this.element.hasScrollEvent) {
OpenLayers.Event.observe(window, 'scroll',
OpenLayers.Function.bind(this.clearMouseCache, this));
this.element.hasScrollEvent = true;
}
if (!this.element.scrolls) {
this.element.scrolls = [
(document.documentElement.scrollLeft
|| document.body.scrollLeft),
(document.documentElement.scrollTop
|| document.body.scrollTop)
];
}
if (!this.element.lefttop) {
this.element.lefttop = [
(document.documentElement.clientLeft || 0),
(document.documentElement.clientTop || 0)
];
}
if (!this.element.offsets) {
this.element.offsets = OpenLayers.Util.pagePosition(this.element);
this.element.offsets[0] += this.element.scrolls[0];
this.element.offsets[1] += this.element.scrolls[1];
}
return new OpenLayers.Pixel(
(evt.clientX + this.element.scrolls[0]) - this.element.offsets[0]
- this.element.lefttop[0],
(evt.clientY + this.element.scrolls[1]) - this.element.offsets[1]
- this.element.lefttop[1]
);
}
}
Raja,
If you want to overwrite getMousePosition function of OpenLayers.Events, please refer the code below:
var OnMapCreating = function(map) {
OpenLayers.Events = OpenLayers.Class(OpenLayers.Events, {
getMousePosition: function(evt) {
}
});
}
And another thing is that the tooltip div is visible when user mouse move the div related with the map tool, such as pan left or pan right etc, and tooltip div is invisible when user mouse out it.
If I misunderstand your meaning, please let me know.
Thanks,
Johnny