Map

Tutorials

Getting Started

Building a dynamic map component

Building a map with instant account insights

Building a "No-Code" Salesforce Map for Instant Account Insights [VIDEO]

Customization

Customize the Map Marker

How to customize the Map Marker (Video)

Step 1 — Choose Your Map Type

This is the most important decision. Everything else depends on it.

Google Maps — Use When...

You have street addresses and fewer than 100 locations to show. No extra data prep needed — paste in 123 Main St, New York and it just works.

Example: A "Contact Us" page showing your 5 regional offices.

Leaflet Maps — Use When...

You need to handle large datasets, draw custom shapes, or build something interactive. The trade-off: every location must have latitude and longitude coordinates — Leaflet cannot geocode a street address on its own.

Example: A field sales rep opens a flow and sees all 800 accounts in their region, clustered by area. As they zoom into a city, individual pins appear. They draw a polygon around a new prospect area and save it to the record.

Step 2 — Set Up Your Markers

Single Marker

Use this to highlight one specific location. Enter a street address directly or pull it from a Salesforce field.

Example: A flow that opens on an Account record and shows the account's billing address on the map.

Multiple Markers

Display a collection of locations from a Salesforce object. The setup has two parts:

1. Choose a data source — where the location data comes from

2. Map the fields — which Salesforce fields contain the address or coordinates

Data Source Options

Data Mappings

Once you've chosen a data source, map your Salesforce fields to the component's location attributes. At minimum, you need to map the Location section — this is what places the pins on the map.

Leaflet-Only Features

The features below are only available when Leaflet Maps is selected as your map type.

Marker Clustering

When you have hundreds of pins, the map becomes unreadable. Clustering solves this by grouping nearby pins into a numbered circle.

How it works:

• Zoomed out: Pins in the same area merge into a single circle — e.g., a circle showing "50" means 50 accounts in that region.

• Zooming in: The circle splits into smaller clusters, then individual pins.

Example: A map of 600 customer accounts. Zoomed out, users see 4–5 regional clusters. Zooming into a city reveals individual account pins.

Clustering Settings

Drawing & Annotations

The Draw feature turns your map into an interactive canvas. Users can draw directly on the map and save those drawings to a Salesforce record.

Example: A territory planning flow where a manager draws a polygon around a new sales zone, and it saves automatically to the related Opportunity.

Enabling Drawing

1. Select Leaflet as your map type

2. Toggle on Draw Feature in the component settings

3. The drawing toolbar appears on the map

Available Drawing Tools

You can choose which tools to show and where the toolbar appears (top-left, top-right, bottom-left, bottom-right).

Saving Drawings to a Salesforce Record

Drawings are saved as a Content Document (Salesforce File) linked to a record.

1. Enable Save as Content Document in the component settings

2. Set Content Document Linked Entity ID to the record's ID — typically {!recordId} from your flow variable

3. (Optional) Enable Auto Save Content Document to save changes automatically without a manual save step

Optional settings

GeoJSON — Territories & Custom Boundaries

GeoJSON lets you overlay custom shapes on the map — county lines, sales territories, zip code boundaries, or any other polygon. Think of it as a "stencil layer" on top of the map.

Two ways to use GeoJSON:

Displaying Static GeoJSON

Set the GeoJSON Value property using one of:

• A single GeoJSON object (one shape)

• An array of GeoJSON objects (multiple shapes)

• A Content Document ID pointing to a .geojson file in Salesforce Files (recommended for large datasets — max file size: 12MB)

Example: Show a rep their assigned region as a shaded polygon. They can see it, but can't modify it.

Loading Editable GeoJSON

Use Draw Content Document ID to load a starting set of shapes that users can then modify.

1. Save your GeoJSON as a Salesforce File

2. Enter its Content Document ID in the Draw Content Document ID field

3. This automatically enables the drawing toolbar

4. Users can move, resize, add, or delete shapes

5. To save changes, enable Save as Content Document — without this, edits are lost when the flow advances

Example: A customer success manager loads a territory polygon for a key account, adjusts the boundary to match a new agreement, and saves it back to the record.

Map Display Settings

Centering the Map

By default, the map auto-centers to fit all markers. You can override this in four ways:

Display Center as Marker: Enable this to place a visible pin at the center point you've set — useful for "find locations near this address" flows.

Zoom Level

Set the initial zoom manually (1–22 on desktop, 1–20 on mobile):

Header

The Header section gives you control over the appearance and functionality of your Map header.

List View

Controls the sidebar list of locations alongside the map.

Filtering & Search

• Filtering Option: Adds a filter menu (popover) so users can narrow down which markers are shown

• Searchable: Adds a search bar to the map. Configure placeholder text and position (left, right, center, fill)

Marker Customization

The Type attribute controls each marker's visual style.

Common styling options (all shape types):

• Fill Color & Opacity — background color and transparency

• Stroke — border color, thickness, and style

• Scale — zoom level the marker is optimized for

What's an SVG Path? It's a set of drawing instructions used to create custom icon shapes. You can generate SVG paths using any vector design tool (Figma, Illustrator, online SVG editors).

→ Tutorial: Customize the Map Marker

Map Interactions

Wire up map events to Flow actions using these triggers: