When it comes to adding interactive maps to your Webflow website, Mapbox is in a league of its own. Mapbox provides developers with fully-featured and customizable maps. Now with Jetboost’s CMS Maps Booster, you can easily add a Webflow Mapbox to your website.

There’s no custom code, and there’s no need to store your location data in a separate third-party app. CMS Maps integrates directly with your Webflow Collection Lists. Bonus, add any other Jetboost Booster to your Collection List, and watch your map update in real-time!   

In this article, we’ll first learn more about Mapbox. Then, we’ll explore how to use Jetboost’s CMS Maps Booster to quickly add Mapbox to your Webflow website.  

What is Mapbox?

Mapbox “reveals the world around us.” It’s a turnkey platform that lets users add dynamic and tailor-made maps to their websites. Mapbox provides beautiful base maps, various upload and design tools, and cross-platform rendering. Plus, you can add custom location data to any map. From data to design - you can create maps that will engage and captivate your users! 

How can I use Mapbox with Webflow?

So many different ways! Add a store locator to your retail website or a property listing map to your real estate website. Check out our favorite use cases below. 

Travel. Help your users make their dream vacation a reality. Add a travel map to your website with exotic destinations, hotels, car rentals, etc. Whatever kind of travel business you have, customizable maps can help your users book their vacations faster! 

Retail. Add a store locator map to your retail website. Let users search by city, state, or country. Enhance your map with a popup window for each store location. Share important store information like business hours, photos, or ratings with the click of a button.  

Events. Let your users visualize your event locations on an interactive map. Check out our live demo to see how we did this with worldwide Webflow meetups.

Real Estate. Who doesn’t love to explore real estate listings and comment on the prices? Jokes aside, an interactive map is crucial if you're in the real estate business. Let your users visualize property locations and check out the surrounding neighborhoods. Help your users find the right house at the right price!

Outdoor Recreation. Interested in sharing the best hiking or running trails with your users? Add multiple locations to your outdoor map, and let your users search for their next adventure.  

How do I add Mapbox to my Webflow website?

You can add Mapbox to your Webflow website with custom code, or you can use a third-party Webflow integration. Most third-party integrations don’t sync with Webflow’s CMS or allow you to design inside of Webflow. This means you’ll have to manually add your location data to the third-party app and be limited to the look-and-feel provided by their map template.

Wouldn't you prefer a more native to Webflow experience?

That’s why we created Jetboost’s CMS Maps Booster! CMS Maps is the only third-party Webflow + Mapbox integration that syncs with Webflow’s CMS and requires no custom code or third-party editor. 

Add beautiful, tailor-made maps to your Webflow website in just minutes. Customize your map style and marker images to match your existing user interface. Use Webflow’s Collection List to keep your location data organized and up-to-date.

You can also choose from eight free Power Ups to enhance Jetboost’s CMS Maps Booster: 

• Popup Window. Display a popup window when a user hovers or clicks on a map marker. Design the popup window in Webflow and include any pertinent information from your CMS item. ‍
• Map Controls. Add various controls to your map like zoom, rotation, etc. 
• Alternative Map Markers. Use different markers for different types of locations (e.g. hotels, parks, restaurants, etc.)
• Highlight Map Marker. Change the style of the marker when a user hovers or clicks on the marker or corresponding CMS item.
• Highlight CMS Item. Change the style of the CMS item when a user hovers over its corresponding marker.
• Center Map Marker. Center a CMS item's marker on the map when a user clicks on the item. ‍
• Projection Styles. Set a projection style for your map that will override your map style. What’s a map projection? It’s a way to flatten the planet’s surface onto a screen. The right projection style will depend on your use case. Check out Mapbox for more information on map projections.  
• Lists with Pagination. Choose if you want your map to display all markers in your Collection List, or only the markers from the Collection List's current page.

Ready to get started? Follow our step-by-step instructions below to add Jetboost’s CMS Maps Booster to your website. 

Step 1: Set up your Jetboost account.

