Add popup offset option

[andrewharvey]

I would like to see an offset option for popups possibly as mentioned at #325 (comment) so that the popup tip can be touching the boundary of maker icons rather than overlapping it to reach the center, as it does in this example #1861 (comment).

[1ec5]

By comparison, the Mapbox iOS SDK always positions the callout at the top, but mapbox/mapbox-gl-native#2151 tracks making the anchor location configurable. The Mapbox OS X SDK always positions the popover on the right or left side, depending on the interface’s writing system.

[cvn]

You can create an offset with CSS.

.mapboxgl-popup-anchor-left {
    margin-left: 10px;
}
.mapboxgl-popup-anchor-right {
    margin-left: -10px;
}
...

[andrewharvey]

@cvn i've used that as my work around but it's not perfect because does that work with popups with different offsets on the same map? Because i have different sized markers on the map each with popups attached which each need different offsets.

[cvn]

You could get different offsets with something like:

map.on('click', function (e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['markers'] });
    $('body').toggleClass('big-offset', 'big-marker' === features[0].properties['marker-symbol']);
    new mapboxgl.Popup(...)...
});

and

.big-offset .mapboxgl-popup-anchor-left {
    margin-left: 20px;
}
...

It's pretty fragile.

[jfirebaugh]

I believe that adding support for per-popup offset would be a matter of introducing the option and adding it to the calculated position here. Anyone want to work on a PR? It looks fairly straightforward (yeah, famous last words, I know).

[andrewharvey]

@cvn That's something I hadn't thought of. Thanks for posting it.

@jfirebaugh Yes, it does seem to be fairly straightforward. I'm thinking how to handle this as the popup will automatically change position based on where it will fit within the map container (top, topright, right, etc.). For circle markers you just want to set a radius offset. For the traditional pin marker it's more tricky.

[jfirebaugh]

@andrewharvey Good point. Maybe the option value could support both a single number or an array of numbers for offsets when the popup appears to the [top, right, bottom, left] of the anchor.

[neore]

Hi Everybody !
An happy option could have [center] to place the anchor at center of Popup.

[andrewharvey]

@andrewharvey Good point. Maybe the option value could support both a single number or an array of numbers for offsets when the popup appears to the [top, right, bottom, left] of the anchor.

@jfirebaugh I've had a go at implementing this, let's discuss over at #2906

[lucaswoj]

Rebasing and preparing to 🚢 in #3058 🎉

[therobwatson]

EDIT: the following hack can produce the unwanted result of making the popup rapidly flip between being above and below the marker. Back to the drawing board!

Here is @cvn 's idea without using jQuery (adapted from @cyprianos 's idea in issue 2848 :

var popupContent = document.createElement("div");
popupContent.innerHTML = "<p>Hello World</p>";
/* if using a vertical marker like a standard map "pin", do not specify an offset
(using a class below instead, "eventMarkerVerticalOffset"). Mapbox offset only
supports offsets like the element triggering the popup is a circle of some sort.
That is, vertical (call it north, "N") offset "works", but NE, E, SE, S, SW, W,
and NW offsets are messed up for your standard vertical "pin" marker */
this.popups.push(new mapboxgl.Popup({ offset: 0 })
    .setLngLat(feature.geometry.coordinates)
    .setDOMContent(popupContent)
    .addTo(e.target));
// append a class for a specific vertical offset
popupContent.parentNode.parentNode.className += " eventMarkerVerticalOffset";

And then in the CSS, specify a parent wrapper div (e.g. "div.hello-world-mapbox-map") in order to override Mapbox's CSS, if needed, and apply the vertical offset you wanted to the "anchor-bottom" element.:

div.hello-world-mapbox-map .mapboxgl-popup-anchor-bottom.vehicleMarkerVerticalOffset .mapboxgl-popup-tip {
	margin-bottom: 90px;
}