tombatossals / angular-leaflet-directive

AngularJS directive to embed an interact with maps managed by Leaflet library
http://tombatossals.github.io/angular-leaflet-directive
MIT License
1.5k stars 635 forks source link

[Help] How to add offset with .openPopup() #1087

Closed drewmo closed 8 years ago

drewmo commented 8 years ago

So I have Markers that are already in an array which have messages added to them.

What I am trying to do is on mouseover I want to show the popup and on mouseout I want to close the popup, basically alleviating the popup flicker until you truly mouseout of the marker. I use this function to open the popup:

$scope.$on('leafletDirectiveMarker.mouseover', function(ev, marker) { 
    marker.leafletObject.openPopup();
});

I am not sure how to add the offset option to the popup without having to rebind every marker I already have added to the map since I have structured divs in the popup. Here are the leaflet options: http://leafletjs.com/reference.html#popup-options I have already tried this without anything changing:

marker.leafletObject.openPopup({offset: (0, 1)});

Do you think rebinding the message from the marker in the $on function is the only option?

drewmo commented 8 years ago

I found a solution to the problem. I decided to try using bindPopup in order to create a new popup, get the already assigned html, and inject new options for it to work.

Inside of my $on function I now have:

marker.leafletObject.bindPopup(marker.leafletObject.options.message, {closeButton: false, offset: [0, -40]});
marker.leafletObject.openPopup();

marker.leafletObject.options.message is the location of my already preset HTML set in my marker array in the message section. Hopefully this helps anyone else with the same issue.

ChandraKantPaliwal commented 8 years ago

@dremonkey thanks :+1: