Combining lists for Map Box (over 100 CMS items)

So I have set up a map box interactive map which displays project locations on an interactive map. The site pin locations are generated from a CMS list and works well (pin at Lat/Long and click to reveal project name, description and client). But I have just learned that I am limited to only display 100 collection items.

I understand there is a Finsweet solution to combine lists using js, but I am unsure how to apply this to my specific need. The code embed is located inside the Collection item/list, so where do I add the other duplicate lists that I want to combine? Any help appreciated :)

Screen Shot 2024-08-06 at 4.54.50 pm


Here is my public share link: Webflow - afflux

If these are just pins, and you have say < 300, then the easy way is to have multiple collection lists and range them 1-100, 101-200, 201-300…

To clean and simplify your pin code you could probably make it a component and then data bind the properties in each of your collection lists.

The finsweet approach could work but it’s tricky, likely you’ll need to use the FS Load API docs, and create a callback that fires any time new data is loaded, then trigger some form of map refresh so that the new pins are picked up. It will take some work to create a smooth UX without too much flickering.

Thanks (again) Michael, for your response. I think the user experience of 500 pins actually becomes more of an issue, so the client has decided to spect their top 100 projects :slight_smile: problem solved.

1 Like