mapbox/mapbox-sdk-js

Offset custom marker in a static map

greenafrican opened this issue · 0 comments

It would be great if we could provide an offset for the custom markers. Something like:

client.getStaticImage({
    ...
    overlays: {
        coordinates: [18, -33],
        url: "../../customPin.png",
        offset: [0.5, 1]
    }

This would help when we use a custom pin or flag or something where the bottom-centre point should mark the location.

As a workaround, I currently use this to offset the latitude coordinate:

// From https://stackoverflow.com/a/30773300/1177562
const metersPerPixel = (latitude: number, zoomLevel: number) => {
  const earthCircumference = 40075017
  const latitudeRadians = latitude * (Math.PI / 180)
  return (earthCircumference * Math.cos(latitudeRadians)) / Math.pow(2, zoomLevel + 9)
}

export const getLatitudeDegreesOffset = (latitude: number, pixels: number, zoomLevel: number) => {
  // https://gis.stackexchange.com/questions/2951/algorithm-for-offsetting-a-latitude-longitude-by-some-amount-of-meters
  return (metersPerPixel(latitude, zoomLevel) * pixels) / 111111
}