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.

enter image description here

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?

  • $\begingroup$ 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? $\endgroup$
    – Rengas
    Commented Jul 3, 2015 at 4:15
  • $\begingroup$ 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. $\endgroup$
    – Jonathan Allard
    Commented Jul 3, 2015 at 13:30

2 Answers 2


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.

enter image description here

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


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


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.