🔗

Link to plugin page: https://zeroqode.com/plugin/mapbox-maps-1528977923342x484968448273940500

Demo to preview the settings

🔗

Bubble: https://bubble.io/page?version=live&type=page&name=mapbox_new_responsive&id=zeroqode-demo-08&tab=tabs-1

🔗

Live Demo: https://zeroqode-demo-08.bubbleapps.io/mapbox_new_responsive

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/)

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

Go to https://account.mapbox.com/

Copy Access token

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

Title	Description	Type
Type	A string indicating the type of geometry to be added to the map. Valid values are "LineString", "Polygon", “MultiPolygon” and "MultiLine".	Dropdown
Coordinates	A string of comma-separated coordinates. Used for creating a single line,polygon or multipolygon. For multiplygon please see the example below	string
List of lines	A list of strings, where each string represents a line with comma-separated coordinates. This is used for drawing multiple lines (`MultiLine`).	List of strings
Source ID	A unique identifier for the source. If not provided, a random ID will be generated.	string
Color	The color used for the line or polygon fill.	color
Polygon Opacity	The opacity of the polygon fill (value between 0 and 1).	number
Line width	The width of the line. If not provided, a default value of 8px is used.	number
Remove same id	A boolean indicating whether to delete an existing line with the same `source_id` before drawing a new one.	yes/no

MyltiPolygon requires setting the coordinates and color. Here is an example of a Multipolygon JSON

{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"color": "red"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[115.813867, -31.932177],
[115.813867, -31.932177],
[115.813867, -31.932087],
[115.813962, -31.932087],
[115.813962, -31.932124],
[115.814005, -31.932124],
[115.814005, -31.932168],
[115.813962, -31.932168],
[115.813962, -31.932177],
[115.813867, -31.932177]
]
]
}
},
{
"type": "Feature",
"properties": {
"color": "blue"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[115.813962, -31.932087],
[115.813894, -31.932087],
[115.813894, -31.932042],
[115.81391, -31.932042],
[115.81391, -31.931967],
[115.813984, -31.931967],
[115.813984, -31.932042],
[115.81401, -31.932042],
[115.81401, -31.932087],
[115.813962, -31.932087]
]
]
}
},
{
"type": "Feature",
"properties": {
"color": "green"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[115.81391, -31.931967],
[115.81391, -31.931931],
[115.813849, -31.931931],
[115.813849, -31.9319],
[115.81386, -31.9319],
[115.81386, -31.931868],
[115.813984, -31.931868],
[115.813984, -31.931967],
[115.81391, -31.931967]
]
]
}
}
]
}

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

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:

Before update:

After update:

Create line customization

This feature colors the drawn area.

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.

Update 08.02.22 - Version 1.43.0

Improvement:

added new action "Create Clusters"

💡

Find a short guide on how to set it up here: https://forum.bubble.io/t/mapbox-maps-total-revamp-of-one-of-the-most-popular-bubble-plugins-from-zeroqode/165043/114?u=zeroqodesupport

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"

Update 01.04.24 - version 1.123.0

Minor fixes

Update 22.04.24 - version 1.126.0

Added clearing icon image cache, updated size default image action "Add List of Markers”

Update 02.05.24 - version 1.127.0

Updated Default Zoom

Update 14.05.24 - version 1.128.0

Added custom marker images in 'Create Clusters', Fixed element height in Safari, Updated action 'Draw'

Update 17.05.24 - version 1.129.0

Updated action 'Create Clusters'

Update 27.05.24 - version 1.130.0

Fixed displaying street names, updated actions Change language, Create line or polygon and Remove live realtime data

Update 29.05.24 - version 1.131.0

Added "Default icon" field to action ''Create Clusters', updated action "Remove realtime data"

Update 03.06.24 - version 1.132.0

Added ability to delete multi polygons in action "Remove line or polygon", updated event "Map is clicked"

Update 06.06.24 - version 1.133.0

Added fields 'Cluster max zoom', 'Allow overlap markers' in action 'Create Clusters'

Update 06.06.24 - version 1.134.0

Minor update

Update 27.06.24 - version 1.136.0

added display geofence in draggable marker and action 'Remove geofence'

Update 27.06.24 - version 1.137.0

Updated action 'Check if point is in geofence around the marker'

Update 04.07.24 - version 1.138.0

Added field 'Initial longitude', 'Initial latitude' in plugin element

Update 16.07.24 - Version 1.139.0

Added actions 'Turn on mobile compass' and "Request Orientation Permission For IOS".

