topic How to display popup on mouse-over, not on click? in Open Source Mapping Libraries Ques.

How to display popup on mouse-over, not on click?

JeffTucker — Sun, 01 Oct 2017 18:21:04 GMT

Trying to display a pop-up on mouse-over rather than click. Currently using the bindPopup method to display the information dynamically from a feature layer. However, not certain as to the correct way to get this to work on a mouse-over instead?

Also noticing that when I click the icon, the popup sometimes extends past the top of the page. Any idea as to how to prevent this?

Also, any advice how to fix the zoom and map position so that the user is unable to scroll or pan the map?

Thanks in advance for your help!!

JSFiddle

Live: http://aquagear.site44.com/

Re: How to display popup on mouse-over, not on click?

WinstonHoyle — Sun, 12 Dec 2021 09:48:32 GMT

Your fiddle seems to not be working but I think I understand what you are trying to do.

locations.bindPopup(/*Insert your popup information*/, {
   maxWidth: 560,
   maxHeight: 500
});‍‍‍‍

The Popup object has options that are found in the leaflet documentation: https://leafletjs.com/reference-1.3.2.html#popup-l-popup

Re: How to display popup on mouse-over, not on click?

JohnGravois — Tue, 17 Jul 2018 16:46:41 GMT

you're asking too many different questions in a single geonet post.

1. instead of calling bindPopup(), you'll need to implement your own logic within featureLayer.on("mouseover") / featureLayer.on("mouseout") (example)

2. by default, the popup option autoPan is set to true. this should ensure that the popup is displayed even if the map has to be recentered.

3. check out the leaflet map constructor option maxBounds