Demo to preview the plugin:

Introduction

The Mapbox Maps plugin for Bubble provides integration with Mapbox for advanced map functionalities. It allows users to display and customize maps with various features such as markers, polygons, and custom styles. The plugin supports functions like geolocation, route drawing, and address search, enhancing user interaction with maps. It also includes dynamic capabilities like updating map data in real-time and customizing the appearance of map elements. The plugin is designed for easy configuration and offers a range of settings to tailor maps according to project requirements.
Usage Features:
  • Customizable map styles and themes.
  • Display multiple markers with custom icons.
  • Geocoding and reverse geocoding capabilities.
  • Route drawing and direction services.
  • Support for user interaction and click events on the map.
  • Dynamic data layers for dynamic data visualization.
  • Clustering of map markers for better visual management.
  • Map initialization with custom center and zoom level.
  • Integration with Mapbox's vector tiles for high-quality visuals.
  • Support for 3D terrain and building visualization.

Tutorial

🔔 The most risk-free way to try out this plugin is to subscribe to it. If you unsubscribe a few days later you will be charged on pro-rata basis, so for example if the plugin monthly price is $5 then you’d pay only 17¢ per day ($5/30 days)!
Image without caption

How to setup

  1. Add the MapBox Map element to your page
      • In the Bubble Editor, go to Design > Visual Elements.
      • Look for MapBox Map and drag it onto your page.
        • Element → MapBox.
          Element → MapBox.
  1. Customize the map appearance and behavior
    1. In the Appearance tab of the MapBox Map element, you can control:
      • UI Position: Position of default map controls (top-left, bottom-right, etc.)
      • Enable UI Map Inputs: Toggle built-in controls like zoom, directions, etc.
      • UI Map Default Tab: Choose the default view (e.g., driving-traffic).
      • Enable UI Route Instructions: Show step-by-step route directions.
      • Enable Navigation Controls: Show/Hide zoom/navigation buttons.
      • Nav Controls Position: Position of those navigation buttons.
      • Language / Navigation Language: Set the interface and directions language.
      • Theme: Choose between “Streets”, “Satellite”, etc.
      • Zoom on Scrolling: Enable zoom with mouse scroll.
      • Default Zoom, Initial Longitude, Initial Latitude: Define starting view.

Plugin Element Properties

MapBox Map

Element properties → MapBox Map
Element properties → MapBox Map
Fields:
Title
Description
Type
Controls
Add map controls
Checkbox (yes/no)
Center
Where is map centered initially
Geographic Address (optional)
Zoom
Initial map zoom
Number (optional)
Style
Map style Available options: streets-v12, outdoors-v12, light-v11, dark-v11, satellite-v9, satellite-streets-v12, navigation-day-v1, navigation-night-v1
Dropdown (optional)
Disable Zoom on Scroll
Disable map zoom on scroll
Checkbox (yes/no)
Show Branding
Show MapBox branding
Checkbox (yes/no)
====== MARKERS ======
Marker Type
Bubble type you want to display as a marker on map
App Type (optional)
Markers Source
A list of things to be displayed as markers on map
Item representing Marker Type (optional)
Address
Address field is mandatory, and should be as geographic address type
Field of Marker Type, represent Geographic Address
Icon
Unique icon for each marker
Field of Marker Type, represent Text, image or file (optional)
Color
You can use a unique color for your markers if you are not using icons
Field of Marker Type, represent Text, image or file (optional)
Draggable
Mark marker as draggable
Field of Marker Type, represent Checkbox (yes/no) (optional)
Rotation
Marker could be rotated in range of [0 - 360] degrees
Field of Marker Type, represent Number (optional)
Size
Marker size, default is 50x50 pixels
Field of Marker Type, represent Number (optional)
====== GENERIC MARKERS PROPERTIES ======
Generic Icon
A generic icon for all markers
Image (optional)
Generic Color
A generic color for all markers
Color (optional)
Generic Draggable
Mark all markers as draggable or not
Checkbox (yes/no)
Generic Rotation
Set rotation angle for all markers
Number (optional)
Generic Size
Set generic size for all markers. Default 50x50 pixels
Number (optional)
====== ZIPCODES ======
Enable Zipcodes
If enabled, you can work with zipcode areas
Checkbox (yes/no)
Allow Clicking
Enable zipcode clicking
Checkbox (yes/no)
Default Zipcode highlight
Default zipcode areas highlight color, it will be override on using “Show Zipcodes in Area” action
Color
Zipcode Hover color
Zipcode area hover color
Color

