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

source/Ox.UI/js/Map/Ox.Map.js

@@ -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(),

source/Ox.UI/js/Map/Ox.MapMarker.js

@@ -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');
     }
 
     /*@

source/Ox.UI/js/Window/Ox.Tooltip.js

@@ -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();