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:
parent
bf9f14cf03
commit
9a33041ac4
3 changed files with 22 additions and 13 deletions
|
@ -526,6 +526,11 @@ Ox.Map = function(options, self) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function centerChanged() {
|
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.center = self.map.getCenter();
|
||||||
self.centerChanged = true;
|
self.centerChanged = true;
|
||||||
}
|
}
|
||||||
|
@ -867,7 +872,6 @@ Ox.Map = function(options, self) {
|
||||||
function mapChanged() {
|
function mapChanged() {
|
||||||
// gets called after panning or zooming
|
// gets called after panning or zooming
|
||||||
Ox.print('mapChanged');
|
Ox.print('mapChanged');
|
||||||
var bounds;
|
|
||||||
if (self.boundsChanged) {
|
if (self.boundsChanged) {
|
||||||
var bounds = self.map.getBounds(),
|
var bounds = self.map.getBounds(),
|
||||||
southWest = bounds.getSouthWest(),
|
southWest = bounds.getSouthWest(),
|
||||||
|
|
|
@ -187,7 +187,10 @@ Ox.MapMarker = function(options) {
|
||||||
var offset = that.map.offset(),
|
var offset = that.map.offset(),
|
||||||
xy = that.map.overlayView.getProjection()
|
xy = that.map.overlayView.getProjection()
|
||||||
.fromLatLngToContainerPixel(e.latLng);
|
.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() {
|
function mouseout() {
|
||||||
|
@ -234,15 +237,17 @@ Ox.MapMarker = function(options) {
|
||||||
|
|
||||||
function setTooltip() {
|
function setTooltip() {
|
||||||
var country = Ox.getCountryByGeoname(that.place.geoname);
|
var country = Ox.getCountryByGeoname(that.place.geoname);
|
||||||
|
that.tooltip && that.tooltip.remove();
|
||||||
that.tooltip = Ox.Tooltip({
|
that.tooltip = Ox.Tooltip({
|
||||||
title: '<img src="'
|
title: '<img src="'
|
||||||
+ Ox.getImageByGeoname('icon', 16, that.place.geoname)
|
+ Ox.getImageByGeoname('icon', 16, that.place.geoname)
|
||||||
+ '" style="float: left; margin: 1px 0 1px -1px; border-radius: 4px"/>'
|
+ '" style="float: left; margin: 1px 0 1px -1px; border-radius: 4px"/>'
|
||||||
+ '<div style="float: left; margin: 4px -1px 0 4px; font-size: 9px;">'
|
+ '<div style="float: left; margin: 4px -1px 0 4px; font-size: 9px;">'
|
||||||
+ that.place.name
|
+ that.place.name
|
||||||
+ (country && country.name != that.place.name ? ', ' + country.name : '')
|
+ (country && country.name != that.place.name ? ', ' + country.name : '')
|
||||||
+ '</div>'
|
+ '</div>'
|
||||||
});
|
})
|
||||||
|
.addClass('OxMapMarkerTooltip');
|
||||||
}
|
}
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
|
|
|
@ -37,10 +37,10 @@ Ox.Tooltip = function(options, self) {
|
||||||
that.animate({
|
that.animate({
|
||||||
opacity: 0
|
opacity: 0
|
||||||
}, 250, function() {
|
}, 250, function() {
|
||||||
that.removeElement();
|
that.detach();
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
that.removeElement();
|
that.detach();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return that;
|
return that;
|
||||||
|
@ -58,7 +58,7 @@ Ox.Tooltip = function(options, self) {
|
||||||
self.x = x;
|
self.x = x;
|
||||||
self.y = y
|
self.y = y
|
||||||
}
|
}
|
||||||
$('.OxTooltip').remove(); // fixme: don't use DOM
|
$('.OxTooltip').detach(); // fixme: don't use DOM
|
||||||
that.appendTo(Ox.UI.$body);
|
that.appendTo(Ox.UI.$body);
|
||||||
width = that.width();
|
width = that.width();
|
||||||
height = that.height();
|
height = that.height();
|
||||||
|
|
Loading…
Reference in a new issue