Create interactive map

Design help Animations & Interactions
#1

Hi,

I have been asked to create an interactive map which is similar to this https://www.drmprefab.com/case-studies.

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.