hide marker tooltip when map center changes; when hiding a tooltip, don't remove but detach it, so that when it is shown again, its oxid is still present on its dom element

This commit is contained in:
rlx 2011-11-03 13:59:54 +00:00
parent bf9f14cf03
commit 9a33041ac4
3 changed files with 22 additions and 13 deletions

View file

@ -526,6 +526,11 @@ Ox.Map = function(options, self) {
}
function centerChanged() {
var tooltip = $('.OxMapMarkerTooltip');
if (tooltip.length) {
Ox.print('??', tooltip[0].className, $(tooltip[0]).data('oxid'));
Ox.UI.elements[$(tooltip[0]).data('oxid')].hide();
}
self.center = self.map.getCenter();
self.centerChanged = true;
}
@ -867,7 +872,6 @@ Ox.Map = function(options, self) {
function mapChanged() {
// gets called after panning or zooming
Ox.print('mapChanged');
var bounds;
if (self.boundsChanged) {
var bounds = self.map.getBounds(),
southWest = bounds.getSouthWest(),

View file

@ -187,7 +187,10 @@ Ox.MapMarker = function(options) {
var offset = that.map.offset(),
xy = that.map.overlayView.getProjection()
.fromLatLngToContainerPixel(e.latLng);
that.tooltip.show(offset.left + xy.x - 4, offset.top + xy.y + 20);
that.tooltip.show(
offset.left + Math.round(xy.x) - 4,
offset.top + Math.round(xy.y) + 20
);
}
function mouseout() {
@ -234,15 +237,17 @@ Ox.MapMarker = function(options) {
function setTooltip() {
var country = Ox.getCountryByGeoname(that.place.geoname);
that.tooltip && that.tooltip.remove();
that.tooltip = Ox.Tooltip({
title: '<img src="'
+ Ox.getImageByGeoname('icon', 16, that.place.geoname)
+ '" style="float: left; margin: 1px 0 1px -1px; border-radius: 4px"/>'
+ '<div style="float: left; margin: 4px -1px 0 4px; font-size: 9px;">'
+ that.place.name
+ (country && country.name != that.place.name ? ', ' + country.name : '')
+ '</div>'
});
title: '<img src="'
+ Ox.getImageByGeoname('icon', 16, that.place.geoname)
+ '" style="float: left; margin: 1px 0 1px -1px; border-radius: 4px"/>'
+ '<div style="float: left; margin: 4px -1px 0 4px; font-size: 9px;">'
+ that.place.name
+ (country && country.name != that.place.name ? ', ' + country.name : '')
+ '</div>'
})
.addClass('OxMapMarkerTooltip');
}
/*@

View file

@ -37,10 +37,10 @@ Ox.Tooltip = function(options, self) {
that.animate({
opacity: 0
}, 250, function() {
that.removeElement();
that.detach();
});
} else {
that.removeElement();
that.detach();
}
}
return that;
@ -58,7 +58,7 @@ Ox.Tooltip = function(options, self) {
self.x = x;
self.y = y
}
$('.OxTooltip').remove(); // fixme: don't use DOM
$('.OxTooltip').detach(); // fixme: don't use DOM
that.appendTo(Ox.UI.$body);
width = that.width();
height = that.height();