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.

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

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

Changelogs

Update 30.07.2019

New action added
  • Add List of Markers - will let you add list of markers to the map from database values
New plugin propriety
  • Marker Cluster ID - this ID can be used to delete a list of markers with Remove Marker action

Update 06.11.2019

Return Data as API Call and New States
  • Improvements - expose now speed state, added API call for retrieving route details.

Update 20.02.2020

  • Improvements - Remove Route action, Zoom parameter, on Track Location action, don't show popup if marker description is empty, clicked marker id state.

Update 01.05.2020

  • Improvements - were added real geographical addresses states, for Live Tracking address, Map center address, Clicked marker address

Update 13.07.2020

Improvements and changes:
  • Added Marker Rotation propriety field for Add Marker Action
  • For Map Element added new propriety which Navigation Controls and it’s position on Map
  • Also added possibility to Create a Route on Map click, (see the demo for workflow setup).
  • Added possibility to choose the Language for Route Instructions

Update 10.08.2020

Improvements:
  • Added GeoJSON Lines creation feature
  • Added GeoJSON Polygon creation feature
  • New action Create Line A MapBox

Update 27.11.2020

Improvements:
  • Added new feature - the ability to add waypoints to the route in the set direction action

Update 25.12.2020

Changes:
  • Changed type of property 'type' in the Create Line Action"

Update 23.02.2021

Improvement:
  • Added the possibility at action "add markers" with data source from API.

Update 05.04.2021

Improvements:
  • Added new features. You can now add various icons for the marker list, add a heatmap layer, add a description for any marker, and more. See the documentation for details.

Update 12.08.2021

Improvement:
  • In list of markers removed popups from markers without description.

Update 24.08.21 - Version: 1.33.0

Improvement:
  • Added possibility to set position of markers using geographic address.

Update 17.09.21 - Version: 1.36.0

Improvement:
  • Fixed default map position from custom style

Update 10.11.21 - Version: 1.39.0

Improvement:
  • Exposed state "Drawed polygon GeoJSON" now return only coordinates of polygon

Update 18.11.21 - Version: 1.40.0

Improvement:
  • Added an action to check the intersection of a point with a polygon

Update 15.12.21 - Version 1.41.0

Improvement:
  • Fixed camera binding to the current location. Updated description in "Set Directions" action.

Update 23.12.21 - Version 1.42.0

Improvement:
  • Added possibility to change the route’s color and reference points radius:
Image without caption
Before update:
Image without caption
After update:
Image without caption
  • Create line customization
This feature colors the drawn area.
Image without caption
  • Geofence
This feature determines if the marker is in the geofence. Provides the possibility to check through a state (Clicked Line ID) if the clicked point is within geofence or not.
Image without caption
Image without caption

Update 08.02.22 - Version 1.43.0

Improvement:
  • added new action "Create Clusters"

Update 14.02.22 - Version 1.44.0

Fixes:
  • minor fixes

Update 30.03.22 - Version 1.47.0

Improvement:
  • added a new event "A list of markers displayed"

Update 14.04.22 - Version 1.48.0

Improvement:
  • the improved update rate of origin and destination point states

Update 21.04.22 - Version 1.49.0

Fix:
  • Fixed popup appearing when the description is not set

Update 25.08.22 - Version 1.53.0

Fix:
  • Fixed "Set directions" action

Update 02.09.22 - Version 1.55.0

Improvement:
  • adapting to the new responsive engine

Update 16.09.22 - Version 1.58.0

  • Fixed action "Add List of Markers"

Update 19.09.22 - Version 1.59.0

  • Adjusted common part

Update 21.09.22 - Version 1.60.0

  • Minor fixes

Update 20.10.22 - Version 1.62.0

  • Added "Zoom Level" state

Update 27.10.22 - Version 1.63.0

  • Fixed "Zoom Level" state

Update 31.10.22 - Version 1.64.0

  • fixed position for the old responsive engine

Update 03.11.22 - Version 1.65.0

  • Fixed "Draw polygon" action

Update 15.11.22 - Version 1.66.0

  • Added β€œMultiPolygon” option in the β€œCreate line” action

