✅
Demo to preview
✅
Demo page: https://rd-plugins.bubbleapps.io/mapbox
Introduction
The MapBox Plugin enables Bubble developers to integrate interactive, precise, and fully customizable maps into their applications with ease. It provides access to real-time location data, supports advanced map features like custom markers and routes, and allows dynamic interaction through Bubble workflows also supports dynamic markers, custom icons, colors, zip code highlighting, and map styles.
This plugin is ideal for logistics, delivery tracking, real estate visualization, navigation, and location-aware apps that require reliable mapping and geolocation functionality.
Prerequisites
Before using the MapBox Plugin, ensure the following setup steps are completed:
API Key (register and get key at https://www.mapbox.com/)
- Create account https://account.mapbox.com/auth/signup/
- Obtain a Mapbox Access Token
- Add the Token to Your Bubble App
- Enable Location Access (Optional)
How to setup
Step 1 – Install the Plugin
- Go to the Plugin Tab
- Open your Bubble Editor.
- Navigate to the Plugins tab on the left panel.
- Add Plugins
- Once in the Plugins tab, click the Add Plugins button.
- Search for the Plugin
- Use the search bar to type MapBox.
- Locate the plugin in the search results.
- Install/Buy
- If the plugin is free, click Install to add it to your application.
- For a paid plugin, click Buy and follow the purchase instructions.
- Payment Information (For Paid Plugins)
- If the plugin is a paid one, fill in your payment details and make payment.
- Charges will be added to your Bubble billing account.
- Remember, if you unsubscribe from the plugin shortly after installation, charges will be prorated based on the days used.
- Plugin Installed
- Once installed, the plugin will appear under the Installed Plugins list in your Bubble Editor.
Step 2 – Add the Plugin Element to Your Page
- Open the Design tab in your Bubble editor.
- Search for the Mapbox Map element in the Elements panel.
- You’ll see one option:
- Mapbox Map
- Drag and drop the element onto your job listing page.
Step 3 – Configure Properties
Select the Mapbox Map element and configure its properties in the Property Editor.
Each field corresponds to a specific map display, interaction, or customization setting, allowing you to control how your map looks, behaves, and responds to user actions.
- Controls – Toggles visibility of native Mapbox controls such as zoom buttons, compass, and navigation tools.
- Center – Defines the map’s default center point. Accepts an address or coordinates to position the initial map view.
- Zoom – Sets the default zoom level for the map on load. Higher numbers zoom in closer, while lower numbers show a wider area.
- Style – Selects the visual style or theme for your map (e.g., light-v11, dark-v11, streets-v12).
- Disable Zoom on Scroll – Prevents users from zooming in or out using the mouse scroll wheel. Useful for embedded maps to avoid accidental zooming.
- Show Branding – Displays or hides the Mapbox attribution and branding logo from the map interface.
- Marker Type – Defines the type of marker to display on the map (e.g., place, custom, dynamic).
- Markers Source – Specifies how markers are added (manually on click, dynamically from a data source, etc.).
- Address – Sets the data field or static value used to position the marker on the map.
- Icon – Selects a custom icon or dynamic image field to visually represent each marker.
- Color – Determines the color of the marker, either static or dynamic.
- Generic Marker Properties
- Generic Icon – Uploads a global icon used for all generic markers when no individual icon is defined.
- Generic Color – Defines a universal color for all generic markers.
- Generic Draggable – Allows markers to be dragged across the map interactively.
- Generic Rotation – Sets the rotation angle (in degrees) for generic markers.
- Generic Size – Controls the size or scale of the generic marker icon (default: 50).
- Zipcodes Section
- Enable Zipcodes – Activates the visualization of ZIP code boundaries or regions on the map.
- Allow Clicking – Enables interactivity for ZIP code regions, allowing users to click and trigger workflows or actions.
- Default Zipcode Highlight Color – Sets the color used to highlight ZIP code areas by default.
- Zipcode Hover Color – Defines the color shown when the user hovers over a ZIP code area.
Plugin Element - Mapbox Map
Fields
Name | Description | Type |
Controls | Toggles visibility of native Mapbox controls such as zoom buttons, compass, and navigation tools. | Checkbox |
Center | Sets where the map should be centered. You can define this dynamically (e.g. current user’s address). | Dynamic value |
Zoom | Defines the initial zoom level when the map loads. | Static number |
Style | Selects the visual style of the map (Street, Satellite, Light, Dark, etc.). | Dropdown |
Disable Zoom on Scroll | Prevents users from zooming in/out with their mouse scroll wheel. | Checkbox |
Show Branding | Shows or hides Mapbox branding as required by their usage policy. | Checkbox |
===== MARKERS ===== | ||
Marker Type | Selects the Bubble data type that will be used to create map markers. | App Type |
Markers Source | Defines the list of things (from the selected type) to display as markers on the map. | Dynamic value |
Address | Sets the field containing location data (address or coordinates). This is mandatory for markers to appear. | Field of marker_type |
Icon | Defines a custom icon for each marker dynamically. | Field of marker_type |
Color | Assigns a unique color to each marker using a dynamic field. | Field of marker_type |
Draggable | Allows users to drag markers when set to “yes.” | Field of marker_type |
Rotation | Controls the rotation angle for each marker. | Field of marker_type |
Size | Defines the size of each marker dynamically (default is 50px). | Field of marker_type |
== GENERIC MARKERS == | ||
Generic Icon | A single static image used as the icon for all markers. | Static Image |
Generic Color | A uniform color applied to all markers. | Color |
Generic Draggable | Makes all markers draggable by default. | Checkbox |
Generic Rotation | Applies a fixed rotation angle to all markers. | Static number |
Generic Size | Sets a consistent size for all markers. | Static number |
===== ZIPCODES ===== | ||
Enable Zipcodes | Enables zipcode layer functionality for visualizing regions. | Checkbox |
Allow Clicking | Allows zipcode regions to be clickable. | Checkbox |
Default Zipcode Highlight | Sets the default color used to highlight zipcode areas. | Color |
Zipcode Hover Color | Defines the color shown when hovering over a zipcode area. | Color |
Element Events
Name | Description |
Zipcode Clicked | Triggered when a user clicks on a specific zipcode area on the map. |
Zipcodes Highlighted | Fired when one or more zipcode areas become highlighted (e.g., on hover or selection). |
Zipcode Not Found | Triggered when a searched or referenced zipcode cannot be located on the map. |
Search Started | Fired when a geolocation or address search begins. Useful for showing loading indicators. |
Search Completed | Triggered when a map search operation successfully finishes and results are displayed. |
Search Error | Fired when an error occurs during a search process, such as an invalid address or network issue. |
Exposed States
Name | Description | Type |
Active Marker | The most recently clicked marker. | As marker_type |
Clicked Zipcode | The zipcode area that the user clicked on. | Text |
Zipcodes in Area | A list of zipcodes currently highlighted on the map. | Text |
Search Status | Status of the zipcode search (e.g., loading, success, failed). | Text |
Error Message | Any error message returned during actions. | Text |
Center Zipcode | The zipcode currently used to center the map. | Text |
Plugin Actions
Add a Line
Draws a line on the map connecting a list of geographic points. This can be used to represent paths, routes, or boundaries.
Name | Description | Type |
ID | A unique identifier for the line, useful for updating or removing it later. | Dynamic value (Text) |
Points | A list of geographic points that define the path of the line. | Dynamic value (Geographic address, List) |
Color | The color used to render the line on the map. | Color |
Width | The thickness of the line in pixels. | Dynamic value (Number) |
Remove a Line
Remove earlier drawn line by its ID.
Name | Description | Type |
ID | The unique identifier of the line that was previously added to the map. | Dynamic value (Text) |
Remove Markers
Removes one or more markers from the map using a provided list of marker references.
Name | Description | Type |
Markers | A list of markers to be removed from the map. | Dynamic value (Any type, List) |
Add a Polygon
Draws a polygon on the map using a list of geographic points, with customizable outline and fill properties.
Name | Description | Type |
ID | A unique identifier for the polygon. | Dynamic value (Text) |
Points | A list of geographic points used to draw the polygon. | Dynamic value (Geographic address, List) |
Outline Color | The color of the polygon's outline. | Color |
Outline Width | The width (thickness) of the polygon's outline. | Dynamic value (Number) |
Fill Color | The fill color inside the polygon. | Color |
Remove a Polygon
Removes a previously drawn polygon from the map using its unique identifier.
Name | Description | Type |
ID | The unique identifier of the polygon that was previously added. | Dynamic value (Text) |
Show Zipcodes in Area
Displays all zipcodes that fall within a defined radius from a specified center zipcode.
Name | Description | Type |
Center Zipcode | The central zipcode used as the reference point for the search. | Dynamic value (Text) |
Radius | The distance radius within which nearby zipcodes will be displayed. | Dynamic value (Number) |
Color | The highlight color used to display zipcode areas on the map. | Color |
Distance Units | The measurement unit for the radius distance (miles or kilometers). | Dropdown (mi, km) |
Disable Zipcodes
Disables zipcode highlighting and interaction on the map. This stops any active zipcode color overlays or clickable events from functioning.
Show Zipcodes List
Displays a collection of zipcodes directly on the map, highlighting each area based on the configured color.
Name | Description | Type |
Zipcodes | A list of zipcodes to display on the map. | Dynamic value (Text, List) |
Color | The highlight color used to fill zipcode areas. | Color |
Center Map by Zipcode
Centers the map view using a specified zipcode. Optionally, this can use a smooth fly animation for better user experience.
Name | Description | Type |
Zipcode | The zipcode used to center the map. | Dynamic value (Text) |
Use Fly Animation | If enabled, centers the map using a smooth fly animation. | Checkbox |
Add Markers
Places markers on the map using a list of database objects (marker_type). Each marker can have custom attributes such as address, icon, color, draggable state, rotation, and size.
If any specific marker property is not defined, the corresponding generic value (icon, color, draggable, rotation, or size) will be used as default.
Name | Description | Type |
Marker Type | The Bubble data type used for markers. | App Type |
Marker Source | The list of items to display as markers. | Dynamic value (marker_type, list) |
Address | The geographic address of the marker (required). | Field of marker_type (Address) |
Icon | The unique icon for each marker. | Field of marker_type (Text, Image, File) |
Color | The color to apply to individual markers. | Field of marker_type (Text, Image, File) |
Draggable | Enables dragging for the marker. | Field of marker_type (Yes/No) |
Rotation | Rotation angle for the marker. | Field of marker_type (Number) |
Size | The marker size; default is 50. | Field of marker_type (Number) |
Generic Icon | Default icon used when no specific icon is set. | Static Image |
Generic Color | Default color for markers without specific color settings. | Color |
Generic Draggable | Makes all markers draggable by default. | Checkbox |
Generic Rotation | Default rotation angle for all markers. | Static Number |
Generic Size | Default size for all markers. | Static Number |
Changelogs
Update 19.08.25 - Version 1.13.0
- Bubble Plugin Page Update (Price).
Update 15.07.25 - Version 1.12.0
- Bubble Plugin Page Update (Description).
Update 24.06.25 - Version 1.11.0
- Fixes issue where missing ZIPs weren’t shown on the map by fetching or generating geometry as needed..
Update 17.06.25 - Version 1.10.0
- Marketing update (minor change).
Update 04.06.25 - Version 1.9.0
- Enhanced ZIP code detection.
Update 17.02.25 - Version 1.8.0
- Minor update(Marketing update).
Update 17.02.25 - Version 1.7.0
- Acquired by Zeroqode.
Update 06.01.25 - Version 1.6.0
- Added action for centering map using a zipcode.
Update 19.12.24 - Version 1.5.0
- Fix a glitch with zipcode selections.
Update 18.12.24 - Version 1.4.0
- Show a list of zipcodes action, Allow click on zipcodes by condition.
Update 25.11.24 - Version 1.3.0
- Updated description.
Update 12.11.24 - Version 1.2.0
- Zip Code Management Mechanism.
Update 23.08.24 - Version 1.1.0
- Updated Description.
Update 12.10.23 - Version 1.0.3
- Updated Description.
Update 13.09.23 - Version 1.0.2
- Minor Fix.
Update 08.09.23 - Version 1.0.1
- Added Documentation.
Update 12.07.23 - Version 1.0.0
- First Release.