Skip to content

Map

Display a map (using MapBox)

Name Description
component map
mode coordinates, address, location or routes, if address, address property must be provided, if coordinates then latitude and logitude coordinate must be provided, if routes, routes must be provided
latitude if mode is coordinates, this must be provided
longitude if mode is coordinates, this must be provided
address if mode is address, this must be provided
routes if mode is routes, this must be provided
options see options below
styles.button.padding padding for location button, etc

The location mode will use the user's current location as the center of the map.

Options

Name Description
zoomLevel optional double level (max at 18.0)
maxZoom optional double
minZoom optional double
showUserCurrentLocation boolean, default to false, if true, will show user current location on the map
locationMarkerColor color of location marker, default to red
locationMarkerIcon icon for the location marker, default to fas fa-location-dot
flagLocation show location marker
canRotate default to true, if false, user can't rotate the map
styleId the name of the style to be used in this map, will used default if not provided. See MapBox style for more information
searchBox show | hide, default to hide
allowInAppNavigation true/false, if true, allow user to choose built in app navigation
onLongPress.target handle long press event, currently only support shortcut as target
onLongPress.options options to pass to the long press target
onLongPress.options.precision location precision
stream.query dispatch query to execute to render result on the map

Examples

Handle long pressed

When user long pressed, we display dispatch creation shortcuts

{
    "component": "map",
    "options": {
        "onLongPress": {
            "target": "shortcut",
            "options": {
                "precision": 10
            }
        }
    }
}

Display

{
    "component": "map",
    "options": {
        "address": "{$source.attributes.about.location}",
        "zoom": "8",
        "mode": "address"
    },
    "styles": {
        "width": "100%",
        "height": "200px"
    },
    "condition": {
        "rule": "$source.attributes.about.location exists"
    }
}

Stream

{
    "component": "map",
    "options": {
        "stream": {
            "query": "given tracker-group [location]"
        }
    }
}

Routes mode

{
    "data": {
        "sources": [
            {
                "id": "addresses",
                "kind": "script",
                "options": {
                    "handle": "waypoints-address",
                    "tripId": "{dispatch.id}"
                }
            }
        ]
    },   
    "ux": {
        "component": "map",
        "mode": "routes",
        "routes": "{$source.addresses.list}",
        "options": {
            "styleId": "mapbox://styles/fluxweave/clh8awtgo00jh01qj2w7xddmx"
        },
        "styles": {
            "height": "200px"
        }
    }
}