Map
The Map Component showcases an array of records on an interactive map.
The Avonni Map Component shows a map of a specific place. It helps give you a sense of location or help with directions. You can zoom in, move around, and put markers on the map. It's also fully customizable to fit your needs.
The "
Mode" setting on the map component allows you to choose between Single Marker and Multiple Markers.- 1.Single Marker: This option lets you place only one marker on the map. This is useful when you want to focus on a single location, such as the address of a specific business or event.
- 2.Multiple Markers: With this option, you can simultaneously place multiple markers on the map. This is ideal for displaying various locations at once, like all the stores in a retail chain or numerous points of interest within a specific area.
Choose the mode that best suits your needs to effectively display location data on your map.
The "Data Source" section will only appear in the properties panel if you choose the "Multiple Markers" option.
Displays or hides the list of locations. Valid values are visible, hidden, or auto. This value defaults to auto, which shows the list only when multiple markers are present.
Passing in an invalid value hides the list view.
In the map component, you can adjust the zoom level to focus on different areas, from the world to individual buildings. If you don't set a zoom level, the map will automatically adjust to show all the markers you've placed on it.
You can find an option in the Properties panel to manually set the zoom. The zoom levels range from 1 to 22 on desktop browsers and 1 to 20 on mobile devices.
Here's a quick guide to what each zoom level generally shows:
- Level 1: The entire world
- Level 5: A continent or large landmass
- Level 10: A city
- Level 15: Street-level details
- Level 20: Individual buildings
When using multiple markers on the map, the map will automatically focus on a central point near the middle of all the markers. It calculates this point based on their locations.
Customizing the Center Point
If you'd like the map to focus on a different point, you can manually set the center location using the "center" attribute. You have a couple of options for doing this:
- 1.Using Coordinates: You can specify the latitude and longitude to pinpoint the exact location where you want the map to be centered.
- 2.Using Address Elements: You can also use address components like Country, State, City, and Postal Code to set the center location. Including the street is optional.
Note that the format for setting the center location is the same as for placing map markers. However, you can't add a title, icon, or description to the center point.
The Header section gives you control over the appearance and functionality of your Map header.
Attribute | Description |
|---|---|
Title | Define a meaningful title for your Map. It introduces the timeline's content and is a key element of the visual hierarchy. |
Caption | Use the caption field to add a brief description or supplementary information for your Map. This can be especially useful for providing context or additional details about the table data. |
Icon | You can add an icon to your header to enhance its visual appeal or to help convey the Map's purpose or content at a glance. |
Is Joined | This property, when activated, gives the header a square, shadowless bottom border. This makes the header blend seamlessly with another component, making the Map appear as a continuous, unified element. |
Buttons | Add interactive buttons to your header to enable specific actions from the interaction pane. This provides additional functionality and enhances user engagement with the Map. |
The "
Filtering Option" allows you to add a filter menu that appears as a popover. When this feature is enabled, all the fields designated as filters will be displayed in this popover, keeping the list uncluttered and focused.
The "Searchable" toggle lets you specify whether the records within a particular column can be searched. When activated, a search bar is made available. Additionally, you can set placeholder text for the search bar and determine its position with available values: left, right, center, and fill.
Activating Search: To make a column searchable, toggle on the "Searchable" option in the configuration settings of your Avonni Map Component.
Setting Placeholder Text: Customize the search bar by adding placeholder text to guide users.
Positioning the Search Bar: Use the position attribute to set the location of the search bar. Options include:
left: Aligns the search bar to the left.right: Aligns the search bar to the right.center: Centers the search bar.fill: Expands the search bar to fill the available space.
Best Practices
- Use descriptive placeholder text to guide users on what they can search for.
- Choose a search bar position that harmonizes with the overall layout of your list component.
The "Data Source" section will only appear in the properties panel if you choose the "Multiple Markers" option.
Adding markers to the map component is possible using the Data Source section. Makers can be added:
Manual: To add markers by hand, fill out the required address fields for each location you want to pinpoint on the map.Variable: You can dynamically add 'Makers' by connecting them to a data collection from your flow. You'll need to map the data once linked to a variable data source. For example, you'll need to specify which field should represent the country for each marker on the map and follow the same process for any other information requested in the Data Mapping section.
Interactions define what will happen when users interact with the Map component. You can find a list of interactions available here.
Here are the available interactions for the Map component:
- On
Marker Select: The event is fired when the marker is selected. - On
Header Action: The event is fired when pressing buttons actions.
No styling settings are available.
Name | Description | Illustration |
|---|---|---|
The Map with Details component, integrating Avonni Map and Formatted Value elements, showcases important account details. |  |
Name | Type | Description |
|---|---|---|
listView | String | Displays or hides the list of locations. Valid values are visible, hidden, or auto. This value defaults to auto, which shows the list only when multiple markers are present.Passing in an invalid value hides the list view. |
markersTitle | String | Provides the heading title for the markers. Required if specifying multiple markers. The title is displayed below the map as a header for the list of clickable addresses. |
selectedMarkerValue | String | Provides the value of the currently selected marker. Returns undefined if you don’t pass value to map-markers. |
showFooter | Boolean | If present, the footer element is displayed below the map. The footer shows an 'Open in Google Maps' link that opens an external window to display the selected marker location in Google Maps. |
zoomLevel | String | The zoom levels as defined by Google Maps API. If a zoom level is not specified, a default zoom level is applied to accommodate all markers on the map. |
mapMarkers | MapMarker[] | One or more objects with the address or latitude and longitude to be displayed on the map. If latitude and longitude are provided, the address is ignored. |
Name | Description |
|---|---|
markerSelect | The event fired when the marker value changes. |
No styling hooks are available.
Last modified 13d ago