enter image description here

The drawing and the measures above shouldn't be taken seriously, but they might help illustrate what I am trying to achieve.

I have an interactive map being displayed inside an HTML canvas, the map can be moved around and zoomed which makes its bounding box change. The canvas provides me WIDTH and HEIGHT and I also have access to the map bounding box information such as north/east and south/west coordinates.

What I'd like to do is to find the bounding box in the map of a given inner rectangle of known width, height, top and right in pixels relative to the canvas.

I am using JavaScript and mapbox-gl, but I am glad to hear solutions in math or other languages.

Edit: the y and x in the drawing are actually top and right respectively.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.