Map Component

Configuration Options
Theme Options


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 {{}}.

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


Configuration Options


Expected Type: String

The text that displays inside the button.


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

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.

Property Description Type Example
Latitude The key from you datasource item to use for the latitude. Float lat
Longitude The key from you datasource item to use for the longitude. Float long

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


  • 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)
Did you find what you were looking for?
What went wrong?
Need more help?We have a thriving Discordcommunity that can help you with all things Canonic. β†’