144min

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. Create account https://account.mapbox.com/auth/signup/​
  2. Go to https://account.mapbox.com/​
  3. Copy Access token
Document image



4. Put it in plugin fields

Document image



5. Place MapBox Map element on the page

Document image

Plugin element properties

Element actions

1) Set Style

Allows you to change the style of the map display. Including your own custom styles.

Document image



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

Document image
  • Color - Color - Color of the buildings - Required

3) Add Marker

Add a single marker to the map

Document image
Document image

​​

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

Document image
  • 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.​

Document image
  • Marker ID - Text - ID of marker - Required​

7) Start Location Tracking

Geolocate the user.

Document image
  • 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.​

Document image



​​

  • Latitude - Number - Latitude of center position - Required
  • Longitude - Number - Longitude of center position - Required

10) Set Zoom

Sets the map's zoom level.​

Document image



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

Document image



​​

  • Bearing - Number - The desired bearing - Required​

12) Set Pitch

Sets the map's pitch (tilt).​

Document image

​

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

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

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

Document image

​​

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

16) Remove Directions

Remove directions from map controls.

17) Create a line

Document image

​​

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

18) Create a heatmap layer

Document image
  • 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​

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

Document image
  • Map language - Enum - Map language code - Required​

21) Remove all markers

Remove all markers from the map.​

22) Create a symbol layer

Document image

​​

  • 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

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

Document image



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

Document image



26) Add fullscreen control

Add to the map fullscreen button.​

Document image
  • Position - Enum - Position of the button on the map - Required​

27) Add geocoder

Add to the map or in the Group geocoder.​

Document image

​​

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

Document image



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

Document image



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

Document image
  • 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.​

Document image



  • 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

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

Document image



  • Marker ID - Text - Draggable Marker ID - Required​

38) Get Markers in Drawed Polygons

Document image



  • 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 polygonPoint is in polygonYes/NoIndicates 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​

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

Improvement: Version: 1.33.0

  • Added possibility to set position of markers using geographic address.

Update 17.09.21

Improvement: Version: 1.36.0

  • Fixed default map position from custom style

Update 10.11.21

Improvement: Version: 1.39.0

  • Exposed state "Drawed polygon GeoJSON" now return only coordinates of polygon

Update 18.11.21

Improvement: Version: 1.40.0

  • Added an action to check the intersection of a point with a polygon

Update 15.12.21

Improvement: Version 1.41.0

  • Fixed camera binding to the current location. Updated description in "Set Directions" action.

Update 23.12.21

Improvement: Version 1.42.0

  • Added possibility to change the route’s color and reference points radius:
Document image



Before update:

Document image



After update:

Document image
  • Create line customization

This feature colors the drawn area.

Document image
  • 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.

Document image
Document image



Update 08.02.22

Improvement: Version 1.43.0

  • added new action "Create Clusters"

​Update 14.02.22

Fixes: Version 1.44.0

  • minor fixes

Update 30.03.22

Improvement: Version 1.47.0

  • added a new event "A list of markers displayed"

Update 14.04.22

Improvement: Version 1.48.0

  • improved update rate of origin and destination point states

Update 21.04.22

Fix: Version 1.49.0

  • Fixed popup appearing when description is not set

Demo to preview the settings