Interactive Maps in Webflow Using CMS Collections

Learn how to build a custom map in Webflow using the native CMS

In this video, we'll cover how to build an interaction map using one collection list that's responsive across all device sizes and links to each collection item's page. Set the collection item coordinates from the CMS.

LIVE SITE
https://collection-map.webflow.io/

SHARE LINK
https://preview.webflow.com/preview/c...

MARGIN CODE FOR EMBED
style="margin-top: Ycoordinates em; margin-left: Xcoordinates em;"

DISABLE CLICK
.collection-wrapper {pointer-events: none;}
.c-map_dot {pointer-events: auto;}

‍