Update 16.11.22 - Version 1.67.0

  • Added "Travel length (km)" state

Update 02.01.23 - Version 1.68.0

  • Fixed the "Create line" action

Update 12.01.23 - Version 1.69.0

  • Added option to show the popup when the marker is hovered, and a possibility to indicate lat long dynamically

Update 20.02.23 - Version 1.70.0

  • Added "UI Map default tab" option

Update 20.01.23 - Version 1.71.0

  • updated the description

Update 2.02.23 - Version 1.72.0

  • updated the description

Update 21.02.23 - Version 1.73.0

  • updated the description

Update 23.02.23 - Version 1.74.0

  • deleted the icons

Update 1.03.2023 - Version 1.75.0

  • Added β€œRemove line or polygon” action and β€œCreated line or polygon” state

Update 28.03.23 - Version 1.76.0

  • Fixed "Set Style" action

Update 04.04.23 - Version 1.77.0

  • Fixed the "Add 3D terrain" action

Update 25.04.23 - Version 1.78.0

  • Added "Remove Clusters", and "Remove a symbol layer" actions and "Sky Style" field

Update 14.06.23 - Version 1.79.0

  • Added "Add live realtime data" action, "Live tracking" fields, and fixed "sky style”

Update 16.06.23 - Version 1.80.0

  • updated description

Update 22.06.23 - Version 1.81.0

  • updated description

Update 11.07.23 - Version 1.82.0

  • fixed the "Add Waypoints" field in the "Set Directions" action

Update 11.07.23 - Version 1.83.0

  • updated description

Update 17.07.23 - Version 1.84.0

  • Fixed adding more waypoints in the "Set Directions" action.

Update 25.07.23 - Version 1.85.0

  • Added "GPS Current Position Address" state and minor fixed

Update 04.08.23 - Version 1.86.0

  • Fixed "Set Directions" action

Update 17.08.23 - Version 1.87.0

  • Fixed "Set Directions" action

Update 08.09.23 - Version 1.89.0

  • Added "Remove live realtime data" action and fixed "Add live realtime data" action

Update 19.09.23 - Version 1.92.0

  • Added "Custom Popup Content" field in the "Create a draggable marker" action

Update 20.09.23 - Version 1.95.0

  • Added "ID Cluster" field in the "Create Clusters" action

Update 02.10.23 - Version 1.96.0

  • Added an option "Add clusters data from the database", and updated β€œCreate Clusters” action.

Update 04.10.23 - Version 1.97.0

  • Fixed "fly to" action and added "Bearing", "Pitch" states

Update 16.11.23 - Version 1.101.0

  • Added "What markers are in polygon?" and fixed "Add List of Markers" action

Update 28.11.23 - Version 1.102.0

  • Fixed "What markers are in polygon?" action.

Update 07.12.23 - Version 1.103.0

  • Fixed β€œAdd Marker” action and minor fixes

Update 03.01.24 - Version 1.108.0

  • Added "Disable Blue Radius" field in "Start Location Tracking" action

Update 10.01.24 - Version 1.109.0

  • Added "Icon anchor" field in the "Add List of Markers" action.

Update 18.01.24 - Version 1.110.0

  • Added moving markers by click

Update 25.01.24 - Version 1.112.0

  • Multiple lines option added

Update 26.01.24 - Version 1.113.0

  • Fixed changing map size on Android.

Update 05.02.24 - Version 1.115.0

  • Updated functions code

Update 15.02.24 - Version 1.116.0

  • Added β€˜Live Tracking ID’ field in element
  • Fixed β€œAdd live realtime data” action
  • Added checkbox β€˜Show User Heading’ to the action β€˜Start Location Tracking’
  • Fixed β€œSet Autofill (from, to)” action

Update 19.02.24 - Version 1.117.0

  • Added "Map is Clicked" event

Update 22.02.24 - Version 1.118.0

  • Fixed "Map is Clicked" event

Update 07.03.24 - version 1.120.0

  • Added action "Set Area", added custom image to action "Create a draggable marker"
Share
Content