Plugins
Templates

MapBox Maps Plugin

Link to plugin page: https://zeroqode.com/plugin/mapbox-maps-1528977923342x484968448273940500

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/)

How to setup

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

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

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

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

Demo to preview the settings