- Request Map Base preferably (SVG) format. (no hover interaction design)
- If JPG convert to svg and clean the image
- After clean (edit svg with notepad)
- Copy the whole content(html elements) of the SVG paste to the Visual Studio Code app.
- Run SVG to Chrome
- On Chrome, Select the path using F12 target them and checked if the correct path (add CSS > ex. fill:red)
- When you got the path, paste it on another pad like notedpad/sublime
- Check the path to basically add the <a> tag on the first <path> then add also the class inside the <path>
- add closing link tag on the closing <path>
- after editing/adding the link tag and class copy all elements.
- On Elementor page add HTML widget and paste the elements to render the map with the hover color and link function.
For more details, watch also the video here
sample site with map (mercy house)