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
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
- Create account https://account.mapbox.com/auth/signup/
- Go to https://account.mapbox.com/
- Copy Access token
4. Put it in plugin fields
5. Place the MapBox Map element on the page
Plugin element properties
Element actions
1) Set Style
- 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.
- Color - Color - Color of the buildings - Required
3) Add Marker
Add a single marker to the map
- 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.
- 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.
- Marker ID - Text - ID of marker - Required
7) Start Location Tracking
Geolocate the user.
- 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.
- Latitude - Number - Latitude of center position - Required
- Longitude - Number - Longitude of center position - Required
10) Set Zoom
Sets the map's zoom level.
- 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.
- Bearing - Number - The desired bearing - Required
12) Set Pitch
Sets the map's pitch (tilt).
- 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.
- 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
- 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
- Visible - Yes/No - If checked visible, invisible otherwise - Required
16) Remove Directions
Remove directions from map controls.
17) Create a line
- 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]
]
]
}
}
]
}
18) Create a heatmap layer
- 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
- 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
- Map language - Enum - Map language code - Required
21) Remove all markers
Remove all markers from the map.
22) Create a symbol layer
- 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
- 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
- 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
26) Add fullscreen control
Add to the map fullscreen button.
- Position - Enum - Position of the button on the map - Required
27) Add geocoder
Add to the map or in the Group geocoder.
- 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.
- 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.
- 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.
- 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.
- 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
- 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
- Marker ID - Text - Draggable Marker ID - Required
38) Get Markers in Drawed Polygons
- 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:
Before update:
After update:
- Create line customization
This feature colors the drawn area.
- 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.
Update 08.02.22 - Version 1.43.0
Improvement:
- added new action "Create Clusters"
Find a short guide how to set it up here: https://forum.bubble.io/t/mapbox-maps-total-revamp-of-one-of-the-most-popular-bubble-plugins-from-zeroqode/165043/114?u=zeroqodesupport
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
Update 02.01.23 - Version 1.68.0
- Fixed "Create line" action
Update 12.01.23 - Version 1.69.0
- Added option to show popup when marker is hover and possiblity to indicate lat long dynamically
Update 20.01.23 - Version 1.70.0
- Added "UI Map default tab" option
Update 01.03.23 - Version 1.75.0
- Added "Remove line or polygon"action and "Created line or polygon id" state