# How to get the X and Y Coordinates of the circles from an image?

I am building an simple website to show the first train arrival and last train departure timing in Singapore. I already wrote a simple code which could be found here. I am placing an circle on top of each station so when hovered it will display the timing for each station.

Thus far I found the location(X and Y Coordinates) of each station manually added it to the code. But then I just realized that the map I am using is not the latest MRT Map. I don't want to go through the process again waste time for the new map. I am looking for a easy way to do this from the code.

There are two techniques I can think of right now:

1. Find Equations for each Line assuming circle as points.Then place the circle at the x and y coordinate. I understand that one only Harbourfront to Punngol(Purple) line is the easiest because its a straight line. I am not so sure what is the equations for other lines.
2. Use template matching technique. Take a copy of the circle and look for that circle in the whole image and get the coordinates.I understand OpenCV can do template matching but how to do it in JavaScript? Is there any simple JavaScript image library to do template matching?

Any other suggestions?

• Yes! It's a simple pixel coordinate of the image.In this image joon koon is at (79,680) of the image. I am just tagging the image with the info? Can you explain in a bit more detail how to use canvas for this purpose? Jul 3, 2015 at 4:15
• What I understand from your question is that you are looking for a process that takes your image and gives you (X,Y) coords and/or the equation for your lines. In my opinion, that sounds more like digital signal processing.
– Jonathan Allard
Jul 3, 2015 at 13:30