Creating a CMS based map with Webflow + Mapbox

[@Matthias-ps3qo]

In case your map doesn't load and displays "Type Errors", such as Uncaught TypeError: Cannot read properties of undefined (reading 'composite') Make sure to update the version of mapbox-gl-js inside your head tag to match the version of mapbox that you've designed your map in. You can find this version in the settings tab inside mapbox studio.

[@GiuseppeDoe]

Thank you!!!

[@HB-pi2ew]

this needs to be a pinned comment!

[@jamied9164]

I've been stuck on trying to get a CMS map working for years, this video is super helpful!

[@christopherzemina1]

This is extremely helpful. Thank you so much! Does anyone know how I can display more than 100 collection items on the map? I'd appreciate a pointer!

[@v.m.4453]

I searched for 45min for this video. Thank you!

[@pontuskarlsson2373]

I don't see anything in the browser. I have copied the code/CMS from your link, and change the API-token - but nothing shows up for me. Am I missing something?

[@kaiwa680]

Same problem, no map just a background color.

[@joanapfa]

@@kaiwa680 same

[@liamino]

update the version of mapbox in the script (in header) and also change the mapbox style (in body) to your own as well.

[@HamishDuncan-t3u]

Awesome tutorial! Do you know how I would add a custom map pin? Ideally, I could load multiple map pins in different colours to signify different businesses too. Cheers for the help.

[@CarlKho]

Hi KC! Thanks for this. Miss you already.

[@alyssa_bananas]

Great video, Kaitlyn, thank you! Did you ever figure out the filtering piece? That's the piece I'm missing and it's driving me crazy! lol

[@MadisonHinson-y1s]

I'm also needing to figure that piece out

[@invencibletheory]

nice, just a question, how would you go about adding a filter to this, one that you can use to filter through data using parameters like idk, type, area, or whatever

[@joshprice3634]

Hi, Nice work on the video, super helpful! I was wondering if you could help me. The div block cards on the left of the screen are not appearing when I tap the dots on the map? Thanks :)

[@kevinemehizer5171]

Yeah same here.

[@rpuchulu]

Thanks so much! My clients nedeed this and I was strugling to do this within a collection.

[@JonathanSwindell-n9n]

Thanks for helping me build something amazing!

[@hal-zeitlin]

Thanks, cranking on something like this.

[@migueljena1621]

Hi, did you figure out how to add filters? I'm also trying to add clusters, any idea how to integrate those onto the map?

[@jonanzing]

This video came in right on time

[@Biltid]

Thank you for a great feature to Webflow and perfect map! 😀 I just have one challenge I hope you have the answer to. I just get the first 100 CMS items to show up on the map. How do I get the rest? When Switch on paginate i get these buttons next to the collection list to push next and when do so it loads the other 100 CMS items. I hope there is a way to pull all CMS items when load the map? Many thanks in advance! 😀

[@annayagodkina3137]

Thanks for the video, it was extremely useful! The only problem is that when I click on a circle on the map, I see not just one item, but all the items from the collection. Does anyone else have the same issue? How can I fix this? I have checked everything multiple times but haven't had any luck yet.

[@harrybarcia3177]

Great content, thank's a lot

[@fictionplus]

Love this! I think I like Mapbox better than Google maps now tbh lol

[@DeanCookCreative]

Subscribed. Love the style of teaching.

[@timavodah5864]

You can actually style google maps as well. But thank you for a very helpful tutorial showing us how to integrate with Webflow CMS!

[@zoranrnjakovic88]

Excellent tutorial, precise and very well explained! Thanks a million! I just needed it

[@mannycortez]

This is clutch! Thank you!

[@mickohodll5438]

Any clue how to add a CMS filter for the different points on the map?

[@mickohodll5438]

Found a solution by writing my own bit of javascript. Using the a CMS collection checkbox dropdown as filter and adding/deleting popups based on if the checkbox value is set to true or false.

[@MadisonHinson-y1s]

