Fix for issue 1-4 #5

Open
karlwettin opened this Issue Sep 13, 2010 · 0 comments

1 participant

@karlwettin

This is what I ended up doing:

I remove all timers and all animation to avoid show/hide bugs. Didn't figure out how to get it produce a new div for each tip, which is what I think I'd prefere as that would allow for nice fadeouts while new tips are displayed.

Passing down "Marker" or "Polygon" to the constructor in order to pick up LatLng position for the given overview (extracted using polygon mouseover event and marker.getPosision())

Evalute the projection LatLng from the map and zoom in scale in order to handle correct positioning after draging the map.

And then there is the quick and dirty solution to handle tooltips beeing showed in visible scope when overlay is in the far right or bottom of the visible scope.

function MapTooltip(map, overlayType, tooltip, onBeforeShow, onBeforeHide) {
  // Don't loose our scope
  var self = this;

  this.map_ = map;
  this.overlayType_ = overlayType;

  $tooltip = tooltip;
  
  this.show = function(overlay, latLng) {

    $tooltip.data('MapTooltips.overlay', overlay);

    // Callback
    onBeforeShow(overlay, $tooltip);


    var scale = Math.pow(2, self.map_.getZoom());
    var nw = new google.maps.LatLng(
        self.map_.getBounds().getNorthEast().lat(),
        self.map_.getBounds().getSouthWest().lng());

    var worldCoordinateNW = self.map_.getProjection().fromLatLngToPoint(nw);
    var worldCoordinate = self.map_.getProjection().fromLatLngToPoint(latLng);
    var pixelOffset = new google.maps.Point(
        Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
        Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale));

    // avoid having the cursor mouse out due to mouse in on tooltip
    var x = pixelOffset.x + 20;
    var y = pixelOffset.y + 20;

    // handle if overlay is in the bottom or right corner
    // and thus making the tooltip appear outside of the visible scope
    // todo this is a rather ugly hack
    // todo that probably only looks good on my 20x20 px icons and 300x150 px tooltip

    var rightEdge = self.map_.c.offsetWidth;
    var bottomEdge = self.map_.c.offsetHeight;


    var xTouched = false;
    // Check to see if the tooltip is outside right edge of the map
    if ((x + $tooltip.width()) > rightEdge) {
      x = (x - $tooltip.width() - 80) + 'px';
      xTouched = true;
    }

    // Check to see if the tooltip is outside the bottom edge of the map
    if ((y + $tooltip.height()) > bottomEdge) {
      y = (y - $tooltip.height() - 50) + 'px';
      if (!xTouched) {
        x += 20;
      }

    }


    $tooltip.css({
      position: "absolute",
      'z-index': 20000,
      top: y, left: x
    });

//    $tooltip.show();
    $tooltip.show();


  };

  this.hide = function() {
    var overlay = $tooltip.data('MapTooltips.overlay');

    if (overlay && typeof onBeforeHide == 'function') {
      onBeforeHide(overlay, $tooltip);
    }
    $tooltip.hide();

  };

  /**
   *
   * @param overlay
   * @param overlayType "Marker" or "Polygon".
   */
  this.addOverlay = function(overlay) {

    google.maps.event.addListener(overlay, 'mouseover', function(event) {
      var latLng;
      if (self.overlayType_ == "Marker") {
        latLng = overlay.getPosition();
      } else if (self.overlayType_ == "Polygon") {
        latLng = event.latLng;
      }
      self.show(overlay, latLng);
    });

    google.maps.event.addListener(overlay, 'mouseout', function(event) {
      self.hide(200)
    });
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment