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

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

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

Helpful?