Plugins
Templates
MapBox Maps Plugin

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/)
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. 3.
    Copy Access token
4. Put it in plugin fields
5. Place MapBox Map element on the page
​

Plugin element properties

Element actions

1) Set Style

Allows you to change the style of the map display. Including your own custom styles.
​
Title
Type
Description
​
Style Mode
Enum text
One of the possible styles
Required
Custom Style
Text
Custom style url
Optional
​

2) Turn 3D Building On

Enable layer that displays building heights in 3D.
​
​
Title
Type
Description
​
Color
Color
Color of the buildings
Required

​

3) Add Marker

Add a single marker to the map
​
​
Title
Type
Description
​
Lat
Number
Marker position latitude
Required
Lng
Number
Marker position longitude
Required
Marker
Image
Marker image
Required
Icon Size (px)
Number
Marker size
Required
Marker ID
Text
Marker ID
Required
Description
Text
Description of the marker
Optional
Marker Rotation (deg)
Number
The rotation angle of the marker in degrees. A positive value will rotate the marker clockwise.
Required
Icon anchor
Enum
A string indicating the part of the Marker that should be positioned closest to the coordinate.
Required

4) Fly To

Sets the map camera to a position simulating flight.
​
​
Title
Type
Description
​
Lng
Number
Lontitude of the position
Required
Lat
Number
Latitude of the position
Required
Zoom Speed
Number
The average speed of the animation defined in relation to options.curve . A speed of 1.2 means that the map appears to move along the flight path by 1.2 times options.curve screenfuls every second.
Required
Fly Speed
Number
The zooming "curve" that will occur along the flight path. A high value maximizes zooming for an exaggerated animation, while a low value minimizes zooming.
Required
Zoom Level
Number
The desired zoom level.
Required
Bearing
Number
The desired bearing in degrees. The bearing is the compass direction that is "up". For example, bearing: 90 orients the map so that east is up.
Required
Pitch
Number
The desired pitch in degrees. The pitch is the angle towards the horizon measured in degrees with a range between 0 and 60 degrees.
Required

​

5) Turn 3D Buildings Off

Disable layer that displays building heights in 3D.
​

6) Remove Marker

Remove marker from map by it ID.
​
​
Title
Type
Description
​
Marker ID
Text
ID of marker
Required

​

7) Start Location Tracking

Geolocate the user.
​
Title
Type
Description
​
Zoom
Number
Specify zoom level on start location tracking
Optional
​

8) Stop Location Tracking

Unregister user location.
​

9) Set Center

Sets the map's geographical Centerpoint.
​
​
Title
Type
Description
​
Latitude
Number
Latitude of center position
Required
Longitude
Number
Longitude of center position
Required

​

10) Set Zoom

Sets the map's zoom level.
​
​
Title
Type
Description
​
Zoom Level
Number
The zoom level to set (0-20).
Required

​

11) Set Bearing

Sets the map's bearing (rotation). The bearing is the compass direction that is "up"; for example, a bearing of 90Β° orients the map so that east is up.
​
​
Title
Type
Description
​
Bearing
Number
The desired bearing.
Required
​

12) Set Pitch

Sets the map's pitch (tilt).
​
Title
Type
Description
​
Pitch
Number
The pitch to set, measured in degrees away from the plane of the screen (0-60).
Required
​

13) Set Directions

Set route in directions. Directions is a full-featured directions plugin for Mapbox GL JS using the Mapbox Directions API.
​
Title
Type
Description
​
Origin
Text
Origin of the route. "Longitude,Latitude"
Required
Destination
Text
Destination of the route. "Longitude,Latitude"
Required
Add Waypoints
Text
Waypoint of the route. String with coordinates of points separated by ;."Longitude,Latitude;Longitude,Latitude;Longitude,Latitude"
Optional
​

14) Add List of Markers

​
​
​
Title
Type
Description
​
Markers Type
App Type
Indicate a type of markers from your database.
Required
Longitude Field
Field of app type
Tell the plugin what field is your marker longitude.
Required
Latitude Field
Field of app type
Tell the plugin what field is your marker latitude.
Required
Description
Field of app type
Tell the plugin what field is your marker description.
Optional
Markers Source
List of app type
Source of markers. Use Do a search for...
Required
Icon
Image
Icon that will use your markers.
Optional
List of Icons
List of Images
Source to list of images. Should contain a list of images in the same order as the added markers.
Optional
Icon Size
Number
Icon size.
Required
Marker Cluster ID
Text
Marker cluster id, used for removing entire markers cluster with Remove Marker action.
Required
Each marker unique id is configured this way: 'mbxmarker-' + marker unique_id + Marker Cluster ID
Example: mbxmarker-123123124245452x1241532542522542ClusterID
​

