Egidius Egidius - 1 year ago 239
Javascript Question

MapBox GL JS marker offset

I'm using MapBox GL JS to create a map with a custom marker:

var marker = new mapboxgl.Marker(container)

However, I seem to have some kind of offset problem with the marker. The thing is: when zoomed out a bit, the bottom of the marker is not really pointing to the exact location:

Marker when zoomed out a bit

When I'm zooming in a bit further it reaches its destination and it's pointing to the exact spot.

Marker when zoomed in

I really love MapBox GL, but this particular problem is bugging me and I'd love to know how to solve it. When this is fixed my implementation is far more superior to the original mapping software I was using.

Answer Source

I've found an solution to my problem. It might be somewhat hacky, but it solves the positioning problem of the marker: I'm using a Popup fill it with a font awesome map marker icon and remove it's "tooltip styled" borders:


map.on('load', function() {
    var container = document.createElement('div');
    var icon = document.createElement('i'); = city;

    icon.addEventListener('click', function(e) {
        var city =;
        var country =

    icon.classList.add('fa', 'fa-map-marker', 'fa-2x');

    var popup = new mapboxgl.Popup({
            closeButton: false,
            closeOnClick: false


.map div.mapboxgl-popup-content {
    background: none;
    padding: 0;

.map .mapboxgl-popup-tip {
    display: none;

I just hope someone comes up with a real solution, because this feels kinda dirty to me. But hey: it does the job just fine!