Templates
Template Setup Guides

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.

Pre requisites

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.

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.

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.

Demo to preview the settings