MapBox Maps Plugin

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

API Key (register and get key at https://www.mapbox.com/)
  1. 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.
Image without caption

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.
Hotel Finder Map Template for Bubble

How to setup

  1. Go to https://account.mapbox.com/
  1. Copy Access token
Image without caption
4. Put it in plugin fields
Image without caption
5. Place the MapBox Map element on the page
Image without caption

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

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

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

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
Image without caption

Changelogs