Map Component

Introduction

The map component can be used to show a mapbox map. It supports rendering of markers based on a list of coordinates supplied to it.

Each marker on clicking opens up a card. This card is a dropzone, you can drop any component from the library to this card to customize as needed.

The design for the cards cannot vary between different items so any changes made to one will reflect in all the others.

Accessing marker data from popup components

When you render markers, you want each individual marker to have titles, subtitles etc based on the datasource item that it's representing. This can be done by accessing the self variable

For example, in a list of locations, we want our text component inside the marker to show the name of the location.

In order to access the name of the location from within the list, we can access it using {{self.data.name}}.

The text component inside the marker will replace {{self.data.name}} with the name stored in each list item key.

Configuration Options

Label

Expected Type: String

The text that displays inside the button.

Datasource

Expected Type: Object | Item

The datasource powering the map. Must be a list of items. For each item in the list, the map component renders a new marker. The marker components can refer to the item's data using {{self.data}}

markers show a configurable card when clicked

Coordinate Keys

You can assign which keys to use for latitude and longitude. The map component uses these keys to render the markers from the datasource.

By default the latitude key is lat and the longitude key is long

Triggers

• Click: Triggers whenever the map is clicked.
• Marker Click: Triggers whenever the marker is clicked
• Map Move: Triggers whenever the map is moved
• Map Zoom: Triggers whenever the map is zoomed

Theme Options

• Title Align: The title's text alignment. (Number | Pixels)
• Title Color: The title's text color. (String | Hex)
• Title Style: The title's text style. (Bold | Italic | Underline)
• Text Size: The title's text size. (Number | Pixels)
• Padding: The map's padding. (Number | Pixels)
• Shadow: The map's shadow. (Shadow)
• Border: The map's border. You can also specify the radius for the edges. (Border)
• Background Color: The map's background color. (String | Hex)
• Marker Color: The map marker's background color. (String | Hex)