Map

The Avonni Map shows a map of a specific place. It can help you get a sense of location or get directions.

Setting Up Your Map

To get started with the Avonni Map component, you'll first need to choose a map type and configure how your data is displayed.

1. Choose a Map Type

The first step in building your Avonni Map is to decide which mapping engine you want to use. This choice depends on the complexity of your map and the features you need.

Google Maps

This is the familiar map you likely use every day. It's an excellent choice for more straightforward maps, especially if you don't need to display many markers. Google Maps offers a user-friendly interface with built-in features like street view and satellite imagery. However, it has a limitation of 100 markers.

Leaflet Maps

If you need a highly interactive map with advanced features and the ability to display many markers, Leaflet Maps is the better choice. It's more customizable than Google Maps and offers features like marker clustering, interactive drawing, and GeoJSON support. However, you must provide latitude and longitude coordinates for each marker.

Consider the complexity of your map, the number of markers you need to display, and the level of interactivity you require when choosing between Google Maps and Leaflet Maps

2. Display Markers

Markers are the visual indicators that pinpoint locations on your map. The Avonni Map component allows you to display markers in two ways:

Single Marker

If you want to highlight a single, specific location, such as your company's headquarters or an event venue, use the single marker option. You can manually enter the address or use data from a Salesforce record to position the marker automatically.

Multiple Markers

Use the multiple markers option to display a collection of locations, such as all your store branches or customer addresses.

Choose a Data Source

Map Your Data

Once you've chosen a data source, you'll need to map the relevant fields from your data source to the map component's attributes. This ensures that the markers are placed correctly and display the correct information.

3. Enable Marker Clustering (Leaflet Maps Only)

When you have many markers close together on a Leaflet map, it can become cluttered and difficult to read. Marker clustering helps solve this by grouping nearby markers into clusters, making the map easier to navigate and improving performance.

• How it Works: Markers close to each other are automatically grouped into a cluster, represented by a single icon. As you zoom in, the clusters break apart to reveal the individual markers.

• Configuration: You can customize the behavior and appearance of marker clusters:

  • Coverage on Hover: Show the area a cluster covers when you hover over it.

  • Max Cluster Radius: Control the maximum size of a cluster.

  • Disable Clustering on Zoom Level: Specify a zoom level at which clustering is disabled, showing all individual markers

4. Customize Marker Appearance

Beyond simply placing markers on your map, you can customize their appearance to match your branding or convey specific information.

• Choose a Marker Style:

  • Predefined Types: Select from a variety of predefined marker types, including:

    • Default: A simple, standard marker.

    • Circle: A circular marker.

    • Rectangle: A rectangular marker.

    • Polygon: A multi-sided marker.

    • Pin: A pin-shaped marker.

  • Custom Icon: Upload your SVG image as a marker icon. This allows you to create unique markers that align with your brand or specific needs.

• Customize Appearance:

  • Fill Color and Opacity: Adjust the marker's color and transparency.

  • Stroke: Customize the marker's border (color, thickness, style).

  • Scale: Adjust the size of the marker

5. Add Interactive Drawings (Leaflet Maps Only)

With Leaflet Maps, you can empower users to interact directly with the map by drawing on it. This feature allows capturing user input, annotating locations, and creating dynamic map experiences.

• Enable the Draw Feature: Turn on the "Draw Feature" to add a drawing toolbar to your map. This toolbar provides tools for:

  • Adding Markers: Users can place markers at specific locations.

  • Drawing Shapes: Users can draw lines, polygons, and circles on the map.

  • Editing and Deleting: Users can modify or remove existing drawings.

• Customize the Drawing Toolbar:

  • Choose Tools: Select which drawing tools are available to users.

  • Toolbar Position: Control the placement of the drawing toolbar on the map.

• Save User Drawings:

  • Save as Content Document: Automatically save user drawings as Content Documents in Salesforce, linking them to the relevant record.

  • Auto Save: Enable automatic saving of drawings to ensure no data is lost

6. Use GeoJSON (Optional)

GeoJSON is a standard format for encoding geographic data structures like points, lines, and polygons. You can use GeoJSON with the Avonni Map component to display and edit geographic data.

• Displaying Static Data:

  • GeoJSON Value: This attribute displays predefined geographic features on your map. This is useful for showing things like country borders, state lines, or any other fixed geographic shapes. The data displayed using this attribute is read-only, meaning users cannot modify it.

• Displaying and Editing Data:

  • Draw Content Document ID: To allow users to edit geographic data, you can load GeoJSON data from a Content Document. This will display the data on the map and automatically enable the Draw feature, allowing users to modify existing shapes and add new ones. Changes can then be saved back to the Content Document

Configuring Your Map

The Avonni Map isn’t just a static view—it’s a dynamic tool you can shape to show locations exactly how you need them. These customization options let you control where it focuses, how it looks, and what users can do, turning a basic map into a powerful way to explore and manage data.

Centering the Map

Centering decides where your Map starts looking—it’s like pointing a camera at the right spot. Whether you want a fixed city view or a moving target based on live data, this keeps the Map focused on what’s important to your users.

• Control the map's center point:

  • Default Center: Use the default center.

  • Specify Coordinates: Manually enter latitude and longitude.

  • Use Address Components: Define the center using address elements.

  • Dynamic Center: Use flow variables to set the center dynamically.

  • Display Center as Marker: Show a marker at the center point.

Zoom Level

Zoom controls how close or far out your Map starts, setting the level of detail users see right away.

• Adjust the initial zoom level:

  • Choose a zoom level from 1 (world view) to 22 (building level).

Header

The header is the Map’s top bar, giving it a name and tools to interact with. Customizing it adds clarity and control, making the Map more than a picture—it becomes a labeled, actionable part of your interface.

• Customize the map header:

  • Title, Caption, Icon, Is Joined, Buttons: Configure header elements.

Filtering and Search

These tools let users narrow down or find specific data on the Map, cutting through clutter to focus on what they need.

• Filtering Options: Add a filter menu to refine map data.

• Search Options: Enable search functionality for specific fields.

List View

The List View pairs a text list with your Map, showing all locations in a clickable sidebar. It’s like a table of contents—letting users browse or jump between markers without panning around.

• Show or hide the list of locations:

  • Choose between visible, hidden, or auto (default).

Map Interactions

Interactions make your Map a living tool—users can click, drag, or act on it to get things done. This turns it from a display into an interactive hub for exploring or updating data right where they see it.

• Define actions for user interactions:

  • On Marker Select: Actions when a marker is clicked.

  • On Header Action: Actions when a header button is clicked.

  • On Marker Drag: Actions when a marker is dragged to a new location.