CODEWITHSUNDEEP
mapbox-glmapbox-gl-js
John Derring
John Derring

Reputation: 535

How to make MapboxGL marker popup auto pan so it's fully visible on the map?

I have a marker and a popup that I use that opens when the marker is clicked. The original Mapbox API had autoPan setting, but MapboxGL does not. How would I make this work?

Upvotes: 2

Views: 1562

Answers (2)

eMTy
eMTy

Reputation: 387

To enable auto-pan for popups all you have to do is not specify a popup anchor.

From docs:

anchor

A string indicating the part of the popup that should be positioned closest to the coordinate, set via Popup#setLngLat . Options are 'center' , 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right' . If unset, the anchor will be dynamically set to ensure the popup falls within the map container with a preference for 'bottom' .

https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup

Upvotes: 2

mollymerp
mollymerp

Reputation: 1602

If I understand correctly, autoPan will make sure the popup is in the map view when it is opened. To accomplish this, you could use map.flyTo() or map.jumpTo() to jump to the popup location.

working example: https://jsfiddle.net/Ltypbkdc/

Upvotes: 1

Related Questions