Graphically display a path/route on a browser

I’m trying to graphically display a path/route on a browser for clients to see. For example, based on a txt or XML file, directions are included.




for a simple txt file equivalent.

In this example, the route would be to move forward 4 units, turn left 90 degrees, move forward again for 5 units, turn left 90 degrees and finish with moving 2 units forward.

enter image description here

Something like this. Arrow heads don’t have to be there, I just drew them on for clarity of direction. It will be even better if I can dynamically change the image, like being able to display the vehicle that is following this route, and perhaps even changing the color of route to green when the vehicle has followed and completed part of the route.

I’m thinking of using Tomcat with java and jsp with javascript to do this, but if there are simpler alternatives, I wouldn’t mind. Are there any tools around that I could use in my case? I haven’t done anything close to this before, so please help!


  1. Learn How to Read .xml file to jsp through java – google search MVC pattern, return the data objet to jsp page

  2. Learn how to draw arrow using <canvas> : see good reference

Leave a Reply

Your email address will not be published. Required fields are marked *