I’m working on an interactive map in Webflow where each map dot (coming from a CMS Collection) should open a unique popup with different content (e.g., different images). However, when I apply an interaction to one map dot, it affects all of them because they share the same CMS structure.
I assume this happens because all the map_dots are inside the same CMS Collection List, and Webflow treats them as a group. How can I make each map dot trigger only its specific popup?
About me: I am a beginner with cms and have no experience in custom coding.
One is that you can put the popups also in that same collection list and trigger them as siblings. Here’s an example of that and a demo cloneable-
This works especially whell if you want the popup to be adjacent to the map pin.
If the popup is NOT adjacent to the map pin, e.g. a side panel of info or something below the map, I usually use a different approach.
I keep the two collection lists separate, and then use a small bit of custom code that, when the map pin is clicked, clicks a trigger button for the popup.
To make each CMS-based map dot trigger only its specific popup in Webflow, wrap each dot and its corresponding popup inside the same Collection Item. Then, use Webflow’s built-in interactions by setting the popup to “Affect Only Sibling Elements” instead of “Class.” This ensures that clicking a dot only affects its related popup. If Webflow’s interactions aren’t sufficient, a small JavaScript snippet can dynamically target each dot’s specific popup using dataset attributes. Let me know if you need a no-code walkthrough or a simple script.