Building an Interactive SVG Map in Webflow

In this tutorial, we'll learn how to make only the direct path of an svg hoverable and clickable. We'll use my new Wizardry jQuery Builder to create interactive hover states and a few unique Webflow interactions to tie it all together.
Get my jQuery builder at wizardry-techn...
Find the cloneable for this project at webflow.grsm.i...
Join my Webflow Wizards Community
/ timothyricks
Try Webflow using my affiliate link below.
webflow.grsm.i...

[@ThatWebflowGirl]

I don't think I've ever left a comment on any KZbin video before, but after watching this I am just in awe. I think I found gold.

[@MoazamHussain]

I barely leave comments on videos but I haven't been this excited to watch tutorials since the early days of learning design. This is hands down the most valuable content I have come across, ever! Thank you, and please don't stop making these videos. You're awesome!!

[@timothyricks]

This is so awesome to hear! Thank you!

[@qminlee225]

Timothy our project was halted for around 2-3 months because we couldn't find anyone on upwork to create an interactive map where you can click into the areas without it picking up the boundary boxes as squares. You solved this in a 20 minute video and now I can do it myself. Thank you so much. Your content is truly valuable.

[@StevenT2]

After much searching how to create interactive SVG, this is it! Thank you for the tutorial.

[@getverve]

This looks so slick with the background gradient! But I needed an interactive Google Maps map - found out there is a new fancy Webflow tool for that called Dynamic Map by No Code Flow!

[@Vimalanvijay]

Thanks for these pro tutorials Tim! Really gives me a lot ideas that extend Webflow. Appreciate it so much! :)

[@timothyricks]

So happy they’re helpful

[@system2213]

I consider myself an advanced Webflow user but you just blew my mind. The whole SVG code thing is so powerful and I never realised how easy it is. On top of that, your tutorial style strikes the perfect balance between speed and detail. You waste no time in getting into it and cover everything important. Thanks for the awesome content! Subscribed!

[@Lorenzo-cl6uu]

TIM, those are the best advanced webflow tutorial that I've seen. Please keep going, it's always a pleasure to see that you just uploaded a new video 👍🔥🚀

[@juliakabelka5778]

You really make our life so much easier. Thank you for your absolutely great content!

[@bedakpurol]

Super! Saved for future training! Many thanks for these pro tutorials. Highly appreciated. Cheers from Bali

[@eddiewhatson1800]

Well done Timothy, some really class tutorials you're putting together here. Keep it up! 🙌

[@jwray2k]

Immediately subscribed after watching just a few minutes of this video! It's so incredibly helpful! I'm really looking forward to trying out some of the techniques you taught in this lesson! Also, the official Webflow Tutorials are already awesome - but your videos take it to the next level! Cheers man! Great content!

[@cody2470]

This is awesome Timothy, thank you so much. I have a major project I'm yet to start due in a month, but you're giving me so much inspiration!

[@TallyhoScreams]

Really great content. I'm subscribing. It's clear and concise and made it easily digestable while covering in-depth topics. And what a cool tool you made. Great work.

[@LolaOpheliac]

Bless you so much for this, I'm very new to webflow (and coding) and your videos are so helpful.

[@coreymoen]

Stellar work and props for a great example of using your new JQuery builder tool in the process and showing how you can layer together custom code and interactions for a completely experience! 🎉 One suggestion...would love to see you consider accessibility in more videos. For example, on this one you could drop all map link blocks into a list element for screen readers to know how many items there are, plus also adding sr-only text in each state to read the names out for screen readers! 👍

[@timothyricks]

Thanks so much, Corey! I definitely appreciate the pointers

[@bryanmanio_]

This is some next level stuff.

[@Wildenfree]

Man you are on Fire T.Ricks! 🤯🥵🔥🔥🔥 incredibly valuable content man, thank you for this! I’ve been considering joining your Patreon when the timing’s right for me, & this is only making want to get on board even more! I can’t wait to dive in soon & really start applying all this! 🙏🏾🙏🏾🙏🏾

[@timothyricks]

Thank you so much! I’m glad these have been helpful! I’d love to see if you get a chance to use this concept in a project.

[@Wildenfree]

@@timothyricks I'm definitely already thinking about an awesome use case! It may take me a while to implement it & get it live since it's a completely new project / industry I'm thinking of stepping into along side of everything else I do, but I'm excited to add this type of functionality to the user experience! I will definitely keep you posted when I do!

[@karlmoyse3117]

This is awesome Timothy! Will be using this as a baseline for a similar project. Subscribed and looking forward to new content!

[@yeseniajulloa8953]

I think I love you. I've been struggling with this forever!

[@salmansalahuddin4870]

