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.
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 🤣”
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.
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
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 :)
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?
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! 😀
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.
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?
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
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?
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 : ).
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.
@@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 // 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();
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!
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?
I searched for 45min for this video.
Thank you!
This video came in right on time
I've been stuck on trying to get a CMS map working for years, this video is super helpful!
Hi KC! Thanks for this. Miss you already.
Thanks for helping me build something amazing!
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.
Thank you!!!
this needs to be a pinned comment!
Thanks so much! My clients nedeed this and I was strugling to do this within a collection.
Thanks, cranking on something like this.
ahh you legend, been racking my head on this!!
F'in sweet have pretty good free filter plug ins
Great content, thank's a lot
This is clutch! Thank you!
Love this! I think I like Mapbox better than Google maps now tbh lol
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 🤣”
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!
Excellent tutorial, precise and very well explained! Thanks a million! I just needed it
Subscribed. Love the style of teaching.
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
I'm also needing to figure that piece out
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.
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
Thank you
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 :)
Yeah same here.
Love it!
You can actually style google maps as well. But thank you for a very helpful tutorial showing us how to integrate with Webflow CMS!
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?
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?
Same problem, no map just a background color.
@@kaiwa680 same
update the version of mapbox in the script (in header) and also change the mapbox style (in body) to your own as well.
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! 😀
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.
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?
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
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?
Thank you so much! Struggled a lot with the custom code parts though and ended up using the Dynamic Map from No Code Flow 😅
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 : ).
Any clue how to add a CMS filter for the different points on the map?
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.
@@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.
@@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?
@@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();
this is my main code for applying the CMS filters. Hope it helps.
Is the live link still active?
have a look at my comment, just found why!
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!
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.
This worked !! you legend @@robinson-greig
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?
have a look at my comment, just found why!
Hey, nice video, but I don't think it's wise to put your mapbox token right inside the html.
Hi KC! Im working on a project.. Would you like to help me implementing the same thing for payment?