-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add popup offset option #1962
Comments
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. |
You can create an offset with CSS.
|
@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. |
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. |
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). |
@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. |
@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 |
Hi Everybody ! |
@jfirebaugh I've had a go at implementing this, let's discuss over at #2906 |
Rebasing and preparing to 🚢 in #3058 🎉 |
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;
} |
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).The text was updated successfully, but these errors were encountered: