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:


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.
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?
It is indeed possible to detect the center of the circles by various image processing techniques.

For example, convert to grayscale, apply dilation until the edges disappear, then connected components and compute the centroids.

But this only gives you points, in no specific order, and this might be of little help to you. 

It is possible to match the new map against the old one, match the circles, to transfer existing info, but you'll have to check the correct transfer "by hand", anyway.



I wonder why this should be done in JavaScript, as I think that this is an offline operation.