15) Toggle Controls Visibility

​
​
Title
Type
Description
​
Visible
Yes/No
If checked visible, invisible otherwise
Required
​

16) Remove Directions

Remove directions from map controls.

17) Create a line

​
​
Title
Type
Description
​
Coordinates
Text
The string contains coordinates of points separated by ,
Required
Type
Enum
Type of line
Required
​

18) Create a heatmap layer

​
​
Title
Type
Description
​
Source Data
Text
URL to GeoJson
Required
Source ID
Text
Id of source
Required
Layer ID
Text
Id of layer
Required
Layer max zoom
Number
The maximum zoom level for the layer. At zoom levels equal to or greater than the max zoom, the layer will be hidden. The value can be any number between 0 and 24 (inclusive).
Required
Layer paint
Text
Paint properties. See MapBox Style Specification​
Required
​

19) Add icon to map

​
​
Title
Type
Description
​
Icon
Image
Icon image
Optional
Icon Size
Number
Icon size. Can be numbers from 0 to 1.
Required
Lat
Number
Latitude of icon position
Required
Long
Number
Longitude of icon position
Required
​

20) Change language

​
​
Title
Type
Description
​
Map language
Enum
Map language code
Required
​

21) Remove all markers

Remove all markers from the map.
​

22) Create a symbol layer

​
​
Title
Type
Description
​
Source Data
Text
URL to GeoJson
Required
Source ID
Text
ID of source
Required
Layer ID
Text
ID of layer
Required
Layer Layout
Text
Define how data for that layer is passed to the GPU.
Required
You can use different tools to generate GeoJSON. Example: https://geojson.io/#map=2/20.0/0.0​
​

23) Create a draggable marker

​
​
Title
Type
Description
​
Icon Size
Number
Size of the draggable marker. Can be a number from 0 to 1.
Required
Icon Color
Color
Color of marker
Required
Default longitude
Number
Longitude of the initial position of the marker
Required
Default latitude
Number
Latitude of the initial position of the marker
Required
Marker ID
Text
Marker ID
Required
​

24) Toggle map rotation

Enable or disable the possibility to rotate the map.
​

25) Display popup on hover

​
Title
Type
Description
​
Layer ID
Text
Id of the layer there add popups
Required
Show Close Button
Yes/No
Show cross button on top-right corner of the popup
Required
Close on click
Yes/No
Close popup onclick
Required
Background Color
Color
Color of popup
Required
Font Size
Number
Font size of the text in popup
Required
Font Family
Text
Font family of text in popup
Optional
Field to show
Text
Field from there to get a text for a popup
Required
Field to show can be found in your GeoJson in properties
​
Correct Field to show

26) Add fullscreen control

Add to the map fullscreen button.
​
​
Title
Type
Description
​
Position
Enum
Position of the button on the map
Required
​

27) Add geocoder

Add to the map or in the Group geocoder.
​
​
Title
Type
Description
​
Zoom
Number
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.
Required
Placeholder
Text
Placeholder text
Required
Minimal length
Number
Minimum number of characters to enter before results are shown.
Required
Limit
Number
Maximum number of results to show.
Required
Position
Enum
Position of geocoder on the map
Optional
Language
Text
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.
Optional
Add to input
Yes/No
If it is checked geocoder has been added in a group with Input ID id attribute
Required
Input ID
Text
Id of group where to add geocoder
Optional
​

28) Draw polygon

Add to the map drawing tool.
​
​
Title
Type
Description
​
Position
Enum
Set position of buttons for drawing on the map
Required
​

29) Enable measure distance

Activate tool for drawing a line with points on the map and return the length of this line.

30) Disable measure distance

Disable tool for drawing a line on the map.

31) Filter features within map

Return a list of features from the layer filtered by visibility on the map.
​
​
Title
Type
Description
​
Layer ID
Text
Set the Layer ID from there will be find features
Required
Comparator
Text
The field by which the uniqueness of features will be checked in order not to display duplicates
Required
Filter Query
Text
The field that features must have in order for it to be displayed
Required
Returned Field
Text
The field to be returned
Required
​