If you’re not a Jetboost user, sign-up for Jetboost for free. Add your Webflow account to Jetboost. Now you can start adding boosters! 

Step 2: Add the CMS Maps Booster to your Webflow website.

Navigate to your Jetboost dashboard. Click “Add Booster.” Then, add the “CMS Maps” booster. 

Step 3: Configure your CMS Maps Booster.

If you’re not a Mapbox user, sign-up for Mapbox for free. After you create your Mapbox account, copy and paste your public API key to Jetboost. 

Next, select your map style. Choose from streets, outdoors, light, dark, satellite, satellite streets, navigation day, or navigation night. If you prefer, you can also use Mapbox to create a custom map style.

Set your map location and zoom. If you select “automatic,” the map will zoom to fit your CMS items when filtered. Or, you can select “manual.” For this option, pan the display map to set your initial location and zoom level. 

Now, set your marker image. Copy and paste the URL to the asset you’d like to use as a marker image. Think, arrow, flag, pinpoint, etc. The marker image URL must be a PNG or JPEG. Mapbox does not currently support SVG images. 

Then, select your scale. We recommend a 0.5x scale for retina displays. 

Finally, decide whether you’d like to save the map position (zoom and center) to the URL. This is useful if you want users to be able to share map positions via email, social media, text, etc.   

Step 4: Add the Jetboost script to your Webflow website. 

Head to the custom code page in your Webflow Project Settings. Find the “Head Code” section. Paste in the Jetboost script here. If you’re already a Jetboost user, Jetboost will skip this step.

Step 5: Prepare your Collection List for the map.

Before you start this step, ensure that your Collection List has latitude and longitude fields. These are key for your map to function properly. 

Add the provided Jetboost class to your Collection List Wrapper element. 

Next, add an Embed element inside of your Collection Item. Copy and paste the provided Jetboost code to the Embed element. Click “save & close.” You can skip this step if you’ve added the Jetboost Embed to this Collection Item with another booster. 

Navigate to your Collection Item Settings. Select “Custom Attributes.” Click the plus sign to add a new custom attribute. 

Copy and paste the provided Jetboost data attribute for longitude to the “Name” field. For the “Value,” select the longitude field associated with your Collection List. Repeat these steps to add a custom attribute for latitude.  

Publish your website! Visit your published website and copy the URL. Paste the URL in the “Test URL” box on your Jetboost dashboard. Leave the Test URL blank if you’re testing the homepage. Click “Test and Continue.” If there are any issues, we’ll let you know.

Step 6: Create your map container. 

Add a Div Block where you want your map to display on your webpage. Style this Div block however you want! Don’t forget to add height and width. We want your map to be visible to your users!

Next, add the provided Jetboost class to your Div Block. 

Publish your website, and test your URL again. Remember, we’ll let you know if there are any issues. 

Step 7: Final checks.

If there are no final issues, click “continue.” That’s it. All set.

Ready to jump in? Get started with Jetboost for free!

Add Filtering and Search to Upgrade Your CMS Maps 

Add more Jetboost boosters to your CMS Collection to enhance your map navigation. The boosters will all work together, and your map will update in real time. Learn more about how to upgrade the CMS Maps Booster below. 

Dynamic Filtering. With Dynamic Filtering, let your users filter your map by any Collection Field. Check out our live demo to see how we added a regional filter to our worldwide Webflow meetups map. You can also read our article to learn more about how to add filtering to your CMS Collections. 

Real-Time, On-Page Search. Let your users search your map by any Collection Field like location, name, date, etc. With Jetboost, you can add a search bar to your website in less than 10 minutes. 

Boost Your Location Data with Mapbox and CMS Maps

Interactive maps are both impressive and helpful to your users. But, it can be a headache to add these maps to your website. That’s why we created our CMS Maps Booster - the fastest and easiest way to add a Webflow Mapbox to your website. CMS Maps gives your website that “wow” factor without any coding or remote data storage.  

Add an interactive and customizable map to your website today with Jetboost. Try it for free now!