This project was bespokely built and takes advantage of using JavaScript to manipulate attributes of an SVG html tag. A source SVG from Wikicommons Media was used as a template for the map, but it had to be deconstructed manually so province data was able to be displayed.
- Clone this repository
- Simply open index.html on a browser and the project will load
- Map legend interactivity - jQuery.hover():
- Hover function used to interactively light up the map legend when the mouse is over a region. CSS transition property used for smooth transitions.
- Map interactivity - jQuery.hover():
- Hover function used with this key word to target the specific province (element) in the region (nodelist) using forEach loop. This gives the appearance that the user is focussed on a specific region, coupled with the generation of a tooltip which displays the name of the targetted province.
- Full demo of interactive map project
- The user can click on any region/province to generate basic information about that area. They can then further click the widgets to initiate a google search regarding weather, accomodation, restaurants, shopping centres or landmarks