Display dynamic maps, markers, and geospatial data
With WeWeb and Mapbox integration, you can:
Display interactive maps inside your WeWeb app
Control map behavior using WeWeb workflows and variables
Build custom map interactions instead of fixed embeds
Add dynamic markers, layers, and popups from live data
Style maps to match your product UI and brand
Center, zoom, and update maps based on user actions or logic
Use coordinates and geolocation data in workflows
Visualize lists, filters, and datasets directly on a map
What WeWeb supports natively
Category
Feature
What it does
Plugin setup
Mapbox extension plugin
Adds the Mapbox extension and exposes a Mapbox element in the Add → Plugins panel.
API config
API access token in element
Lets you paste a Mapbox API access token directly in the Mapbox element settings so the map renders without custom code.
Initial view
Center, zoom, projection
Provides controls for latitude, longitude, zoom level, and projection to define the initial area and style that users see.
Styles
Map style selection/binding
Allows choosing Mapbox predefined styles or binding a custom style URL created in Mapbox Studio to fully control the visual design.
Controls
Map interaction toggles
Offers settings like scroll zoom, drag, pitch, bearing, track resize, and logo position so you can fine-tune how users interact with the map.
Markers
Manual markers setup
Lets you add markers directly in the element (content, latitude, longitude, color, draggable flag) for static or small sets of locations.
Data-driven markers
Bind markers to collections
Supports binding markers to an array of objects from a collection or variable (for example Airtable, Xano, Supabase) and mapping fields for name and coordinates.
Marker behavior
Draggable markers & bounds
Provides global and per-marker options to make markers draggable and optionally restrict them within fixed bounds defined in marker settings.
Advanced data
Sources and layers binding
Exposes advanced options to add sources and layers defined in Mapbox Studio and bind them in WeWeb for rich data visualizations.
Popups
Custom popup content via UI
Enables showing custom content when markers are clicked or hovered by combining marker events with standard WeWeb elements (cards, side panels) bound to marker data.
Map center variable
Auto-created “Mapbox – center”
Creates a Mapbox – center variable that always reflects the current center coordinates of the map, which can be used in filters or API calls.
Map instance variable
Auto-created “Mapbox – instance”
Creates a Mapbox – instance variable exposing the underlying map instance so advanced interactions can be performed via custom JavaScript if needed.
Why use WeWeb with Mapbox
WeWeb handles UI and logic while Mapbox provides flexible, production-grade mapping.
Perfect for:
A marketplace showing listings, availability, or delivery zones on a map
A logistics dashboard tracking assets, drivers, or service locations
A real estate or property management portal with map-based filtering
A field operations app displaying jobs, routes, or coverage areas
An analytics dashboard visualizing location-based usage or events
And more....
Integrating Mapbox with WeWeb
Integrating Mapbox with WeWeb is straightforward:
Create a Mapbox access token in your Mapbox dashboard
Add the plugin to your project and drag-and-drop the Mapbox element on a page
Configure the map using your access token
Bind markers, layers, or map state to WeWeb data sources and variables
Add workflows to control zoom, center, filters, or interactions
Limit the number of visible markers at once: use clustering for large datasets
Load map data dynamically based on viewport or filters to avoid performance issues
Store coordinates in a consistent format in your backend
Be mindful of Mapbox usage limits and token permissions
For sensitive apps, restrict tokens to specific domains
FAQs
1. How do I enable Mapbox in a WeWeb project?
Install the Mapbox extension from Plugins → Extensions, then drag the Mapbox element from the Add → Plugins panel onto a page. In the element settings, paste your Mapbox access token.
2. How do I control the initial map view (location and zoom)?
Use the Mapbox element settings to set latitude, longitude, and zoom for the initial center of the map. You can also adjust projection and other view parameters to match your use case (for example a city‑level view vs world view).
3. Can I use custom Mapbox Studio styles in WeWeb?
Yes, you can select a default style or provide a custom style URL generated in Mapbox Studio in the element configuration. This lets you keep all cartographic design work in Mapbox Studio while WeWeb handles layout and logic.
4. How do I add markers from my database or API?
Bind the markers configuration to a collection or array variable that contains objects with at least latitude and longitude (and optionally name/color). Map those fields in the element settings so markers are generated automatically from your backend data.
5. Can users drag markers and how can that be used?
The plugin supports draggable markers, either globally or per marker. A common pattern is to let users drag a marker and then read the new coordinates in workflows or variables to store a chosen location.
6. How can I react to map movements (panning/zooming) in WeWeb?
WeWeb exposes a Mapbox – center variable that always reflects the current center of the map. You can use this variable in workflows or filters (for example to fetch nearby items whenever the user pans).
7. Is it possible to access the underlying Mapbox map instance for advanced use cases?
Yes, the plugin creates a Mapbox – instance variable that represents the underlying Mapbox GL JS map object. You can use this in custom JavaScript to call Mapbox methods that aren’t exposed directly in the UI.
8. When should I choose Mapbox instead of Google Maps in WeWeb?
Mapbox is typically chosen when you need deep style control via Mapbox Studio, vector tiles, or custom data layers. Google Maps is often preferred for simple POI maps with built‑in Google data.