32) Add a video

Add a video to the map.
​
​
Title
Type
Description
​
Video
File
Video to add
Required
Left-top Lat
Number
Latitude of the left-top corner
Required
Left-top Long
Number
Longitude of the left-top corner
Required
Right-top Lat
Number
Latitude of the right-top corner
Required
Right-top Long
Number
Longitude of the right-top corner
Required
Right-bottom lat
Number
Latitude of the right-bottom corner
Required
Right-bottom long
Number
Longitude of the right-bottom corner
Required
Left-bottom lat
Number
Latitude of the left-bottom corner
Required
Left-bottom long
Number
Longitude of the left-bottom corner
Required
Source ID
Text
Source ID of video layer
Required

​

33) Create an animated route

Creates a line between two points and animates the moving of the icon along this path.
​
​
Title
Type
Description
​
Point ID
Text
Id of the moving item
Required
Point Image
Image
Image of the moving item
Required
Route ID
Text
Id of the line
Required
Origin
Text
Position of the route start
Optional
Destination
Text
Position of the route end
Optional
Route
Text
Route getted from MapBox Route API
Optional
Image size
Number
Size of the moving image
Required
​

34) Add 3D terrain

It uses exaggeration to exaggerate the height of the terrain. It also adds a sky layer that shows when the map is highly pitched.

35) Remove 3D terrain

36) Animate the camera along a path

​
Title
Type
Description
​
Origin
Text
Position of the start point
Optional
Destination
Text
Position of the end point
Optional
Route
Number
Route generated by MapBox API
Optional

​

37) Remove Draggable Marker

Remove draggable marker by its ID
Title
Type
Description
​
Marker ID
Text
Draggable Marker ID
Required

​

38) Get Markers in Drawed Polygons

​
Title
Type
Description
​
lat
Number
Point latitude
Required
long
Number
Point longtitude
Required

Element states

Title
Type
Description
GPS Current Position Lat
Number
Current GPS position Latitude
GPS Current Position Lng
Number
Current GPS position Longitude
GPS Accuracy
Number
Accuracy of Current GPS position
GPS Altitude
Number
Current GPS Altitude
Mouse Lng
Number
Clicked position Longitude
Mouse Lat
Number
Clicked position Latitude
GPS Enabled
Yes/No
Indicates if GPS is enabled
Tracking
Yes/No
Indicates if Tracking is enabled
Heading Supported
Yes/No
Indicates if Compass Heading is supported
Heading Character
Text
Π‘ardinal Point
Heading
Number
Heading
Marker Lat
Number
Clicked marker coordinates latitude
Marker Lng
Number
Clicked marker coordinates longitude
Map Center Lng
Number
Current map center coordinates longitude
Map Center Lat
Number
Current map center coordinates latitude
Speed
Number
Moving Speed
Marker ID
Text
Clicked Marker ID
Tracking Address
Geographic Address
Live tracking address
Map Center Address
Geographic Address
Current map center address
Line coordinates
Text
Coordinates of line created by action Create Line
Draggable Marker Longitude
Number
Current Longitude of the draggable marker
Draggable Marker Latitude
Number
Current Latitude of the draggable marker
Polygon Area (meters)
Number
Area of polygon drawed by Draw polygon action
Measure distances lenght
Number
Length of line drawed by action Measure distance
Filtred features
List of Text
List of returned values from action Filter Features
Directions A-point Longitude
Number
Longitude of A-point of directions
Directions A-point Latitude
Number
Latitude of A-point of directions
Directions B-point Longitude
Number
Longitude of B-point of directions
Directions B-point Latitude
Number
Latitude of B-point of directions
Drawed Polygons GeoJSON
Text
GeoJSON of drawn polygons in text format
Point is in polygon
Yes/No
Indicates whether the specified point falls within the first drawn polygon

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
​

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
Type
Description
​
Origin Lng.
Number
Route start position longitude
Required
Origin Lat.
Number
Route start position latitude
Required
Destination Lng.
Number
Route end position longitude
Required
Destination Lat.
Number
Route end position latitude
Required
Type
Enum Text
Type of route. Can be: driving-traffic, driving, cycling, walking
Required
Access Token
Text
Your default access token is available on your Account Dashboard.
Required
Language
Text
Language of the response