Create interactive map

Design help Animations & Interactions
1

Hi,

I have been asked to create an interactive map which is similar to this Case Studies World Map.

It would be great to get some advice on the best way to approach this. If a tutorial exists for something similar that would be a big help.

Thanks

2 Likes
2

Hey @sparky

My approach will be using svg elements with some hover effects top display the information.

Piter :webflow_heart:

3

I am also looking for the same thing. Did this ever get resolved?
I have tried using the SVG images layered on top of each other but it did not work?

4

You can do it with SVG or PNG - I think this should work pretty straight forward - I think this is a workaround without using sophisticated JS or SVG animation

Step 1 - create a map and cut it up into pieces that you need to change color on hover.

Step 2 - create a copy of it but with different colored countries,

Step 3 - position all the pieces from Step 1 in a div 1 how you like

Step 4 - copy div1 and rename it div2, and place it on top of div1, replace all the images with ones from Step 2

Step 5 - Animate each pieve with “on hover” animation …

Also, have a look at this CodePen - this can also work for you I think

1 Like
5

Hello IVG,

How do you get the image to only be selectable on the country shape? When I paste my image into Webflow with a transparent background, there is still an invisible square background that is not neccesarily in my image shape that when hovered will still trigger the effect. I would like it so that it only occurs when the mouse is specifically hovering over the image!

Any help would be greatly appreciated.