How to add a custom map to webflow with MapBox

Last time updated

16 Oct 2025

min to build

title

‍

text more text

‍

1<!-- Mapbox Style -->
2<script src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js'></script>
3<link href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet' />
4
5<style>
6  /* Popup styling */
7  .mapboxgl-popup-content {
8    color: black;
9    background-color: transparent !important;
10    padding: 0 !important;
11    border-radius: 0 !important;
12    overflow: auto;
13    margin-bottom: 0.5rem !important;
14  }
15  .mapboxgl-popup-tip { display: none !important; }
16
17  /* Custom marker styling */
18  .star {
19    position: absolute;
20    z-index: 555;
21    width: 1.5rem;
22    height: 1.5rem;
23    border-radius: 50%;
24    cursor: pointer;
25    background-color: #2CD8A1;
26  }
27  .star::after {
28    content: "";
29    position: absolute;
30    top: -0.625rem;
31    left: -0.625rem;
32    right: -0.625rem;
33    bottom: -0.625rem;
34    border: 0.2rem solid #2CD8A1;
35    border-radius: 50%;
36  }
37
38  .location.active { border-left-color: #2CD8A1; }
39
40  /* Hide Mapbox default controls */
41  .mapboxgl-ctrl { display: none !important; }
42</style>

‍

more text

‍

Each .location (from CMS or static elements) creates a [a-data-flow = This is Ali's]on the map. These markers are placed using the latitude (.lat) and longitude (.lon) values inside each .location

‍
[co-.classname]

‍

Here are all your attribute option:

[ag-0-d-This is a list with attributes made for you]
[ag-0-a-data-flow-11 = 111This is Ali's-is yek]
[ag-0-a-data-flow-22 = This is Ali's22]

‍

Here are all your attribute option:

[ag-1-d-This is a list with attributes made for you]
[ag-1-a-data-flow-110 = 111This is Ali's]
[ag-1-a-data-flow-22 = This is Ali's22]

‍

Related Components:

Dot Waves

Create mesmerizing wave patterns with colorful dots that flow across your website. Fully customizable colors, speed, and animation styles.

Wavy 3D Blob Animation Kabarza Rich text edit

A quick guide to embedding a dynamic 3D blob with Three.js and GSAP in Webflow—complete with copy‑to‑clipboard buttons for every code snippet.

Webflow Localisation Anchor link fix

Fix anchor links on localized pages in Webflow. This drop-in script (1) detects secondary locales from the URL, (2) prefixes internal links that are missing the current locale, (3) preserves smooth scrolling for same-page #anchors, (4) skips language-switcher links via hreflang or data-flow-locale-skip, (5) avoids assets/external links, and (6) re-initializes Webflow IX2 after updates. Works from the <head> or “Before ”.

No items found.