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"
        }
    }
}