Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Markers only? #3

Open
karlwettin opened this Issue · 2 comments

1 participant

@karlwettin

I don't know if it makes sense that this lib is so Marker centric as Polygon, Polyline, and many other Overlays could make use of this too. But there are for instance no icons to change in a Polygon on mouse over and mouse out. Perhaps this icon change feature of yours should be implemented ad hoc by the user? I mean, is there ever a use case where you trigger mouse over/mouse out without having the tooltip shown/hidden? If not, should this feature perhaps be an event added by the user at the same place as they couple the tooltip to the overlay?

@karlwettin

The only problem I could identify is the lack of overlay.getPosition(). This can be fixed by doing this:

    // Callback
    onBeforeShow(overlay, $tooltip);

    /**
     * since not all overviews (polygon, etc) have a position
     * we pick up the current position of the mouse cursor.
     */
    var positionTriggerEvent = google.maps.event.addListener(self.map_, 'mousemove', function(position) {
      google.maps.event.removeListener(positionTriggerEvent);

      var worldCoordinate = self.map_.getProjection().fromLatLngToPoint(position.latLng);
      ....

The problem I get with this is that the mouse over is triggered several times, which sort of mess with things. But it's one step in the right direction, according to me.

@karlwettin

Sorry for spamming your project...

Here is however a fix for above that works. Need to pass "Polygon" or "Marker" as type to tooltip.addOverlay(overlay, overlayType) in order to create a LatLng from the event or overlay.

function MapTooltip(map, tip, onBeforeShow, onBeforeHide) {
  // Don't forget the tip
  var $tooltip = tip;
  // One timer
  var timer = 0;
  // Don't loose our scope
  var self = this;

  this.map_ = map;

  if (!$tooltip.hasClass('tooltip-enabled')) {
    // Mouse enter
    $tooltip.bind('mouseenter.tooltip', function(e) {
      stopTimer();
    });

    // Mouse leave
    $tooltip.bind('mouseleave.tooltip', function(e) {
      self.hide(200)
    });

    $tooltip.addClass('tooltip-enabled');
  }

  function startTimer(callback, time) {
    stopTimer();
    timer = setTimeout(callback, time);
  }

  function stopTimer() {
    clearTimeout(timer);
  }

  this.show = function(overlay, latLng) {
    // Hide
    self.hide(0);

    $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 + 10;
    var y = pixelOffset.y + 10;

    // 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() - 50) + '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.animate({"top": "+=20px", "opacity": "toggle"}, 300);


  };

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

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

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

    self.overlayType_ = overlayType;

    google.maps.event.addListener(overlay, 'mouseover', function(event) {
      var latLng;
      if (overlayType == "Marker") {
        latLng = overlay.getPosition();
      } else if (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
Something went wrong with that request. Please try again.