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/)
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. Create account https://account.mapbox.com/auth/signup/
  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

Allows you to change the style of the map display. Including your own custom styles.
Image without caption
  • 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.​
Image without caption
  • Color - Color - Color of the buildings - Required

3) Add Marker

Add a single marker to the map
Image without caption
Image without caption
​​
  • 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.​
Image without caption
  • 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.​
Image without caption
  • Marker ID - Text - ID of marker - Required​

7) Start Location Tracking

Geolocate the user.
Image without caption
  • 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.​
Image without caption
​​
  • Latitude - Number - Latitude of center position - Required
  • Longitude - Number - Longitude of center position - Required

10) Set Zoom

Sets the map's zoom level.​
Image without caption
  • 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.​
Image without caption
​​
  • Bearing - Number - The desired bearing - Required​

12) Set Pitch

Sets the map's pitch (tilt).​
Image without caption
  • 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.
Image without caption
  • 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

Image without caption
Image without caption
  • Markers Type - App Type - Indicate a type of markers from your database. - Required
  • ID field - field of app type - Tell the plugin what field is your marker ID. - 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 (supports .png, .webp and .jpg types of images ). - Optional
  • Icon Size - List of numbers - Icon size. Use Do a search for… - Required.
  • Marker Cluster ID - Text - Marker cluster id, used for removing entire markers cluster with Remove Marker action. - Required
Note: Each marker unique id is configured this way: 'mbxmarker-' + marker unique_id + Marker Cluster ID Example: mbxmarker-123123124245452x1241532542522542ClusterID

15) Toggle Controls Visibility

Image without caption
​​
  • Visible - Yes/No - If checked visible, invisible otherwise - Required​

16) Remove Directions

Remove directions from map controls.

17) Create a line

Image without caption
​​
  • Coordinates - Text - The string contains coordinates of points separated by , - Required
  • Type - Enum - Type of line (Polygon,Line, MultiPolygon) - Required 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] ] ] } } ] }
Image without caption

18) Create a heatmap layer

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

19) Add icon to map

Image without caption
  • Icon - ImageIcon 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

Image without caption
  • Map language - Enum - Map language code - Required​

21) Remove all markers

Remove all markers from the map.​

22) Create a symbol layer

Image without caption
​​
  • 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
💡
Tip: You can use different tools to generate GeoJSON. Example: https://geojson.io/#map=2/20.0/0.0

23) Create a draggable marker

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

Image without caption
  • 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
💡
Tip: Field to show can be found in your GeoJson in properties
Image without caption

26) Add fullscreen control

Add to the map fullscreen button.​
Image without caption
  • Position - Enum - Position of the button on the map - Required​

27) Add geocoder

Add to the map or in the Group geocoder.​
Image without caption
​​
  • 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.​
Image without caption
  • 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.​
Image without caption
  • 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.​
Image without caption
  • 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.​
Image without caption
  • 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

Image without caption
  • 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
Image without caption
  • Marker ID - Text - Draggable Marker ID - Required​

38) Get Markers in Drawed Polygons

Image without caption
  • lat - Number - Point latitude - Required
  • long - Number - Point longtitude - Required

39) Add live realtime data

Use realtime location data streams to move a symbol (marker) on your map
Before using this action, insert the data into the Mapbox element (live tracking)
Image without caption
Image without caption
Image without caption

Element states

  • 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
  • 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

  • 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​​​
  • 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.​
  • 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​
💡
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
SHARE
content