You are awesome man. I could never think of this.

[@connorwatkins377]

perfect turoital, this helped me so much on my project, thank you!

[@seochon]

amazing guide! Thank you Timothy

[@susanrainey9694]

This is brilliant - thanks so much for all your great content!

[@qrtois]

Totally nailed!

[@andreasdemou2836]

Thank you so much for these awesome tutorials Tim! Please do a video explaining the TSE website Vision & Values interaction map!

[@timothyricks]

Thank you! I did a tutorial for it while back. kzbin.info/www/bejne/iqikda2op5ebfKs

[@andreasdemou2836]

@@timothyricks Ohhh! Thanks man you are the best!

[@jpponline1]

Really cool. Advanced for sure!

[@elmedin26]

Are you a human? This is an awesome tutorial. I was 24 and 21 seconds like ... “WOW! This guy is awesome!” Just WOW and THANKS!!!

[@timothyricks]

Hahaha, thanks so much for the kind words! Happy to help!

[@elmedin26]

@@timothyricks You’re welcome! I love your work!

[@user-vy1id4uh7y]

OMG!!! Thank you👍💛 Tutorial is amazing

[@avelinileva]

Looks amazing! Thank you for this great video

[@gabrielmazor]

Thank you. Keep doing great videos!

[@JasonBrashares]

Non-stop amazement.

[@radoandriamahatana686]

Thank you for your amazing tuto!

[@cweb1988]

woah....I need to download your knowledge into my brain.

[@deluxestockholm6123]

My vote for your next video is how to use webflow with GSAP Locomotive smooth scroll and sticky elements :)

[@Raj-xn6rg]

Great video

[@JesseShauffer]

Now we can do circles!

[@garyvoigt321]

Straight Wizardry.

[@konohadesign1471]

Dude, so cool!

[@JoChunYan]

HI Tim - amazing tutorial!! What is the reasoning behind adding your css code to an embed block (main-embed) rather than adding it to the page code area? Your videos are a wonderful resource for the community!! Learning so much!!!

[@Sergy_Kondrashin]

Magic!

[@ahmedlabib6066]

It's totally amazing! How to did to manage all that your are such a pro and my idol, i want to try that could you reshare the clonable previous not working, thanks ❤️

[@listentoAdamTaylor]

Gold!

[@romainverjus]

Quality content!

[@emejorkenneth2638]

Thanks 😊

[@crossx100]

Thanks for all these, Tim. Quick question , how about using Anime.js in webflow. Would be great if you could show us how.

[@bianchidy2158]

Hi Timothy, this tutorial was super helpful in making my own interactive SVG map - kudos to you on the clear explanations! One thing I'm struggling with is how to ensure the base map scales to smaller/larger screens. I'm already using 'em' units to scale my base map, and this applies to the individual state SVGs as well - but whenever I move to mobile screens, the base map and the state paths are no longer aligned (although they are on the average 13 inch default view). Any ideas as to what might be the issue? Again, thanks for the great explanation and for making it simple and easy to understand with the jquery builder too.

[@juerfe]

did you solve this? facing same issue here

[@oladhagerson819]

you are a genius

[@HunterReynolds]

Could you share how we could make this integrate with state-specific CMS pages? Each state would act as a link and would go to its respective CMS page. This would be awesome!

[@heyderekj]

Yes! I immediately was wondering how this could be replicated but having a CMS collection called states with all the information you needed.

[@joaquindebrito14]

You are the best!!!

[@patrickurwyler]

Real Pro!

[@mansoornaderi7400]

Great content!! I was just wondering how can I put an ease out animation when the different names of states change.

[@powerfilms8130]

Every single svg i uploaded in text editor, by entire map or by single state, gave me a code over 1000 characters, which webflow does not take. What's the solution?

[@elchinhuseynli8876]

Great tutorial, Tim! One question: Why do we need links blocks to be manually placed inside a map? Did you consider another way of doing it by placing one big SVG map (embedded) and adding classes inside siblings’ path id?

[@timothyricks]

Thank you! Yes, that was my first attempt, but the code character count exceeds Webflow’s limit.

[@om14796]

could be done. But maybe he wants to add a link to every state that does something on click..

[@jgmedia7961]

Hey Tim, when's your course coming out? God Bless You.

[@timothyricks]

Thank you! I need to start working on it

[@Abhimabi]

How to add a store locator as per zip code in webflow?

[@lieugene1553]

Hi may i know how do you change the colours of the words of the target class "location", lets say for the word Texas i want it red then for Florida i want it blue. What do I have to do? And how do I remove scroll from the page

[@JuliaPiper-by4sv]

