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

Question

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?

Answer 1

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.

Answer 2

You can use this option for detect the circles, also I can see a lot of circles, are you interested in all of them?