The Mapbox Maps for Bubble Mobile plugin provides a powerful mobile-first mapping solution for Bubble applications. It integrates Mapbox GL JS to deliver high-performance, interactive maps specifically optimusized for mobile devices. The plugin offers comprehensive mapping functionality including custom markers, navigation controls, geolocation services, camera controls, and various map styles.
This plugin is designed for mobile platforms and provides native-like performance through WebView implementation. It supports real-time user location tracking, interactive gestures, and dynamic map customization.
Prerequisites
You must have a Mapbox account to use this plugin. Create your account and obtain your access token at: https://www.mapbox.com/.
Sign up for a free Mapbox account.
Navigate to your Account page.
Create a new access token (without restrictions) or use your default public token.
Copy the token to use in the plugin.
This plugin is designed specifically for the mobile version of the Bubble editor. To test the plugin on your mobile device, use the TestFlight app available at: https://testflight.apple.com/join/W13vZ72p
⚠️
Please note that the testing app is currently available for iOS only.
How to setup
Install the Mapbox Maps for Bubble Mobile plugin in your Bubble app.
Add the Mapbox Map element to your mobile page.
Configure the required Access token field with your Mapbox public token.
Set your desired initial camera position (longitude, latitude, zoom).
Choose your preferred map style and language.
Configure gesture interactions based on your app's needs.
⚠️
Important
All element properties are used only for map initialization. To change these settings after the map loads, use the provided element actions instead of conditional formatting!
Plugin Element - Mapbox Map
The plugin contains a Mapbox Map visual element designed specifically for mobile applications.
⚠️
Important
All element properties are used only for map initialization. To change these settings after the map loads, use the provided element actions instead of conditional formatting!
Element fields
Title
Description
Type
Access token
Mapbox public token.
Text
—————-
Camera
—————-
Default longitude
Initial map center longitude. NOTE: Accepts values from range [-180, 180].
Number
Default latitude
Initial map center latitude. NOTE: Accepts values from range [-90, 90].
Number
Default zoom
Initial zoom level. NOTE: Accepts values from range [0, 22].
Number
Default pitch
Initial pitch angle. NOTE: Accepts values from range [0, 85].
Number
Default bearing
Initial bearing angle. NOTE: Accepts values from range [0, 360].
Number
—————-
Style
—————-
Default language
Map label language.
Dropdown
Default style
Map visual style.
Dropdown
—————-
Gesture interactions
—————-
Cooperative gestures
Touch pan will require using two fingers while panning to move the map. Touch pitch will require three fingers to change the angle.
Checkbox
Double click zoom
Allows the user to zoom the map at a point by double tapping.
Checkbox
Drag pan
Allows the user to pan the map. NOTE: If "Cooperative gestures" is checked, pan requires using of two fingers.
Checkbox
Touch pitch
Allows the user to pitch the map. NOTE: If "Cooperative gestures" is checked, pitch requires using of three fingers.
Checkbox
Touch zoom rotate
Allows the user to zoom and rotate the map by pinching. NOTE: It is possible to zoom with one finger by double tapping and dragging. On the 2nd tap, hold the finger down and drag up or down to zoom in or out!
Checkbox
Element actions
1. Set gesture interaction — Dynamically updates the map's gesture interaction settings.
⚠️
Important
The element retains the values from the last action call, allowing features to be configured independently. The feature state remains unchanged if the field is left empty.
Fields
Title
Description
Type
Cooperative gestures
Touch pan will require using two fingers while panning to move the map. Touch pitch will require three fingers to change the angle.
Yes/No (optional)
Double click zoom
Allows the user to zoom the map at a point by double tapping.
Yes/No (optional)
Drag pan
Allows the user to pan the map. NOTE: If "Cooperative gestures" is checked, pan requires using of two fingers.
Yes/No (optional)
Touch pitch
Allows the user to pitch the map. NOTE: If "Cooperative gestures" is checked, pitch requires using of three fingers.
Yes/No (optional)
Touch zoom rotate
Allows the user to zoom and rotate the map by pinching. NOTE: It is possible to zoom with one finger by double tapping and dragging. On the 2nd tap, hold the finger down and drag up or down to zoom in or out!
Yes/No (optional)
2. Add navigation control — Adds navigation controls (zoom buttons and compass) to the map.
⚠️
Important
Only one control of each type can be added to the map. To change a control's characteristics, first use the “Remove …” action to delete the existing control, then add a new one with the desired characteristics.
Fields
Title
Description
Type
Position
Control placement on map.
Dropdown
Zoom
Shows zoom in/out buttons.
Yes/No
Compass
Shows compass control.
Yes/No
3. Remove navigation control — Removes the navigation control from the map.
4. Set style — Changes the map's visual style.
⚠️
Important
The element retains the values from the last action call. The style of map remains unchanged if the field is left empty.
Fields
Title
Description
Type
Style
Map visual style.
Dropdown (optional)
5. Set camera — Instantly moves the map camera to a new position.
⚠️
Important
The element retains the values from the last action call, allowing features to be configured independently. The feature state remains unchanged if the field is left empty.
Fields
Title
Description
Type
Longitude
Target longitude. NOTE: Accepts values from range [-180, 180].
Number (optional)
Latitude
Target latitude. NOTE: Accepts values from range [-90, 90].
Number (optional)
Zoom
Target zoom level. NOTE: Accepts values from range [0, 22].
Number (optional)
Pitch
Target pitch angle. NOTE: Accepts values from range [0, 85].
Number (optional)
Bearing
Target bearing angle. NOTE: Accepts values from range [0, 360].
Number (optional)
6. Fly to — Smoothly animates the map camera to a new position.
Fields
Title
Description
Type
Longitude
Target longitude. NOTE: Accepts values from range [-180, 180].
Number
Latitude
Target latitude. NOTE: Accepts values from range [-90, 90].
Number
Zoom
Target zoom level. NOTE: Accepts values from range [0, 22].
Number (optional)
Pitch
Target pitch angle. NOTE: Accepts values from range [0, 85].
Number (optional)
Bearing
Target bearing angle. NOTE: Accepts values from range [0, 360].
Number (optional)
Duration
Animation duration in seconds.
Number
7. Add marker — Adds a customizable marker to the map.
⚠️
Important
If no ID is provided, one will be automatically generated. All marker IDs displayed on the map are stored in the “markers’ IDs” state.
Fields
Title
Description
Type
ID
Unique identifier for the marker. NOTE: If empty, an ID will be generated.
Text (optional)
Longitude
Marker longitude. NOTE: Accepts values from range [-180, 180].
Number
Latitude
Marker latitude. NOTE: Accepts values from range [-90, 90].
Number
Color
Marker color.
Color
Anchor
A string indicating the part of the Marker that should be positioned closest to the coordinate.
Dropdown
Scale
The scale to use for the default marker. The default scale corresponds to a height of '41px' and a width of '27px'.
Number
Draggable
Indicating whether or not a marker is able to be dragged to a new position on the map.
Yes/No
8. Remove marker — Removes a marker from the map by its ID.
⚠️
Important
All marker IDs displayed on the map are stored in the “markers’ IDs” state.
Fields
Title
Description
Type
ID
Marker ID to remove.
Text
9. Add geolocation control — Adds a geolocation control that can track user's location.
⚠️
Important
Only one control of each type can be added to the map. To change a control's characteristics, first use the “Remove …” action to delete the existing control, then add a new one with the desired characteristics.
Fields
Title
Description
Type
Position
Control placement on map.
Dropdown
Track user location
Control becomes a toggle button and when active the map will receive updates to the user's location as it changes.
Yes/No
10. Remove geolocation control — Removes the geolocation control from the map.
11. Add list of markers — Adds a list of customizable markers to the map from the database.
⚠️
Important
If no ID is provided, one will be automatically generated. All marker IDs displayed on the map are stored in the “markers’ IDs” state.
Fields
Title
Description
Type
Markers Type
A type of markers from Database or external API
App Type
Markers Source
Markers source. Do a search for... or Get data from an External API.
Data Source (list)
ID
Unique identifier for the marker. NOTE: If empty, an ID will be generated.
Text (optional)
Longitude
Marker longitude. NOTE: Accepts values from range [-180, 180].
Number
Latitude
Marker latitude. NOTE: Accepts values from range [-90, 90].
Number
Color
Marker color.
Text
Anchor
A string indicating the part of the Marker that should be positioned closest to the coordinate.
Dropdown
Scale
The scale to use for the default marker. The default scale corresponds to a height of '41px' and a width of '27px'.
Number
Draggable
Indicating whether or not a marker is able to be dragged to a new position on the map.
Yes/No
12. Remove all markers — Removes all markers..
Element states
Name
Description
Type
map is loaded
Indicates if the map has finished loading.
Yes/No
markers' IDs
List of all marker IDs currently on the map.
List of texts
error message
Latest error message if any error occurred.
Text
Element events
Name
Description
map is loaded
Triggered when the map finishes loading and is ready for interaction.
error occurred
Triggered when any error occurs during map operations.
markers list changed
Triggered when list of markers on the map is updated.
Workflow example
Here are some setups that will help to understand the plugin better.
How to set gesture interaction
This setup demonstrates how gesture interactions function and how to use the Set gesture interaction action.
A plugin element is placed on the page with the following gesture interaction.
☝
Note
Remember, this configuration is solely used to initialize the map.
A set of Checkbox elements is provided below to dynamically enable or disable each gesture interaction.
In the Workflow tab, each change in the checkboxes’ values follows the setup below.
⚠️
Important
Remember, the element retains the values from the last action call, allowing features to be configured independently. The feature state remains unchanged if the field is left empty.
Changelogs
Update 30.10.25 - Version 1.4.0
Added actions "Add list of markers" and "Remove all markers".
