CODEWITHSUNDEEP
javascriptmapboxgeo
mate64
mate64

Reputation: 10082

mapbox Pan a Map to Marker and Popup

Is it possible in 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);
});

mapbox small map with cut popup

Upvotes: 4

Views: 3401

Answers (2)

Tipster
Tipster

Reputation: 233

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.

Upvotes: 1

mate64
mate64

Reputation: 10082

I have found a native solution.

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

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

Documentation

Upvotes: 3

Related Questions