Link to plugin page: https://zeroqode.com/plugin/mapbox-maps-1528977923342x484968448273940500
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.
API Key (register and get key at https://www.mapbox.com/)
4. Put it in plugin fields
5. Place MapBox Map element on the page
1) Set Style
Allows you to change the style of the map display. Including your own custom styles.
2) Turn 3D Building On
Enable layer that displays building heights in 3D.
3) Add Marker
Add a single marker to the map
4) Fly To
Sets the map camera to a position simulating flight.
5) Turn 3D Buildings Off
Disable layer that displays building heights in 3D.
6) Remove Marker
Remove marker from map by it ID.
7) Start Location Tracking
Geolocate the user.
8) Stop Location Tracking
Unregister user location.
9) Set Center
Sets the map's geographical Centerpoint.
10) Set Zoom
Sets the map's zoom level.
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.
12) Set Pitch
Sets the map's pitch (tilt).
13) Set Directions
Set route in directions. Directions is a full-featured directions plugin for Mapbox GL JS using the Mapbox Directions API.
14) Add List of Markers
Each marker unique id is configured this way: 'mbxmarker-' + marker unique_id + Marker Cluster ID
15) Toggle Controls Visibility
16) Remove Directions
Remove directions from map controls.
17) Create a line
18) Create a heatmap layer
19) Add icon to map
20) Change language
21) Remove all markers
Remove all markers from the map.
22) Create a symbol layer
You can use different tools to generate GeoJSON. Example: https://geojson.io/#map=2/20.0/0.0
23) Create a draggable marker
24) Toggle map rotation
Enable or disable the possibility to rotate the map.
25) Display popup on hover
Field to show can be found in your GeoJson in properties
26) Add fullscreen control
Add to the map fullscreen button.
27) Add geocoder
Add to the map or in the Group geocoder.
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.
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.
32) Add a video
Add a video to the map.
33) Create an animated route
Creates a line between two points and animates the moving of the icon along this path.
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
37) Remove Draggable Marker
Remove draggable marker by its ID
38) Get Markers in Drawed Polygons
Return generated by MapBox route from Origin to Destination. Return response with all fields. Read https://docs.mapbox.com/api/navigation/directions/#retrieve-directions
Return generated by MapBox route from Origin to Destination.
New action added
New plugin propriety
Return Data as API Call and New States
Improvements and changes:
Improvement: Version: 1.33.0
Improvement: Version: 1.36.0
Improvement: Version: 1.39.0
Improvement: Version: 1.40.0
Improvement: Version 1.41.0
Improvement: Version 1.42.0
This feature colors the drawn area.
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.
Improvement: Version 1.43.0
Fixes: Version 1.44.0
Improvement: Version 1.47.0
added a new event "A list of markers displayed"
Improvement: Version 1.48.0
improved update rate of origin and destination point states
Fix: Version 1.49.0
Fixed popup appearing when description is not set