How to convert pixels into the map coordinate when calling easeTo() in mapbox

Question

I am developing an interactive map in HTML+JavaScript using mapboxgl (0.33.1). When the user clicks a button (which is associated with a particular location in the map), I call easeTo(), which put that location in the center of the map.

  window.map.easeTo({
    center: item.loc
  });

Because my application has some overlapping UI over the bottom half of the map, I actually want to put that location not in the center of the map, but in the center of the top half of the map (25% from the top).

I'd appreciate if somebody could give me a hint how achieve it. My app knows the exact sizes of the window in Pixel (and also the zoom level), but (I assume) I need to convert it into the map-coordinate (from pixel) to add an appropriate offset to the "center" parameter I pass to easyTo() function.

Satoshi Nakajima Satoshi Nakajima · Accepted Answer · 2017-05-09T23:26:50

I think I found the answer. I just need to call the project() method -- which was very hard to discover!

How to convert pixels into the map coordinate when calling easeTo() in mapbox

1 Answers