[component:map:interactive]
to it. This element will show a map in the app after importing it to Bravo. In case you want the map to be a fixed image with all the markers (not movable or zoomable), add just [component:map]
.[require:location]
tag in the app page layer. This will ask the user to share their location with the app when opening that screen. More on location variables here.[component:map:<latitude>:<longitude>:<zoom>]
or [component:map:interactive:<latitude>:<longitude>:<zoom>]
tags. <latitude>
and <longitude>
are the map center's coordinates. <zoom>
needs to be a number from 0 (zoomed out) to 22 (zoomed all the way in). These values can also be bound to API data, as we'll show in the next section. To do that, do not specify any of the values in the tag, use just [component:map]
or [component:map:interactive]
.[asset:marker:default]
to it. Inside it, you can insert an SVG component or a PNG image with a transparent background.Latitude
, Longitude
and Zoom
features as shown below.Map Marker
component shown below. Then, we'll need to bind a list of markers to the Points
property. This data item must be a list, containing all the marker data.Name
, Latitude
and Longitude
, to their corresponding data items.