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.

How to setup

1. Create account https://account.mapbox.com/auth/signup/

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

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
Destionation	Text	Destination of the route. "Longitude,Latitude"	Required
Add Waypoints	Text	Waypoint of 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 has a unique id: '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 line

Title	Type	Description
Coordinates	Text	The string contains coordinates of a 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 maxzoom, 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 number 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 draggable marker. Can be number from 0 to 1.	Required
Icon Color	Color	Color of marker	Required
Default longitude	Number	Longitude of initial position of the marker	Required
Default latitude	Number	Latitude of initial position of the marker	Required
Marker ID	Text	Marker ID	Required

24) Toggle map rotation

Enable or disable posibility 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 popup	Required
Close on click	Yes/No	Close popup onclick	Required
Background Color	Color	Color of popup	Required
Font Size	Number	Font size of text in popup	Required
Font Family	Text	Font family of text in popup	Optional
Field to show	Text	Field from there to get text for popup	Required

Field to show can be find in your GeoJson in properties

Correct Field to show

26) Add fullscreen control

Add to the map fulscreen 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 to 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 is checked geocoder has been added in 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 length of this line

30) Disable measure distance

Disable tool for drawing line on the map

31) Filter features within map

Return a list of features from 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 animated route

Create line between two points and animate 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

Make magic

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	Required

Get Route Data (Simple)

Return generated by MapBox route from Origin to Destination.

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

For more information read MapBox Docs

Changelog