Hi Timothy, it's true pleasure whenever I see that you posted a video and I am sure many other Webflow enthusiasts are as well. Thank you for taking the time to make these videos :)
Incredible work, man! This is an extremely useful video :) I second what someone said in the comments down there, you are adding massive value to the webflow community.
Thank you very much for this tutorial ! it's not only the interactive map but also the fact to create an animation and embed it in an Html embed and link it to the CMS
Oh, awesome! Here’s an updated version that’s setup in a better way thanks to the new custom element. ua-cam.com/video/UJ2kR6z8B9I/v-deo.htmlsi=osp-481-pLXBRpH9
I literally promised my client a map like this before I knew if I could actually pull it off (it had to be possible, right?). Thank you for making this incredible step-by-step!
Nice work Timonthy, Have a question. What if we had to make the location info popup instead of going to a different location page? Is there any way to achieve this?
This is working great for me up until trying to make it responsive... adjusting the font size using VW in the HTML embed just isn't changing anything. Any ideas?
A good idea for a follow-up video might be a simple store locator built in webflow. I know there are some basic tutorials about it on the webflow forum but there does not seem to be a lot of video content about it yet.
For some reason the size of the dots arn't effected when I change the size in the HTML Embed, so I am unable to make the map work for all devices. Not sure if you can help in anyway?
Hey Oliver, what font size are you changing the HTML embed to? Also, are the width, height, padding, and sizes of all elements inside the embed set by using EM?
@@timothyricks I want to change the HTML embed that is inside the collection item, so that the responsiveness works on all devices. however, when I change the size nothing happens to the size of the dot and writing, its as if they are not connected? could it be something with the code?
@@olivernicklin8370 So if it was setup like the tutorial, the embed width and height is based on the height and width of the map image you upload. Changing the size of the map as a whole would be possible by changing the size of the map image. However, the dots are not connected to this size. Their size can only be adjusted by changing the font size of the embed. If it helps, feel free to check out the WebFlow preview link in the video description
@@timothyricks Hi Tim, I experience the same thing with Oliver. I have followed the tutorial step by step. However, when I change the width and height on the HTML embedded, nothing affected the dots. Then, the dots can't work on any devices. I have ensured everything inside HTLM Embedded using EM. Really need your advise
Hey Timothy! Didn't know you could input cms inputs into html embedds! Great tutorial! I'll be binging on your channel I guess (: Greetings from Germany!
Hey Tim! I created the map and seperate pages using the Locations CMS Template, but Im having trouble linking the map dots to the pages. Everytime I try to select the map dot, it takes me to an error page, not the pages from the Locations Template. Any advice?
Am trying to figure out this same thing! Any luck? It seems if I just changed the Map Dot to a regular div instead of a link, and then leave out the specific website/slug, then it doesn't work. I'm guessing because it needs a reference to know where to pull the CMS info from. Not sure how to fix.
I found some trouble when I did the responsive. The dots scale as they are supposed to but they automatically move to the right and there is no evident way to control this. Awesome tutorial, btw
Hi Timothy, is there any way to make the dots so they're not clickable, and they simply hover rather than redirecting you off the page if you were to accidentally click them. I simply want to show my users that we ship from 3 locations, rather than taking them to a page to tell them more about each of these locations. TIA!
It's brilliantly complex 😁. I have question, is there a way to embed html5 Adobe Animate cc project? Let's say, if I develop complex huge interactive like this in animate, and then publish it and embed to webflow, the question is it'll not that responsive to the breakpoints. Is there anyway to control it? Many thanks.
Thanks for the tutorial! I ended up using % instead of EM for responsiveness. One question, I have a lot of dots and the location name sometimes is hidden by other pins. I tried changing the z-index of the location text but no luck. Any suggestions?
@@Wasazitation Yes! you need to add sorting to the CMS collection. I added a # number field and based the sorting on that number. The pins that appear first in the list will have a higher z-index. It's manual work but it does the job.
Hello, there's no need to start from a template, but if you'd like, I have a cloneable of the final design available at webflow.com/website/Interactive-CMS-Map-Responsive-Collection-List
Kevin Palombo - Happydesk Yes, for sure! Even your own hover states, interactions, styling, and elements. Just be sure to use em for all the properties if you want it to scale on mobile.
Kevin Palombo - Happydesk I’m sorry to hear that! Unfortunately, I’m overbooked on projects right now. Are you trying to apply a different size per each map dot? If so, you’d have to have a number field in the collection where you enter the size and then you’d have to pull that number into the map dot html div using the same type of style code we used for the map dots position, but this time you could apply it to width, height, or scale.
Loyal Design Co Thank you! If it needs to be a full screen popup, it would be a little tricky because the collection item is positioned absolute. If it just needs to be a popup that covers the map or part of the map though, that would be easy. Put your popup div inside the collection item, position absolute, and display none. Then create an interaction that on click of the map dot, changes the sibling popup to display block. You could put whatever collection info you want in the popup since it’s in a collection item
Hey T! Congrats to the 10k+ I feel so happy for you!! I wonder if there´s a way to make two different radio buttons with two different colors. I have a client whom would like to put "bookings" as one button, and "prospects" as another botton in different cities. I tried to do this in the CMS but the colors is decided in the designer, not the CMS? Would so much appreciate if you could help me!
Hello, thanks so much! From what I understand, you may be able to use conditional visibility to hide one card and show the other based on a CMS switch.
There should be. Combo classes could be added to those buttons, or they could be styled with inline styles in the html that pull from a CMS color field. At the beginning of this tutorial, I showed how the elements were created and styled in WebFlow. The same process could be followed to create another version before copying the code into the embed
Calorie Report I believe it has a max-width of something like 1100px with flex box to put the two inner divs side by side. Feel free to check out my cloneable for this project if you’d like at webflow.com/website/Interactive-CMS-Map-Responsive-Collection-List
Thanks for sharing this video, it's a great help to the entire Webflow community. Can you please tell me what to do if I don't want the pin to be clickable and I don't want it to point to the CMS subpage? Thank you in advance for your reply.
Sure thing! For the first part of the tutorial where I created the link block natively in Webflow, you would want to use a div instead. That’s before copying the code into the embed.
@@timothyricks Hello Timothy, thank you for your reply, I have changed the link block to a div block, but it didn't help...for some reason it still points to a subpage. Can you please take a closer look at it?
Okay, I have fixed it by removing the 'a href' attribute from the custom code. By the way, I must commend you on your outstanding work and valuable contributions to the community. Thank you for all that you do!
Hey, I don't know if I'm doing something wrong, but the x/y coordinates of the map seem off whenever I input them. I input the lat/long of Paris and the map shows it in the south pole. Have you encountered this?
Konstantinos Doxiadis Hey man! Sorry, I was just about to mention that. The way this is set up, it could work for a map of anything, just not the globe.
Hi Timothy, it's true pleasure whenever I see that you posted a video and I am sure many other Webflow enthusiasts are as well. Thank you for taking the time to make these videos :)
Kao Thank you so much! I love sharing these.
Bro, you are not slowing down with those amazing tutorials :) Thanks a lot!
Incredible work, man! This is an extremely useful video :) I second what someone said in the comments down there, you are adding massive value to the webflow community.
Hi Timothy, this is a wonderful tutorial. Thank you very much for your support!
Thank you very much for this tutorial ! it's not only the interactive map but also the fact to create an animation and embed it in an Html embed and link it to the CMS
This looks so slick! For an interactive and scrollable map with multiple pins we discovered a new Webflow tool called Dynamic Map by No Code Flow ✨
You are so creative and amazing Tim Ricks!
So many amazing uploads in just a short period of time; keep it going!!
Thanks, this is awesome. For some reason this site isn't in webflow anymore, but the tutorial is super helpful!!!
Bookmarked!! Will implement this to my portfolio website next week. Thank you so much!!
Oh, awesome! Here’s an updated version that’s setup in a better way thanks to the new custom element.
ua-cam.com/video/UJ2kR6z8B9I/v-deo.htmlsi=osp-481-pLXBRpH9
@@timothyricks You're a legend!!
Timothy, thanks for sharing this on webflow!
Great value mate!!! You give so much value to the Webflow group thanks and please keep them coming 🙏
I literally promised my client a map like this before I knew if I could actually pull it off (it had to be possible, right?). Thank you for making this incredible step-by-step!
Nice work Timonthy, Have a question. What if we had to make the location info popup instead of going to a different location page? Is there any way to achieve this?
This is working great for me up until trying to make it responsive... adjusting the font size using VW in the HTML embed just isn't changing anything. Any ideas?
A good idea for a follow-up video might be a simple store locator built in webflow. I know there are some basic tutorials about it on the webflow forum but there does not seem to be a lot of video content about it yet.
Wow, thanks for this amazing tutorial! ✨
For some reason the size of the dots arn't effected when I change the size in the HTML Embed, so I am unable to make the map work for all devices. Not sure if you can help in anyway?
Hey Oliver, what font size are you changing the HTML embed to? Also, are the width, height, padding, and sizes of all elements inside the embed set by using EM?
@@timothyricks I want to change the HTML embed that is inside the collection item, so that the responsiveness works on all devices. however, when I change the size nothing happens to the size of the dot and writing, its as if they are not connected? could it be something with the code?
@@olivernicklin8370 So if it was setup like the tutorial, the embed width and height is based on the height and width of the map image you upload. Changing the size of the map as a whole would be possible by changing the size of the map image. However, the dots are not connected to this size. Their size can only be adjusted by changing the font size of the embed. If it helps, feel free to check out the WebFlow preview link in the video description
@@timothyricks Hi Tim, I experience the same thing with Oliver. I have followed the tutorial step by step. However, when I change the width and height on the HTML embedded, nothing affected the dots. Then, the dots can't work on any devices. I have ensured everything inside HTLM Embedded using EM. Really need your advise
Hey Timothy! Didn't know you could input cms inputs into html embedds! Great tutorial! I'll be binging on your channel I guess (: Greetings from Germany!
Oh forgot to say thank you... thank you! 😊
Thank you so much! Welcome to the channel
So many great tips in this video, thank you :)
Hey Tim! I created the map and seperate pages using the Locations CMS Template, but Im having trouble linking the map dots to the pages. Everytime I try to select the map dot, it takes me to an error page, not the pages from the Locations Template. Any advice?
really nice, thanks a lot!
Hey Tim,
If I don’t want the dots clickable, so it doesn’t attempt to go to the collection page, how do I do this?
Am trying to figure out this same thing! Any luck? It seems if I just changed the Map Dot to a regular div instead of a link, and then leave out the specific website/slug, then it doesn't work. I'm guessing because it needs a reference to know where to pull the CMS info from. Not sure how to fix.
@@stairbirmingham209 in html embed
Really cool, thanks for the tutorial! :-)
I found some trouble when I did the responsive. The dots scale as they are supposed to but they automatically move to the right and there is no evident way to control this. Awesome tutorial, btw
Hi Timothy, is there any way to make the dots so they're not clickable, and they simply hover rather than redirecting you off the page if you were to accidentally click them. I simply want to show my users that we ship from 3 locations, rather than taking them to a page to tell them more about each of these locations. TIA!
Genius, I needed this so bad lol
this is awesome!!
It's brilliantly complex 😁.
I have question, is there a way to embed html5 Adobe Animate cc project?
Let's say, if I develop complex huge interactive like this in animate, and then publish it and embed to webflow, the question is it'll not that responsive to the breakpoints. Is there anyway to control it?
Many thanks.
Well done dude ! thanks
Thanks for the tutorial! I ended up using % instead of EM for responsiveness. One question, I have a lot of dots and the location name sometimes is hidden by other pins. I tried changing the z-index of the location text but no luck. Any suggestions?
HAve you found the answer to this? I am having the same trouble :/
@@Wasazitation Yes! you need to add sorting to the CMS collection. I added a # number field and based the sorting on that number. The pins that appear first in the list will have a higher z-index. It's manual work but it does the job.
how to make it responsive from all desktop sizes ?
This is brilliant. Can we use Y-coordinate and X-coordinate simply by copy and paste from google map?
Thanks a lot, this is amazing! There is any way to remove the links from the dots?
hey man ,good job,can u do tutorial on zooming in and out of the map?
Hi, quick question: what template do you start out with? Am I missing something?
Hello, there's no need to start from a template, but if you'd like, I have a cloneable of the final design available at webflow.com/website/Interactive-CMS-Map-Responsive-Collection-List
@@timothyricks Brilliant! Thanks a bunch!
Thanks Timothy! I just needed this, could we also apply different "sizes or scale" of c-map_dots ?
Kevin Palombo - Happydesk Yes, for sure! Even your own hover states, interactions, styling, and elements. Just be sure to use em for all the properties if you want it to scale on mobile.
@@timothyricks I will try this out again then, did some tests but no solution yet. Is it possible to hire you for this ?
Kevin Palombo - Happydesk I’m sorry to hear that! Unfortunately, I’m overbooked on projects right now. Are you trying to apply a different size per each map dot? If so, you’d have to have a number field in the collection where you enter the size and then you’d have to pull that number into the map dot html div using the same type of style code we used for the map dots position, but this time you could apply it to width, height, or scale.
@@timothyricks Yihhaaa got it to work :-) ! Thanks
Hey Tim! Thank you for the great content. Would you be willing to showcase a version of this video with a CMS map of just the United States?
Hey Timothy once again really awesome work. How difficult would it be to implement a modal pop up with text for each CMS item?
Loyal Design Co Thank you! If it needs to be a full screen popup, it would be a little tricky because the collection item is positioned absolute. If it just needs to be a popup that covers the map or part of the map though, that would be easy. Put your popup div inside the collection item, position absolute, and display none. Then create an interaction that on click of the map dot, changes the sibling popup to display block. You could put whatever collection info you want in the popup since it’s in a collection item
Hey T!
Congrats to the 10k+ I feel so happy for you!!
I wonder if there´s a way to make two different radio buttons with two different colors. I have a client whom would like to put "bookings" as one button, and "prospects" as another botton in different cities. I tried to do this in the CMS but the colors is decided in the designer, not the CMS? Would so much appreciate if you could help me!
Hello, thanks so much! From what I understand, you may be able to use conditional visibility to hide one card and show the other based on a CMS switch.
@@timothyricks Thank you for quick reply! But is there a way to just add another color to the radio buttons? :)
There should be. Combo classes could be added to those buttons, or they could be styled with inline styles in the html that pull from a CMS color field. At the beginning of this tutorial, I showed how the elements were created and styled in WebFlow. The same process could be followed to create another version before copying the code into the embed
@@timothyricks I give it a try! You are the best.
how did you format the section that contains the text and the map?
Calorie Report I believe it has a max-width of something like 1100px with flex box to put the two inner divs side by side. Feel free to check out my cloneable for this project if you’d like at webflow.com/website/Interactive-CMS-Map-Responsive-Collection-List
Thanks for sharing this video, it's a great help to the entire Webflow community. Can you please tell me what to do if I don't want the pin to be clickable and I don't want it to point to the CMS subpage? Thank you in advance for your reply.
Sure thing! For the first part of the tutorial where I created the link block natively in Webflow, you would want to use a div instead. That’s before copying the code into the embed.
@@timothyricks Hello Timothy, thank you for your reply, I have changed the link block to a div block, but it didn't help...for some reason it still points to a subpage. Can you please take a closer look at it?
That must mean there’s still link blocks inside the embed. The next part of the tutorial shows how to copy that native element into the embed.
Okay, I have fixed it by removing the 'a href' attribute from the custom code.
By the way, I must commend you on your outstanding work and valuable contributions to the community. Thank you for all that you do!
Will this work on a real map with exact latitude and longitude coordinates and directions to each location?
Vio’s Kitchen It would work on a real map, but it would be tricky to use exact latitude and longitude coordinates.
@@timothyricks Thanks! I would love to see a tutorial on this if it could be accomplished.
👍👍👍
does it work after exporting the code?
Ludvio The concept would work with whatever CMS you use, but webflow’s collections do not work after you export
🙂🙂🙂🙂🙂🙂
Hey, I don't know if I'm doing something wrong, but the x/y coordinates of the map seem off whenever I input them. I input the lat/long of Paris and the map shows it in the south pole. Have you encountered this?
I just realised these are cartesian coordinates, not Lat/long... That was stupid, sorry :P
Konstantinos Doxiadis Hey man! Sorry, I was just about to mention that. The way this is set up, it could work for a map of anything, just not the globe.