> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/tutorials/components/map/drag-a-pin-to-update-a-location.md).
# Drag a Pin to Update a Location
Let a service dispatcher drag a misplaced customer site to its real entrance on the map, then save the new latitude and longitude with Update Records.
A service dispatcher sees a customer site pinned in the middle of a park: the geocoder placed it from the address, but the loading dock is two blocks away. She drags the pin to the right spot and clicks **Next**, and the flow writes the new latitude and longitude to the account.
The dispatcher drags the site to its real entrance, then clicks Next to save it.
## Before you start
* Dragging markers is a Leaflet feature. Leaflet maps load their tiles from OpenStreetMap: add `https://tile.openstreetmap.org` to **Setup > Trusted URLs**.
* Accounts with a **Billing Latitude** and **Billing Longitude**.
* Users of the flow need edit access to those two fields.
## Steps
{% stepper %}
{% step %}
### Get the sites to correct
1. Create a **Screen Flow**.
2. Add a **Get Records** element on **Account**, filtered to the sites to review (for example **Billing City** equals `San Francisco`), and store **All records**.
3. Choose the fields to store yourself: Id, Name, Billing Latitude and Billing Longitude.
This tutorial uses the [Variable](/flow/component-builder/data-sources/variable.md) data source on purpose: the Map then hands back the dragged records with their new coordinates already set, ready for Update Records.
{% endstep %}
{% step %}
### Add the Map and point it at the records
1. Add a **Screen** after Get Records and drag the **Avonni Map** onto it. Set its **API Name** to `SiteMap`.
2. Click **Edit Component**. Set **Type** to **Leaflet** and **Mode** to **Multiple Markers**.
3. Under **Data Source**, choose **Variable** and select the Get Records collection.
4. In **Data Mappings**, map **Title** to Account Name, **Location** > **Latitude** to Billing Latitude and **Location** > **Longitude** to Billing Longitude. Keep **Value** on the record Id.
{% endstep %}
{% step %}
### Turn on Draggable Markers
In the first group of the **Properties** tab, turn on **Draggable Markers**.
Leave **Disable Auto Pan Markers** off. The map then scrolls when the dispatcher drags a pin toward its edge, which helps when the right spot is just off screen.
Draggable Markers appears only on a Leaflet map.
{% endstep %}
{% step %}
### Save the new positions with Update Records
Each drop updates the Map's **Dragged Map Markers SObject** output: one Account record per pin moved, with Billing Latitude and Billing Longitude set to the new position.
1. After the screen, add a **Decision** with one outcome, **Pins moved**: `{!SiteMap.draggedMapMarkersSObject}` **Is Empty** `False`.
2. On that outcome, add an **Update Records** element.
3. Choose **Use the IDs and all field values from a record or record collection** and select **Outputs from SiteMap > Dragged Map Markers SObject**.
The Decision skips the update when the dispatcher clicks **Next** without moving anything.
{% endstep %}
{% step %}
### Save and test
Activate the flow and run it with **Debug** or **Run** (dragging does nothing in the Component Builder preview). Drag one pin a few blocks and click **Next**. Open the account: **Billing Latitude** and **Billing Longitude** hold the position where you dropped the pin. Run the flow again and the pin starts from its new place.
{% endstep %}
{% endstepper %}
## Variations
* **Save on drop, without Next.** In the **Interactions** tab, add a **Marker Drag** interaction. Set **Type** to **Flow Navigation**, then the second **Type** to **Next Screen**. Each drop moves the flow on and saves at once, which suits a dispatcher who fixes one site per run. See [Flow Navigation](/flow/component-builder/interactions-panel/flow-navigation.md).
* **Save only the last pin moved.** The Map's **Dragged Marker Latitude** and **Dragged Marker Longitude** outputs are text. Create two Number formulas, `VALUE({!SiteMap.draggedMarkerLatitude})` and `VALUE({!SiteMap.draggedMarkerLongitude})`, with a scale of 6 or more. Then use an **Update Records** element that finds the Account whose Id equals `{!SiteMap.draggedMarkerValue}` and sets Billing Latitude and Billing Longitude to the two formulas.
{% hint style="warning" %}
The Map writes nothing to Salesforce on its own. Without the Update Records element, the pin goes back to its old place on the next run.
{% endhint %}
## Troubleshooting
The pins do not move
**Draggable Markers** is off, **Type** is **Google Maps** instead of **Leaflet**, or you are testing in the Component Builder preview. Run the flow with **Debug** or **Run**.
The record is saved but the pin is back at its old place next time
Check whether an automation in your org recomputes Billing Latitude and Billing Longitude from the address after the save, such as an Account geocode clean rule. If it does, store the corrected position in a separate pair of number fields and map **Location** to those.
## Related tutorials
* [Create a Clickable Map with Account Details](/flow/tutorials/projects/create-a-clickable-map-with-details-information.md): show the account behind a pin beside the map.
* [Customize the Map Marker](/flow/tutorials/components/map/customize-the-map-marker.md): color the sites that still need a check.
* [Draw a Territory and Save It to the Record](/flow/tutorials/components/map/draw-a-territory.md): save a shape drawn on the map instead of a single point.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.avonnicomponents.com/flow/tutorials/components/map/drag-a-pin-to-update-a-location.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
