Components for Experience Cloud Get It on the AppExchange

Customize the Map Marker

Overview

Welcome to the tutorial on customizing the map marker in the Avonni Map Component. This guide will walk you through the Avonni Map Component, focusing on the "Type" attribute that opens up a world of customization possibilities for your map markers.

First, install the Avonni Components app from the AppExchange to customize your map markers. This unlocks a whole new world of map design possibilities.

How to customize the Map Marker

In the Data Mappings section, the 'Type' attribute controls how locations are represented on your map. Here are the marker types you can choose from:

  • Default: The standard map marker style.

  • Circle: A circular marker that highlights a specific radius around a location.

  • Rectangle: A rectangular marker, good for defining boundaries or areas.

  • Polygon: A flexible shape with multiple sides, ideal for outlining irregular areas.

  • Custom Icon: Use your image file to create a unique marker.

Customize your map markers: Change size, shape, color, and more

If you choose a map marker type other than "Default," you can customize the following attributes:

  • Radius: Controls the size of circle markers.

  • Stroke Color: The color of the marker's outline.

  • Stroke Opacity: How transparent the outline is (from completely solid to invisible).

  • Stroke Weight: The thickness of the marker's outline.

  • Fill Color: The color that fills in the marker.

  • Fill Opacity: How transparent the fill color is (from completely solid to invisible)

Use Case Example

Do you want your map markers to represent different types of data visually? You can customize marker colors based on specific field values.

Example: Color-Coding Accounts by Industry

Let's say you want to display Salesforce account locations on an Avonni Map using circle markers. You can make the circle's outline color change dynamically based on the account's industry:

  • Banking Accounts: Display with a blue outline

  • Manufacturing Accounts: Display with a red outline

  • And so on...

Step 1: Create a Formula Field to Determine Color

We need a way to tell the Avonni Map which color to use for each marker. To do this, create a custom formula field on your mapping object. This formula will translate field values (like "Banking") into specific color codes.

Example Formula for Industry-Based Colors:

IF(ISPICKVAL(Industry,'Banking'), '#ba0517',
IF(ISPICKVAL(Industry,'Manufacturing'), '#d78ff5',
IF(ISPICKVAL(Industry,'Technology'), '#e3066a', '#000000')
)
)

Understanding the Formula Structure

  • IF statements: The formula's core is a series of nested "IF" statements. Each IF statement checks a condition and returns a value if the condition is true.

  • ISPICKVAL: This function checks if a picklist field (like "Industry") has a specific value.

  • Color Codes: Values like '#ba0517' are hexadecimal color codes representing red. The formula assigns a different color code to each industry.

  • Default color: The final '#000000' acts as a default (black) in case the Industry value doesn't match any of the specified options.

Step 2: Connect your formula field to the map marker's color setting

Tell the map to use your formula field to determine marker colors. In the Avonni Map settings, find the marker attribute setting (like 'Stroke Color') and select your newly created formula field as the value.

That's it! You've successfully made your map markers change dynamically based on your formula field. Now your map tells a more insightful story at a glance.

Tip: This same process works for other marker attributes too! Customize size, shape, fill color, and more by linking them to different fields or variables in your data.

Final Result

Last updated