Build a Website

Cerrado Publicado hace 7 años Pagado a la entrega
Cerrado Pagado a la entrega

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.

CSS HTML JavaScript Diseño de sitios web

Nº del proyecto: #10123431

Sobre el proyecto

20 propuestas Proyecto remoto Activo hace 7 años

20 freelancers están ofertando un promedio de €300 por este trabajo

mituld

Hi I work towards providing reliable, relevant and robust IT solutions at most competitive prices to my customers. I ensure 100% customer satisfaction so lets start Thanks

€257 EUR en 12 días
(336 comentarios)
7.9
JinNg

Hi, My name is Jin. I have over 20 years of experience working in IT. Over 10 years in Australia as a contract programmer for companies like NAB, Bosch, etc. I am now based in Malaysia. I have extensive exper Más

€250 EUR en 5 días
(50 comentarios)
6.7
Ajayphphelp

there is two main thing in this proposal 1-its not auto bid 2- this is not final budget we need more clearifcation than we can provide final budget or may be this will be final budget sir i follow your description p Más

€250 EUR en 10 días
(99 comentarios)
6.3
AwaisChaudhry

Hi there! I have read what you exactly need, however I would like to ask you a few questions. I would call myself a master of what I do, I do work smart and do not rest until I get the job done. Please feel free to pin Más

€144 EUR en 3 días
(35 comentarios)
6.3
stdhtelkom

Hello, I am very interested. I can help you and complete it as what you want. Develop with clear code and safe. Looking forward to working with you. Thanks and all the best, Steve

€250 EUR en 10 días
(22 comentarios)
5.7
FRConsulting

Thanks for considering me. I've read your spec and am confident I can deliver you what you want. I've got the right kind of mindset for this type of thing. I think you'll be happy with what I can do. I've listed I'd Más

€250 EUR en 14 días
(6 comentarios)
5.3
giritech

Hello, I have taken a detailed look at the job specifications. I have well experience in this field of 5+ years. Here are few of my recent HTML + Mobile Responsive Websites Projects: I am expert in the fie Más

€200 EUR en 3 días
(53 comentarios)
5.2
technologiesblue

Hello Sir, I have gone through the details of your project and I’m very much interested in your job posting. I have excellent encounter in graphics designing, logo designing and banner designing. I have excellent com Más

€210 EUR en 5 días
(45 comentarios)
4.9
pinaliv

I have experience with HTML, PHP, Website Design, eCommerce, Wordpress, PSD to HTML,Payment gateway work. I can show you my work as sample if u intrested. 5 Reasons why you should hire me for your custom website and Más

€277 EUR en 10 días
(23 comentarios)
4.8
cristian43

Hi while I can tell you I have 9 years of work experience on my own projects, I can safely say that I can do you a HTML/CSS site in days done with great design. Contact me to begin work!

€888 EUR en 3 días
(0 comentarios)
0.0