Mapbox GL JS custom marker offset

Question

I have made a map with a custom marker, following this Mapbox tutorial. https://docs.mapbox.com/help/tutorials/custom-markers-gl-js/

Somewhere in this code, I should be able to adjust the offset of the marker, because the marker simply isn't placed on the coordinates.

var geojson = {
  type: 'FeatureCollection',
  features: [{
  type: 'Feature',
  geometry: {
  type: 'Point',
  coordinates: [31.442553,31.656087]
  },
  properties: {
  title: 'Diametta, Egypt',
  description: 'Horus Academy'
    }
  }]
};

var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/torkjellt/ckdpx4l7r0n5c1inwgw0pl1pq',  
location
center: ([30.71, 30.41]), // starting position [lng, lat]
zoom: 5 // starting zoom
});

geojson.features.forEach(function(marker) {
var el = document.createElement('div');
el.className = 'marker';

new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({ offset: 5 }) // add popups
.setHTML('<strong>My spot</strong><br>Egypt'))
.addTo(map);
});

Any ideas on where to adjust the offset?

Steve Bennett Steve Bennett · Accepted Answer · 2020-08-13T00:52:56

The value offset should be a PointLike, so an array:

.setPopup(new mapboxgl.Popup({ offset: [0, -5] }) // 5 pixels upwards

Mapbox GL JS custom marker offset

1 Answers