@@mickohodll5438 Would you be willing to share how you did that? I'm trying to use Finsweet's CMS filtering (which I'm already using for a different list view) to remove the points.

[@christopherzemina1]

@@mickohodll5438 I was trying to add a filter to my map too. Would you be able to record a short video of how this can be done?

[@mickohodll5438]

@@christopherzemina1 // Get cms items let listLocations = document.getElementById("location-list").childNodes; let listFeatures = document.getElementById("feature-list").childNodes; // For each colleciton item, grab hidden fields and convert to geojson property function getGeoData() { listFeatures.forEach(function ( location, i ) { let locationName = location.querySelector(".selected-business").innerHTML; let checkboxResult = location.querySelector(".checkbox-id").checked; if (checkboxResult == true || undefined) featureArray.push(locationName); }); listLocations.forEach(function (location, i) { let selectedFeatures = featureArray; const locationFeatures = location.querySelectorAll("#locationFeature"); const locationArray = Array.from(locationFeatures); const features = locationArray.map((item) => item.value); if (selectedFeatures.every(item => features.includes(item)) == true ) { let locationLat = location.querySelector("#locationLatitude").value; let locationLong = location.querySelector("#locationLongitude").value; let locationInfo = location.querySelector(".locations-map_card").innerHTML; let coordinates = [locationLong, locationLat]; let locationID = location.querySelector("#locationID").value; //add array ID let arrayID = (i + 1) - 1; let geoData = { type: "Feature", geometry: { type: "Point", coordinates: coordinates, }, properties: { id: locationID, description: locationInfo, arrayID: arrayID, }, }; if (mapLocations.features.includes(geoData) === false) { mapLocations.features.push(geoData); } } else { }; }); } // Invoke function getGeoData();

[@mickohodll5438]

this is my main code for applying the CMS filters. Hope it helps.

[@Diogenes-96]

Thank you

[@shanemartin2467]

This is awesome. Well done. Trying to figure out how to allow users to submit a form and plot their own point on a map. WHat I'm getting held up on is how to convert their location into longitude / latitude. Any thoughts?

[@josselincol]

Perhaps with Geocoding. Either through Mapbox Geocoding API or through something like SmartMonkey. A possible workflow would be : 1) User submits through Webflow Form - 2) WhaleSync or Zapier transmits to Sheets database - 3) SmartMonkey geocodes 4) WhaleSync or Zapier sends it back to your CMS. But there is probably something easier without using that much SaaS

[@angushyams244]

ahh you legend, been racking my head on this!!

[@angushyams244]

F'in sweet have pretty good free filter plug ins

[@georgy.design]

Thanks for the video, Kaitlyn! Very thorough and clearly laid out step-by-step tutorial ✨ Your videos are the content that I want to do myself - some ppl suggested making clickbaity titles and stuff like that, but rn I’m like: “That’s not fun - making turning scrollbars into baguettes is what I call a real content, real web dev 🤣”

[@iciio]

Hey Kaitlyn, thanks for this great video! : )) I am trying to figure out, how i can load only one location into the map. pulling this one location from the cms item/ project showing. So i have several cms items representing singlar projects with one location to each. On this project page i want to load the map, wit the corresponding project location. If somebody has an idea of how to do that, id be more than happy : ).

[@nicholasdagostino9002]

Thanks for the video! Started learning webflow and this gave me a great example how complex a site can be using it. curious if you ever considered using the mapbox api to get local park sites instead of manually adding them as a cms in webflow, do you know if its possible in webflow?

[@AlexButterbrodt]

Hi there! I have a question about the access token and the style URL. I cloned the site in webflow and updated the access token and the style URL with the ones for my map. When I publish the site, the map does not populate. Is there something else I need to be updating? Thank you!

[@robinson-greig]

I just ran into this same issue. Updating the mapbox versions to v2.9.1 (found within the code injected in the tag) fixed the issue for me.

[@reubengallop]

This worked !! you legend @@robinson-greig

[@andrgar.design]

Is the live link still active?

[@clementregazzoni7702]

have a look at my comment, just found why!

[@darraghlynch.design]

Have followed this to a tee but still can't get mapbox to load and it seems to be a common issue. Even the mapbox on he cloneable is not loading either so I assume something has changed since this video was published that has caused the error. Has anyone done this recently and found a solution?

[@clementregazzoni7702]

have a look at my comment, just found why!

[@akorenblit5]

Love it!

[@getverve]

Thank you so much! Struggled a lot with the custom code parts though and ended up using the Dynamic Map from No Code Flow 😅

[@joe6776]

Hi KC! Im working on a project.. Would you like to help me implementing the same thing for payment?

[@johnsnow8252]

Hey, nice video, but I don't think it's wise to put your mapbox token right inside the html.