CODEWITHSUNDEEP
ajaxmappingmapszooming
Mayank
Mayank

Reputation: 8852

How can I make a google maps like interface

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

Upvotes: 0

Views: 417

Answers (1)

Corbin
Corbin

Reputation: 33447

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 500x500, 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.

Upvotes: 1

Related Questions