Element Actions

Plugin Data Calls

MapBox - Get Route Data (Full)

This data call retrieves complete routing information between two or more points.
Plugin data → MapBox - Get Route Data (Full).
Plugin data → MapBox - Get Route Data (Full).
Return Values:
Return type: JSON
json
{ "routes": [ { "distance": 3783.2, "duration": 547.4, "geometry": { "coordinates": [ [28.907089, 47.00367], [29.47111, 46.83056] ], "type": "LineString" }, "legs": [ { "summary": "", "steps": [ { "distance": 340.5, "duration": 55.2, "maneuver": { "instruction": "Head southeast on Main Street" } }, { "distance": 870.2, "duration": 115.3, "maneuver": { "instruction": "Turn right onto Highway 1" } } ] } ] } ], "waypoints": [ { "location": [28.907089, 47.00367], "name": "Start Point" }, { "location": [29.47111, 46.83056], "name": "End Point" } ], "code": "Ok" }

MapBox - Get Route Data (Simple)

This version retrieves a lightweight route object between two or more points.
Plugin data → MapBox - Get Route Data (Simple)
Plugin data → MapBox - Get Route Data (Simple)
Return Values:
Return type: JSON
json
{ "distance": 3783.2, "duration": 547.4, "geometry": { "coordinates": [ [28.907089, 47.00367], [29.47111, 46.83056] ], "type": "LineString" } }

Exposed states

Title
Description
Type
Active Marker
Last clicked marker
Text
Clicked Zipcode
Clicked zipcode area
Text
Zipcodes in Area
Zipcodes in highlighted area
Text

Element Events

Event Name
Description
A MapBox Map Marker Clicked
Triggered when a marker on the map is clicked.
A MapBox Map Marker Is Dragged
Triggered while a marker is being dragged.
A MapBox Map Polygon Is Drawed
Triggered when a polygon is drawn on the map.
A MapBox Map Polygon Is Updated
Triggered when an existing polygon is modified.
A MapBox Map Map Is Loaded
Triggered when the map has fully loaded and is ready.
A MapBox Map Route Is Set
Triggered when a route is successfully generated.
A MapBox Map Measure Distance Set
Triggered after measuring distance between points.
A MapBox Map The Search For Points In The Polygon Is Completed
Triggered when the search for points inside a polygon is done.
A MapBox Map Created Line Is Clicked
Triggered when a user clicks on a custom-created line on the map.
A MapBox Map Cluster Marker Clicked
Triggered when a cluster marker is clicked.
A MapBox Map List Of Markers Displayed
Triggered when the list of markers has been fully rendered on the map.
A MapBox Map Clusters Were Created
Triggered when marker clusters are generated.
A MapBox Map Map Is Clicked
Triggered when the user clicks anywhere on the map.
A MapBox Map Line Is Drawed
Triggered when a line is drawn by the user.
A MapBox Map Line Is Updated
Triggered when an existing line is modified.
A MapBox Map Cluster Clicked
Triggered when a user clicks on a cluster (group of markers).
A MapBox Map Compass Is Off
Triggered when the map compass (orientation) is turned off.
A MapBox Map Zip Code Area Clicked
Triggered when a user clicks inside a highlighted ZIP code area.
Image without caption

Changelogs