Demo to preview the settings
Introduction
Show your own MapBox map styles & 3D buildings inside your bubble app. Live user tracking, Markers, FlyTo, Pitch, Bearing, Zoom & Coordinate Control. MapBox Direction, Scale & Movement Controls + Much More!
Use the MapBox element to show your maps in your own styles. Then give your map life using the element actions. On mouse click, the plugin returns states that contain Latitude & Longitude as well as address.
The plugin also returns states with a list of markers, map's center address and you can trigger workflows when a marker is clicked.
Prerequisites
- Create account https://account.mapbox.com/auth/signup/
Note: The plugin uses the Directions API and the Mapbox GL JS APIs, which are paid after the free limit is exceeded. To clarify the price please visit the pricing page: https://www.mapbox.com/pricing.
Tutorial
Real use case in the template
Hotel Finder Map Template for Bubble
Hotel Finder Map Template page on Bubble. Use this template to speed up your app development. Bubble lets you build web apps without any code.
https://bubble.io/template/hotel-finder-map-1728663763784x152549310888673280
How to setup
- Go to https://account.mapbox.com/
- Copy Access token
Note: This is a public Access token! You can access tokens more secure by adding URL restrictions. When you add a URL restriction to a token, that token will only work for requests that originate from the URLs you specify. Tokens without restrictions will work for requests originating from any URL.
4. Put it in plugin fields
5. Place the MapBox Map element on the page
Plugin element properties
Element actions
1) Set Style
2) Turn 3D Building On
3) Add Marker
4) Fly To
5) Turn 3D Buildings Off
6) Remove Marker
7) Start Location Tracking
8) Stop Location Tracking
9) Set Center
10) Set Zoom
11) Set Bearing
12) Set Pitch
13) Set Directions
14) Add List of Markers
15) Toggle Controls Visibility
16) Remove Directions
17) Create a line
18) Create a heatmap layer
19) Add icon to map
20) Change language
21) Remove all markers
22) Create a symbol layer
23) Create a draggable marker
24) Toggle map rotation
25) Display popup on hover
26) Add fullscreen control
27) Add geocoder
28) Draw polygon
29) Enable measure distance
30) Disable measure distance
31) Filter features within map
32) Add a video
33) Create an animated route
34) Add 3D terrain
35) Remove 3D terrain
36) Animate the camera along a path
37) Remove Draggable Marker
38) Get Markers in Drawed Polygons
39) Add live realtime data
40) Check If marker is in polygon
41) Check if point is in geofence around the marker
42) Create Clusters
43) Remove Line or Polygon
44) Remove a symbol layer
45) Remove Clusters
46) Remove live realtime data
47) Set Autofill (from, to)
48) What markers are in polygon?
49) Set Area
50) Create US zip code area
51) Remove zip code area
Element states
Title | Description | Type |
GPS Current Position Lat | Current GPS position Latitude | Number |
GPS Current Position Lng | Current GPS position Longitude | Number |
GPS Accuracy | Accuracy of Current GPS position | Number |
GPS Altitude | Current GPS Altitude | Number |
Mouse Lng | Clicked position Longitude | Number |
Mouse Lat | Clicked position Latitude | Number |
GPS Enabled | Indicates if GPS is enabled | Yes/No |
Tracking | Indicates if Tracking is enabled | Yes/No |
Heading Supported | Indicates if Compass Heading is supported | Yes/No |
Heading Character | Сardinal Point | Text |
Heading | Heading | Number |
Marker Lat | Clicked marker coordinates latitude | Number |
Marker Lng | Clicked marker coordinates longitude | Number |
Map Center Lng | Current map center coordinates longitude | Number |
Map Center Lat | Current map center coordinates latitude | Number |
Speed | Moving Speed | Number |
Marker ID | Clicked Marker ID | Text |
Map Center Address | Current map center address | Geographic Address |
Line coordinates | Coordinates of line created by action Create Line | Text |
Draggable Marker Longitude | Current Longitude of the draggable marker | Number |
Draggable Marker Latitude | Current Latitude of the draggable marker | Number |
Polygon Area (meters) | Area of polygon drawed by Draw polygon action | Number |
Measure distances lenght | Length of line drawed by action Measure distance | Number |
Filtred features | List of returned values from action Filter Features | List of Text |
Directions A-point Longitude | Longitude of A-point of directions | Number |
Directions A-point Latitude | Latitude of A-point of directions | Number |
Directions B-point Longitude | Longitude of B-point of directions | Number |
Directions B-point Latitude | Latitude of B-point of directions | Number |
Drawed Polygons GeoJSON | GeoJSON of drawn polygons in text format | Text |
Point is in polygon | Indicates whether the specified point falls within the first drawn polygon | Yes/No |
Clicked line ID | Line ID | Text |
Point is inside of geofence | Indicates whether the specified point falls within the geofence | Yes/No |
Clicked Cluster Data | Text | |
Zoom Level | Indicates zoom level | Number |
Travel length (km) | Indicated distance in km | Number |
Created line or polygon ID | ID of created Line/Polygon | Text |
Created Cluster ID | ID of created Cluster | Text |
GPS Current Position Address | Indicates GPS Current Position Address | Text |
Bearing | Bearing | Number |
Pitch | Pitch Pace | Number |
Autofill From Value | Autofill text from input | Text |
Autofill To Value | Autofill text to input | Text |
Markers IDs in polygon | ID of marker inside polygon | Text |
Draggable marker ID | ID of draggable marker | Text |
Visible markers IDs | The ids of the markers that are visible on the map at the moment. | Text List |
Zip code | Zip code when clicking on the zip code area in the USA | Text |
Zip code area center Longitude | Longitude of the center of the zip code area in the USA | Number |
Zip code area center Latitude | Latitude of the center of the zip code area in the USA | Number |
Element events
Title | Description |
Marker Clicked | Triggers when an marker is clicked |
Marker is dragged | Triggers when an draggable marker is moved |
Polygon is drawed | Triggers when polygon is finished in draw tool |
Polygon is updated | Triggers when polygon is updated in draw tool |
Map is loaded | Triggers when map is loaded |
Route is set | Triggers when an route is set |
Measure Distance Set | Triggers when minimum 2 point is drawed in measure distance tool |
Created line is clicked | Triggers when a created line is clicked |
Cluster Clicked | Triggers when a cluster is clicked |
List of markers displayed | Triggers when a list of markers are displayed |
Clusters were created | Triggers when clusters are created |
Map is Clicked | Triggers when a map is clicked |
Zip code area clicked | Triggers when a zip code area is clicked |
Plugin API calls
Get Route Data (Full)
Return generated by MapBox route from Origin to Destination. Return response with all fields. Read https://docs.mapbox.com/api/navigation/directions/#retrieve-directions
Title | Description | Type |
Origin Lng | Route start position longitude | Number, Required |
Origin Lat | Route start position latitude | Number, Required |
Destination Lng | Route end position longitude | Number, Required |
Destination Lat | Route end position latitude | Number, Required |
Type | Type of route. Can be: driving-traffic, driving, cycling, walking | Enum Text, Required |
Access Token | Your default access token is available on your Account Dashboard | Text, Required |
Language | Language of the response | Text, Required |
Get Route Data (Simple)
Return generated by MapBox route from Origin to Destination.
Title | Description | Type |
Origin Lng | Route start position longitude | Number, Required |
Origin Lat | Route start position latitude | Number, Required |
Destination Lng | Route end position longitude | Number, Required |
Destination Lat | Route end position latitude | Number, Required |
Type | Type of route. Can be: driving-traffic, driving, cycling, walking | Enum Text, Required |
Access Token | Your default access token is available on your Account Dashboard | Text, Required |
Tip: For more information read MapBox Docs
