How to make an interactive svg map with your wordpress design?

Question

Frontend

The question arose, there is a map drawn by the designer in figma, while it is exported as a picture.
The question is how to make it so that when you hover over the yellow piece of the map, the title, text and link to this branch change below the map, all branches are made as custom posts in wordpress?
Photo:

Is it even possible to implement this on Wordpress?

Answer 1

1. https://www.youtube.com/watch?v=6C-GYwxdZd4
2. then add a date attribute to all svg elements, for example: data-name="saratov-ook-alekseev"
3. Add a hover handler (with a slight delay) take data-name from path and send ajax request to get the post
4. Draw the post

Answer 2

Perhaps, I don’t know how to do it myself, but the map should be immediately divided into areas of SVG format, and at least the layout when clicking on the area should also be.

Answer 3

Hello!
There is a ready-made plugin for the VP
https://ru.wordpress.org/plugins/html5-maps/
At the office. on the company's website, you can order a card or purchase a premium version - https://www.fla-shop.com/