Link to plugin page: will be late
Demo to preview the plugin
Introduction
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 optimized 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 Properties
The plugin contains a Mapbox Map visual element designed specifically for mobile applications.
Mapbox Map
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.
2. Add navigation control — Adds navigation controls (zoom buttons and compass) to the map.
3. Remove navigation control — Removes the navigation control from the map.
4. Set style — Changes the map's visual style.
5. Set camera — Instantly moves the map camera to a new position.
6. Fly to — Smoothly animates the map camera to a new position.
7. Add marker — Adds a customizable marker to the map.
8. Remove marker — Removes a marker from the map by its ID.
9. Add geolocation control — Adds a geolocation control that can track user's location.
10. Remove geolocation control — Removes the geolocation control from the map.
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
