HTML5/SVG and JavaScript - map of Mediterranean islands served by ferry from Naples
- or -
Post a project like this2542
$$$
- Posted:
- Proposals: 5
- Remote
- #1542094
- Awarded
Description
Experience Level: Expert
Estimated project duration: 1 - 2 weeks
Note: this is not a website, it is just a single element within a page that will be part of a bigger site which is already covered.
A client of mine wants a map of specific Italian islands which must be selectable. We need a simplified version of the attached Google map, showing only the outline of Italy, Sicily and the islands (some of which are not visible because they are very small).
Whether visible or not, each island should have a label and a checkbox, and should be located at their approximate position on the map. The map needs only to work on screens larger than 1100px width, mobile is covered in a different way. I have attached a very crude example of what I mean (it needs to look A LOT more refined than this though!).
The following islands should be included:
Southern islands:
- Alicudi
- Filicudi
- Lipari
- Panarea
- Salina
- Stromboli
- Vulcano
Northern islands:
- Capri
- Ischia
- Procida
- Ponza
- Ventotene
Functionality-wise: a user clicks on the checkbox of an island and that island becomes selected. He/she should also be able to deselect islands too. Once the user is finished selecting the islands they want to visit, there should be a button which, when triggered, logs all the selected islands (and their respective unique IDs) in the order that they were selected to the browser console. And that's all - further integration will be done on our end!
So what I need from you:
1. A simpler version of the attached Google map, similar to (but better than) my example. I.e., just the outline of the country and islands, no labels on anything except the islands and the city of Naples, which should not be embedded into the image.
2. Correctly positioned checkboxes and labels for each island (labels should be editable in the code), toggle select/deselect on click.
3. A submit button with console.log function for selected islands.
The attached crop from Google shows roughly where the top and bottom of the map should cover (i.e., just above Formia and just below Sicily, so that all of Sicily is included). To the south, east and west of this can just be sea (no need to include any other countries like Tunisia).
The client doesn't want to go with a Google map as the details within the islands and within Italy is not really important. Only the position of the islands and of Naples. You can use a solid colour for land and another for sea. E.g., green for land and blue for sea.
Feel free to use any existing plugins, libraries, etc., and I'm open to any suggestions that would make this more user-friendly.
I am happy to discuss this in more detail if anyone has any questions. It may help other applicants if you can post your questions below as I can then answer them publicly.
Knowledge of Italy and the islands would probably help.
A client of mine wants a map of specific Italian islands which must be selectable. We need a simplified version of the attached Google map, showing only the outline of Italy, Sicily and the islands (some of which are not visible because they are very small).
Whether visible or not, each island should have a label and a checkbox, and should be located at their approximate position on the map. The map needs only to work on screens larger than 1100px width, mobile is covered in a different way. I have attached a very crude example of what I mean (it needs to look A LOT more refined than this though!).
The following islands should be included:
Southern islands:
- Alicudi
- Filicudi
- Lipari
- Panarea
- Salina
- Stromboli
- Vulcano
Northern islands:
- Capri
- Ischia
- Procida
- Ponza
- Ventotene
Functionality-wise: a user clicks on the checkbox of an island and that island becomes selected. He/she should also be able to deselect islands too. Once the user is finished selecting the islands they want to visit, there should be a button which, when triggered, logs all the selected islands (and their respective unique IDs) in the order that they were selected to the browser console. And that's all - further integration will be done on our end!
So what I need from you:
1. A simpler version of the attached Google map, similar to (but better than) my example. I.e., just the outline of the country and islands, no labels on anything except the islands and the city of Naples, which should not be embedded into the image.
2. Correctly positioned checkboxes and labels for each island (labels should be editable in the code), toggle select/deselect on click.
3. A submit button with console.log function for selected islands.
The attached crop from Google shows roughly where the top and bottom of the map should cover (i.e., just above Formia and just below Sicily, so that all of Sicily is included). To the south, east and west of this can just be sea (no need to include any other countries like Tunisia).
The client doesn't want to go with a Google map as the details within the islands and within Italy is not really important. Only the position of the islands and of Naples. You can use a solid colour for land and another for sea. E.g., green for land and blue for sea.
Feel free to use any existing plugins, libraries, etc., and I'm open to any suggestions that would make this more user-friendly.
I am happy to discuss this in more detail if anyone has any questions. It may help other applicants if you can post your questions below as I can then answer them publicly.
Knowledge of Italy and the islands would probably help.
Julian P.
100% (25)Projects Completed
22
Freelancers worked with
19
Projects awarded
80%
Last project
3 Jun 2020
United Kingdom
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
Hi Julian, please let me know if you have a limited budget. we can discuss further if you are still interested
-
Isn't this the second or third time this job has been posted? I believe we even discussed it a little before. Why didn't the work move forward previously?
395875395557
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies