Modify mapping-template based on leaflet.js & bootstrap
€30-250 EUR
En cours
Publié il y a plus de 10 ans
€30-250 EUR
Payé lors de la livraison
I have adapted a mapping-template (original file: [login to view URL]), added some new features and updated the sources. You can see the result online on [login to view URL] (or see source-files included here on freelancer.com). I do now need some modifications on that template that require jQuery coding.
Tasks:
1. actually the [login to view URL] source is included by CDN. The app must work offline, so the source must be included locally. For some strange reasons the map-markers don’t show up if Leaflet is included from a local source although it's a identical file. Please debug.
2. Actually the maptiles are loaded from a server. I want the final map to work offline so maptiles will be stored locally. Please adapt the code so that the maptiles get read from a local source (will provide the file to you when project is assigned).
3. The markers on the map are loaded dynamically from a CSV-file. If you type e.g. „Hotel“ on the searchfield on the top-right, the markers for hotels are listed in a div and can be clicked -> map gets centered on respective marker.
This works great, but I want to make work on touchscreen-devices without the need of typing. For that reason I included a dropdown menu with actually 2 values (will be more at the end). I need now a custom jQuery-code that includes the dropdown-preselection into the searchfield. So: Click dropdown -> click „Hotel“ -> the term „Hotel“ is included in the searchbox -> all Hotels get listed -> navigation to single Hotel.
This could be done by custom jQuery OR eventually with the „select2“ plugin: [login to view URL] up to you to decide which solution works better.
4. Actually in the CSV there are included 2 "types" of markers: „Hotel“ and „Seilbahn“ (cable-car). The „type“ is specified in the first line of the CSV file. I need some jQuery code that reads the type and then assigns different markers to them. So e.g. „Hotel“ gets a green marker with icon A and „Seilbahn“ a red marker with icon B.
Markers shall be defined by the „Leaflet.awesome-markers“ plugin ([login to view URL] - works with font-awesome). It must be possible to define more than just two types of markers (at the end, there will be up to 10 different types).
5. I want to show up GPS-Tracks on the map. I want to be able to include a GPX-Track directly using the „[login to view URL]“ plugin: [login to view URL] .
6. Actually, the map-center and zoom-level are set dynamically to show all markers imported from the CSV-file. I need a js-code that checks if there is a GPX-Track loaded and if so, it centers the map on that GPX.
All needed sources are included into the project folder. You’ll find working examples and code snippets on the URLs provided in the project description above. The tasks shouldn’t need experience with web-mapping libraries, but good experience with custom jQuery coding. Thanks in advance.