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 🤣”
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! 😀
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.
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?
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, 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.
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 :)
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
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 : ).
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?
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
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?
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!
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();
I've been stuck on trying to get a CMS map working for years, this video is super helpful!
I searched for 45min for this video.
Thank you!
Hi KC! Thanks for this. Miss you already.
Thanks so much! My clients nedeed this and I was strugling to do this within a collection.
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 video came in right on time
Thanks for helping me build something amazing!
Excellent tutorial, precise and very well explained! Thanks a million! I just needed it
Subscribed. Love the style of teaching.
You can actually style google maps as well. But thank you for a very helpful tutorial showing us how to integrate with Webflow CMS!
Thanks, cranking on something like this.
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
Love this! I think I like Mapbox better than Google maps now tbh lol
This is clutch! Thank you!
ahh you legend, been racking my head on this!!
F'in sweet have pretty good free filter plug ins
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!
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! 😀
Thank you so much! Struggled a lot with the custom code parts though and ended up using the Dynamic Map from No Code Flow 😅
Thank you
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.
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.
Great content, thank's a lot
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!
Love it!
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.
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.
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?
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
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 : ).
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?
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
Hey, nice video, but I don't think it's wise to put your mapbox token right inside the html.
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!
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
Hi KC! Im working on a project.. Would you like to help me implementing the same thing for payment?
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!