Discover the best mapbox websites created by professional designers. Get inspired and start planning your perfect mapbox web design today!

An example of how you can integrate Mapbox into your Webflow project to create an immersive storytelling experience. Feel free to clone but be sure to replace the API key with your own (available for free by creating a Mapbox account).

*Not optimized for mobile (yet)

Mapbox Scrollytelling

This map uses the CMS for each location and displays a popup and info card on click for each location. The items are placed using hidden a lat and long field and the rest of the information is displayed upong click. This approach does use custom JS and Jquery code found in the code editor. 

Video on how I made this:
https://youtu.be/Wd76ZwMCGzc

This site was made on top of an existing clonable by Corey Moen found here: 
https://webflow.com/made-in-webflow/website/cms-mapbox

mapbox

CMS Map with Info Card using Mapbox

This project was developed using Mapbox Studio, Mapbox GL JS library and Webflow. Feel free to clone this project use it in your own way.

Charles Darwin and the Voyage of the Beagle

Charles Darwin and the Voyage of the Beagle - Interactive Map

An interactive, CMS-powered map that is built using Mapbox. The collection list that populates the map must have Lattitude and Longitude coordinates for each item, and you can populate any other CMS data you want within the popups for each point. This approach does require Javascript located in the page setting body code, and if you wish to modify it be sure to check out the great Mapbox documentation and examples at https://docs.mapbox.com/mapbox-gl-js/api/.

Interactive CMS Map w/ Mapbox

An interactive store locator built with Mapbox and leveraging a collection list thanks to Javascript.

mapstore

Store locator with Mapbox and a Collection list

Coffee blog and directory, with an interactive Webflow CMS map listing the country's best coffee shops.

United States of Coffee

US of Coffee CMS Driven Interactive Map

Nikolai Bain

A hand-picked list of the best cafes, restaurants, bars, and pubs in Edinburgh.

LocalFinds

Maptybox is a Webflow x Mapbox API JavaScript mini application that tracks & saves user created workouts based on input coordinations.
Functions: 
-Add 2 points (Start/End) for workout/route.
-Tracks current weather and name of the city/region of workout.
-Drag points to modify workout route.
-Finds the 'normal' route like GPS.
-Allows Edit/Cancel/Remove/Delete workouts.
-View workout with beautiful animation.
-Popups for a better user experience (UX).
Uses: 
-Reverse Geocoding (Geoapify)
-Directions (Mapbox)
-Open-Meteo.

Mapbox x Webflow - by Dimitris

[Custom App] Mapbox Workout Tracker App

BIG is a guide to discover the best places in Saint-Tropez and I had the chance to design and develop their website.

Key features :
- CMS Collections for articles & shops
- Interactive map built with Mapbox
-A web app design for mobile

BIG - Guide of St-Tropez, France

This is the website for my recently launched company. It focusses on setting a nice mood and explaining how we work.

DigitalNinjas.io | Digital Agency

DigitalNinjas Agency Site

We Met Before

On Chain Smoker is a membership program offering unique perks to the global cannabis community.

On Chain Smokers

Anish

This demo showcases an autofill address feature implemented with the Mapbox API for the form.

Make sure to get your own API key and replace it in the code present in the body tag.