The Avonni Blog
Tutorial
2 min

Configuring the new Avonni Map "Pin" Marker Type

Now it's easier than ever with Avonni Map's new "Pin" marker type!

Video tutorial
Customize Map Markers in Salesforce Flows (Avonni Map Tutorial)
▶
Play here
8:35
Customize Map Markers in Salesforce Flows (Avonni Map Tutorial)
Open with chapters →
customize-map-markers-salesforce-flow

The latest Avonni Components release includes a new "Pin" marker type for the Avonni Map Component. Configure it directly in your Screen Flow settings. No complex customizations. No design required. Focus on your data; the visualization handles itself.

The Pin marker type lets you adjust scale, fill color, fill opacity, and stroke properties in the Flow configuration UI.

‍

Getting started with the Pin marker type

To implement the Pin marker type in your Avonni Map:

  1. Install the latest Avonni version in your org.
  2. In your Screen Flow, configure the Avonni Map component.
  3. Select the "Pin" marker type from the dropdown.
  4. Set fill color and stroke to match your requirements.

Example: account locations by type

Visualize all Salesforce accounts on a map with distinct colors by account type. Integrators, Partners, and Investors each get a unique marker color.

  • Create a formula field: On the Account object, add a text formula field that calculates marker fill color based on Type.

Formula:

IF(ISPICKVAL(Type,'Integrator'), '#fcc003',    

IF(ISPICKVAL(Type,'Partner'), '#d78ff5',        

IF(ISPICKVAL(Type,'Investor'), '#e3066a', '#08abed')))

This formula assigns hex color codes to each account type, with a fallback color for unmapped types.

  • Link to Fill Color: In the Avonni Map component settings, bind the "Fill Color" property to this formula field.

‍

That's it. Each account pin now displays its color based on account type. The visual distinction makes it trivial to identify trends, prioritize outreach, or allocate resources based on account distribution.

‍

Filed under
Jean-Baptiste Vergé
Written by
Jean-Baptiste Vergé
Co-Founder, Head of Engineering

Co-founder of Avonni and Head of Engineering, Jean-Baptiste has spent 8+ years building the next generation of low-code development tools for Salesforce. He leads the technical vision behind Avonni's interactive prototyping and component builder platform.

Follow on LinkedIn →
Share this article
LinkedInXCopy link

Ready to build it yourself?

Start free with 10 production licenses. All 3 Avonni packages included.