Question

Hi I want to create a google maps like interface from very high resolution maps. eg. 11k x 11k resolution. My goal is to be able to pan/zoom and put pins on desired locations on the map. I was able to implement zooming/panning of the image using mapbox plugin. my question is how to place a pin on (x,y) location on image and keep the pin while zooming in/out.

Thanks

Answer 1

The easiest way would be to treat the entire image as a 11k by 11k grid with (0,0) in the top right corner. Then, the pin would be located at (x,y). Then, when you scale the image, you treat the new view as a subset of the main grid.

For example, it may start at (5000, 3500) and be 500 by 500 pixels. Then, if the pin is in those coords, you calculate where to place it.

Let’s say you have two pins: {(5230, 3550), (5400, 3700)}.

Now, if your zoomed on 5000, 3500 and the view port is 500×500, your pins real locations are:

{(230, 3550), (5400, 3700)}

The way you’ll need to do the translations exactly will vary on how exactly your handling zooming/panning, but that should be the general idea.