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

Usage

Place the MapBox Element on the page and then you have access to its actions and states.

Actions:

  1. Set Style - you can choose the preferred style from the dropdown. Dropdown values are: Streets,Outdoors,Light,Dark,Satellite,Satellite Streets,Custom.

  2. Turn 3D Building On - turn the 3D view on if the location has a 3D representation.

  3. Add Marker - let you add a marker to the map. Fields with you can operate are Latitude, Longitude, Icon, Icon Size, Marker ID.

  4. Fly To - let you go to another location with a flying effect. Fields with you can operate are Latitude, Longitude, Zoom Speed, Fly Speed, Zoom Level, Bearing, Pitch.

  5. Turn 3D Buildings Off - turns 3D view off.

  6. Remove Marker - let you remove any marker from the map. Field with you can operate is Marker ID.

  7. Start Location Tracking - turns on live location tracking.

  8. Stop Location Tracking - turns off live location tracking.

  9. Set Center - centers the map at the given coordinates (latitude and longitude).

  10. Set Zoom - set the map zoom dynamically. Field - Zoom Level.

  11. Set Pitch - set the map pitch.

  12. Set Direction - display a route on the map. Fields - Origin and Destination, both should be geographical addresses. 12.1. Added new field Waypoints - To add waypoints in the route, you should paste coordinates in the same field in the properties of the element in the format below:

    In coordinates, longitude and latitude must be separated by a comma and each pair of coordinates must be separated by ";" (e.g. longitude, latitude; longitude, latitude; longitude, latitude )

  13. Remove Directions - removes set directions from the map.

  14. Create Line - used to draw geoJSON line and polygon by coordinates

When setting directions the route with waypoints can't be displayed in the "Traffic" view.

States:

  1. GPS Current Position Lat - number. Available when live tracking is on.

  2. GPS Current Position Lng - number. Available when live tracking is on.

  3. GPS Accuracy - number. Available when live tracking is on.

  4. GPS Altitude - number. Available when live tracking is on.

  5. Mouse Lng - number. Available when clicked on the map.

  6. Mouse Lat - number. Available when clicked on the map.

  7. GPS Enabled - yes/no. GPS permission on or off.

  8. Tracking - yes/no. Live tracking on or off.

  9. Heading Supported - yes/no.

  10. Heading Character - text.

  11. Marker Lat - number. Clicked marker latitude.

  12. Marker Lng - number. Clicked marker longitude.

  13. Map Center Lat - number. Center of map latitude.

  14. Map Center Lng - number. Center of map longitude.

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.

Demo to preview the settings