mapbox Pan a Map to Marker and Popup

Question

Is it possible in mapbox to pan the map to the marker onClick regarding the popup height?

Currently, the popup disappears behind the map's mask. I'm looking for a solution, to fit both into the map, the marker and the popup (like adding some top padding).

featureLayer.on('click', function(e) {
   var latLng = e.layer.getLatLng();
   map.panTo(latLng);
});

Answer 1

I have found a native solution.

You need add the parameter keepInView to the bindPopup() command.

layer.bindPopup('<p>Hello</p>', {keepInView: true});

Documentation

Answer 2

Way late on answering this question, but I came across it so others might too. I was having a similar issue and Dan Mandle answered with this bit of code on a similar question:

map.on('popupopen', function(e) {
var px = map.project(e.popup._latlng); // find the pixel location on the map where the popup anchor is
px.y -= e.popup._container.clientHeight/2 // find the height of the popup container, divide by 2, subtract from the Y axis of marker location
map.panTo(map.unproject(px),{animate: true}); // pan to new center

});

This code worked great for me, and still allows for panning the map once the popup is open, unlike using keepInView.