Build a Website

Annotated map tool. The page should allow you to add markers (red circles) over a map. The map is an image shown behind a canvas as a CSS background and not part of the canvas itself. Once you press the "Start Recording" button moving the mouse over the map should draw a marker as a cursor under the current position of the mouse. The marker is a red circle. If you click on the mouse while hovering over the canvas it will pop up a form asking for a label for the marker. It then draws a marker on the canvas at that position and draws a line from the previous marker to it. (You will need to store the x and y coordinates of the marker along with the label). When the form pops up, the test field should be automatically selected so that the user doesn't have to click on it to select it in order to be able to type in it. To dismiss the form the user should either click on the "Save" button or press return. Note: Pressing Start Recording again will clear the current markers and start again. Clicking on the play button will clear the screen and start drawing each individual marker in turn with a slight delay after each one. For each marker you must draw a line to the previous marker and also temporarily display the label that was stored with it (If there was no label for a particular marker then you don't show the label box). The position of the label is based on the position of its marker. The label should disappear slightly before the next marker is drawn. The label is positioned so it has the maximum room to display its contents within the bounds of the canvas. Its position will depend on the position of its marker. If the marker is in the top half of the canvas then the label is positioned beneath it. If the marker is in the bottom half of the canvas then the label is positioned above the marker. If the marker is on the left hand side of the canvas then the label is positioned to its right If the marker is on the right hand side of the canvas then the label is positioned to its right (and vice versa) While the playback is in progress you must disable the other buttons on the page so they can't interfere with it. They will be enabled again when the playback is finished. Every time a marker is added to the canvas you should add an entry to a list of markers on the page (using DOM scripting). The list shows the details of the marker that was just added. The x coordinate of the marker The y coordinate of the marker The label of the marker The label for the marker should be in a text field so you can edit it. Any changes you make to the label in the text field should automatically be stored as the actual label. It should also add controls that allow you alter the list of markers. A button to move the marker up the list (i.e. to swap position with the entry before it). A button to move the marker down the list (i.e. to swap position with the entry after it). A button to delete the marker from the list Any change to the onscreen list should change the actual data you have stored for the markers (including their order). Every change you make to the list (changing the order of markers, deleting a marker) should be shown on the canvas. I.e. you redraw the markers and lines to illustrate the current list of markers. Changes to the label don't have to redraw the markers on canvas as you wouldn't see the labels but the changes can be seen if you replay the animation. Note I: If you press the "Start" button again then the list should be emptied so it is ready to start again. Note II: In playback mode the control buttons mentioned above should also be disabled.