Skip to content

Mapbox

A component to embed a Mapbox map. It can be used to display a map with markers.

For this component you need Mapbox access token: https://www.mapbox.com/api-documentation/#access-tokens-and-token-scopes

Fields

NameTypeDescriptionOptions
Access TokenTextAccess token from Mapbox
Map styleTextMap style URL
ZoomNumber
LatitudeNumber
LongitudeNumber
MarkersObject
Controls visibleTextShow map controls
  • Yes
  • No
Custom CSS classesTextCSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

NameDescriptionUsage
mapbox-marker-clickCapture single clicks on markers.
mapbox-clickCapture single click on map.

Low code usage

This component can be declared directly in Python, using backend-driven UI.

python
ui.Mapbox(content={
        "accessToken": "", # str 
        "mapStyle": "", # str 
        "zoom": 0.0, # Union[float, str] 
        "lat": 0.0, # Union[float, str] 
        "lng": 0.0, # Union[float, str] 
        "markers": {}, # Union[Dict, str] 
        "controls": "yes", # str [yes, no]
        "cssClasses": "", # str 
    },
    handlers={
        "mapbox-marker-click": handle_event,
        "mapbox-click": handle_event,
    }
)
A function, in this example handle_event, should be implemented in your code to handle events.
python
def handle_event(state, payload, context, ui):
  pass

Reference