Show user's location on image map

Question

I'm working on a website now for a neighborhood. They have a drawn map of their community that is simply a .png image. I can get the users lat/lon, how can I place a marker on the map showing the user their general location? Basically, when the user hits that page, I'll show the .png image of the map but want to overlay another market in their general location.

Thanks!

Answer 1

If you don't want to use Google maps, then you will need the coordinates of some points from the image. Ideally if you know the coordinates of the top left and bottom right points of the PNG image then you can consider that the earth surface is a rectangle. Since this is a neighborhood then the error will be unnoticeable. Then you can easily convert coordinates into percentages of the image height, width.

For example if:

• the top left corner is 42.685085,23.321373
• the lower right corner is 42.68029,23.329784
• the image width is 1000px and the image height is 1000px
• the the user is located at: 42.683571,23.324978

Then you can easily do the math - your pin needs to be placed at: [31.57455683%, 42.8605397693%], provided that top left is [0%, 0%] and bottom right is [100%, 100%]. This means that in this example the pin is pointing [316px, 429px].

It is very important that you have the coordinates of the top left and bottom right corner of the image so that you can calculate the positions accurately on this improvised map. Also it's very important that the sizes of the objects on the map are the same proportions as the real objects - otherwise although your calculations are correct, the pin may seem as if it's misplaced. You cannot do much if their map is totally wrong.

Tip: You can make their map semi-transparent and place it over google maps or some other map of the same area so that you can see if roads and buildings match. It would be waste of time to try to do it with a wrong map.