HTML A* Path Finding

I have a map and need to find the best path to take with the given coordinates. The map will need: int xCoordinate; int yCoordinate; bool isWalkable; On the map the water is not a walkable tile, the while walls are not walkable. I will need a way to be able to select not walkable tiles so they can be stored so that each time I use the website it already knows which tiles are walkable and not walkable. How it functions. You click the map and it sets the start location. You click the map again and it sets the finish location. After the system has the start location and finish location there should be a button to find path which shows the path which displays a line as shown in the images. I also need an output box like the one shown in the reference image point diagram.png. The output box will need to calculate a point after 30 squares. The mouse cursor will need to be a square box which will be highlighted Yellow so show where the cursor is located. The cursor will need to snap to the closest square tile. I will need a output box that shows a given square region like this reference. [login to view URL] I have the reference map that needs to be used but is too large to send as it is over 25 MB. Reference [login to view URL]