Update 16.07.24 - Version 1.140.0

Added "Icon Anchor" to the Create cluster action.

Update 16.07.24 - Version 1.141.0

Fixed updating states "Heading Char" and 'Speed'.

Update 17.07.24 - Version 1.143.0

Added "text-color" field in "Create Clusters" action.

Update 25.07.24 - Version 1.144.0

Minor update .

Update 25.07.24 - Version 1.145.0

Minor update .

Update 30.07.24 - Version 1.146.0

Added action 'On/off input control' and event 'compass is off'.

Update 05.08.24 - Version 1.147.0

Updated state 'GPS Enabled'.

Update 09.08.24 - version 1.148.0

Added "Visible markers IDs" exposed state

Update 13.08.24 - Version 1.149.0

Fixed "Visible Markers IDs"

Update 22.08.24 - Version 1.150.0

Fixed "Marker Clicked" event.

Update 26.09.24 - Version 1.152.0

Added “Custom Theme” field, fixed “Drawed polygon JSON” state, and minor fixes.

Update 04.10.24 - Version 1.153.0

library version update - 3.7.0.

Title	Description	Type
Style Mode	One of the possible styles	Enum text, Required
Custom Style	Custom style url	Text, Optional

Title	Description	Type
Markers Type	Indicate a type of markers from your database	App Type, Required
ID field	Tell the plugin what field is your marker ID	field of app type, Required
Geographic Address	geographic address of the marker	geographic address only
Longitude Field	Tell the plugin what field is your marker longitude	Field of app type Required
Latitude Field	Tell the plugin what field is your marker latitude	Field of app type Required
Description	Tell the plugin what field is your marker description	Field of app type Optional
Markers Source	Source of markers. Use Do a search for..	List of app type Required
List of Icons	Source to list of images. Should contain a list of images in the same order as the added markers (supports .png, .webp and .jpg types of images )	List of Images, Optional
Icon Size	Icon size. Use Do a search for…	List of numbers, Required
Default Icon	Applies a default Icon image in case the "list of Icons" field is not specified	Image
Marker Cluster ID	Marker cluster id, used for removing entire markers cluster with Remove Marker action	Text, Required

Title	Description	Type
Layer ID	Position of the button on the map	Text, Required
Show Close Button	Show cross button on top-right corner of the popup	Yes/No, Required
Close on click	Close popup onclick	Yes/No, Required
Background Color	Color of popup	Color, Required
Font Size	Font size of the text in popup	Number, Required
Font Family	Font family of text in popup	Text, Optional
Field to show	Field from there to get a text for a popup	Text, Required

Title	Description	Type
Zoom	On geocoded result what zoom level should the map animate to when a bbox isn't found in the response. If a bbox is found the map will fit the bbox	Number, Required
Placeholder	Placeholder text	Text, Required
Minimal length	Minimum number of characters to enter before results are shown	Number, Required
Limit	Maximum number of results to show	Number, Required
Position	Position of geocoder on the map	Enum, Required
Language	Specify the language to use for response text and query result weighting. Options are IETF language tags comprised of a mandatory ISO 639-1 language code and optionally one or more IETF subtags for country or script. More than one value can also be specified, separated by commas. Defaults to the browser's language settings	Text, Optional
Add to input	If it is checked geocoder has been added in a group with Input ID id attribute	Yes/No, Required
Input ID	Id of group where to add geocoder	Text, Optional

Title	Description	Type
Layer ID	Set the Layer ID from there will be find features	Text, Required
Comparator	The field by which the uniqueness of features will be checked in order not to display duplicates	Text, Required
Filter Query	The field that features must have in order for it to be displayed	Text, Required
Returned Field	The field to be returned	Text, Required

MapBox Maps Plugin

Demo to preview the settings

Introduction

Prerequisites

How to setup

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

Element events

Plugin API calls

Get Route Data (Full)

Get Route Data (Simple)

Changelogs

Update 30.07.2019

Update 06.11.2019

Update 20.02.2020

Update 01.05.2020

Update 13.07.2020

Update 10.08.2020

Update 27.11.2020

Update 25.12.2020

Update 23.02.2021

Update 05.04.2021

Update 12.08.2021

Update 24.08.21 - Version: 1.33.0

Update 17.09.21 - Version: 1.36.0

Update 10.11.21 - Version: 1.39.0

Update 18.11.21 - Version: 1.40.0

Update 15.12.21 - Version 1.41.0

Update 23.12.21 - Version 1.42.0

Update 08.02.22 - Version 1.43.0

19) Add icon to map