Has anyone successfully done this but connected the hoverable 'states' to CMS collection items? I'm so stuck! Is it even possible?

[@gabrielagrygova5133]

Timothy, first of all, thank you for your tutorials as they really help me understand advanced functions of Webflow! However, I´m stuck with the SVG code ( 2:15 ) that exceeds 10 000 characters and therefore can not be inserted into HTML embed code editor. I have tried to copy SVG code from multiple programs, such as Adobe XD, Adobe Illustrator, Corel Draw, but always end up with insanely long code. TL;DR : Any idea how to shorten SVG code would be apperciated.

[@UncutRush]

How could I add links to each part of the map?? \

[@simuls.4812]

Hi, Timothy nice to meet you Would bring a tutorial about sound effect transitioning slides, click the button. I have seen your portfolio. Please It would be appreciate

[@kevintikivik]

Thank you for posting this. Is there anyone here in Quebec Canada who would put to something similar like this together? Send me a message if you want to develop an interactive front and back for your resume.

[@mindfulhealing1005]

would you consider building a beginner and intermediate course please things like em, percent, vw, vp. flex box etc.

[@hareinvestors9689]

Can you do this with wix ?

[@petera4813]

Hello. Are you available for projects?

[@tjarcovanraalte939]

This is awesome, but i'm lost. Checked everything 3 times but can't figure out what I'm doing wrong.. when changing the font size on the map div, only the states scale, not the map image when changing browser size or map-image - only the map image scales, not the states any idea?

[@timothyricks]

I’m sorry to hear that! Maybe make sure the size of the map-image and everything else inside the map are set using EMs and that nothing inside the map container has a font size applied. If it helps, feel free to also compare with the cloneable project. webflow.com/website/SVG-Map?rfsn=4840096.b820eb&

[@tjarcovanraalte939]

@@timothyricks ah that's it, @2:00 the font settings for the map__state change from 1vh to 1em and 1.6em - I missed that, works now - Thanks so much for the quick reply!

[@plugnewyork3415]

Question - do you know how I can get it with the state initials to be displayed on the map like for Texas have the TX visible instead of jus blank?

[@danielomuto]

same question !

[@patrickurwyler]

Hi Timothy. Great tutorial, thanks. Related to your query builder. I made a simple but working function: $('.button').click(function() { $('.box').addClass('red'); }); How could I target item of a collection list in webflow individually. At the moment obviously if I click the button all "box" divs turn red. Any idea how to only turn a specific dynamic item red? I'm sure this is a easy question for you. best, Patrick

[@timothyricks]

Thanks Patrick! If the button is inside the item, you could check “Use Trigger Element” and get the box that’s a sibling or parent of that button. I have a tutorial on that at kzbin.info/www/bejne/jHfZe4NogrCtorM If the button is outside of the collection, you could target a specific box by adding $('.box').eq(1).addClass('red');

[@patrickurwyler]

@@timothyricks Thanks a lot for your answer. I will try the inside the element approach. My collection list is dynamically growing since the items are generated by users on my site. Targeting from outside with fix number is not possibles since Position of the item is constantly changing... let’s see how it goes with the inside parent element solution... thanks again!

[@pedrocassian3159]

available for hire?

[@LaugeMP]

Questioning your method. Why aren't you just importing the svg of the map and give each state of the svg a group and class and target that instead of creating 52 elements absolute positioned. Seems way over complicated than what is needed.

[@timothyricks]

Totally get that! This svg and most with this level of detail exceed the amount of code we can have in one WebFlow embed. We could still overlap multiple embeds, but for accessibility having each map state in its own link block make it possible for users to navigate with a keyboard.

[@hjrdesignltd]

Annoying that the embedd is a paid version - we literally need this for one map and it's more than exceed budget.- wish there could be a one off fee not an annual billing

[@timothyricks]

SVGs can be added without an embed now using the SVG Import App for Webflow webflow.com/apps/detail/svg-import

[@michaellee509]

Hey thank you so much for the awesome tutorials! I'm running into a snag on mine and I'm hoping you can help me out. Instead of changing the location text on the hover I would like to change the text when clicking on a state or country, but it won't work. It works totally fine on 'mouseenter' but when I change that to 'click' nothing happens. I even tried changing the link block to a div because I thought that might be throwing it off but that didn't work either. I'm also trying to change the 'href' attribute of a button with a url that I'm storing in a second custom data attribute when clicking the state, but I can't figure out how to change it. My jQuery is down below. Any help you could give would be much appreciated. Thanks! $('.map-country').on('click', function() { $('.territory').text( $(this).attr('territory-name') ); $('.territory-contact-link a').attr('href', $(this).attr('territory-url') ); });