> 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/add-search-and-filters.md).

# Add Search and Filters to a Map

Add a search bar and Industry and Rating filter menus to an Avonni Map, in a side panel, so reps find the right accounts among dozens of pins.

A sales rep has 40 accounts across San Francisco on one map and wants only the Technology accounts rated Hot before planning calls. With filter menus and a search bar in a side panel, two clicks leave only those pins on the map. Typing a street name finds an account by its address.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FDWyhwgmLfkROaQepBPa1%2Fmaptuto-add-search-and-filters-result.png?alt=media" alt="A San Francisco account map with a side panel on its left: a search box, an Industry filter set to Technology and an Account Rating filter with Hot checked. Four pins remain on the map."><figcaption><p>Technology accounts rated Hot, picked in the side panel: four of forty pins remain.</p></figcaption></figure>

## Before you start

* A screen flow with an **Avonni Map** that shows your Accounts: **Data Source** set to **Query** on **Account**, and **Location** mapped in **Data Mappings**. See [Map](/flow/flow-components/map.md) for the data source and mappings.
* **Type** can be **Google Maps** or **Leaflet**: both have search, filters and the side panel. This tutorial uses **Leaflet**, where clicking a pin opens a popup with the account's fields.
* The side panel holds the search and the filters only. A list of the matching accounts beside the map exists only on **Google Maps**, with **List View**.

## Steps

{% stepper %}
{% step %}

### Pick the fields to filter and search on

In the **Properties** tab, open **Data Mappings** and scroll to the end.

1. In **Filters**, add **Industry** and **Account Rating**. Each field becomes one filter menu.
2. In **Search Fields**, add **Account Name** and **Billing Street**.
   {% endstep %}

{% step %}

### Put the filters in a side panel

Open the **Filter** group.

1. Set **Type** to **Panel**.
2. Turn on **Use Record Picklist Values**, so each menu lists only the values your accounts actually have.
3. Leave **Picklist Filter Sort Order** on **Ascending**, or choose **Default Order of Field** to list Hot, Warm, Cold in the order of the picklist.
   {% endstep %}

{% step %}

### Add the search bar to the same panel

Open the **Search** group.

1. Turn on **Show Search**.
2. Set **Placeholder** to `Search name or street`.
3. Set **Position** to **Panel**.
   {% endstep %}

{% step %}

### Set up the side panel

Open the **Side panel** group. It applies once the filters or the search are set to **Panel**.

* **Position**: **Left**, so the rep reads the panel before the map.
* **Reset Button Label**: keep "Clear all selections" or write your own, such as `Show all accounts`.
* **Display Overlaid on the Map**: turn it on when the screen is narrow and the map needs the full width. The panel then sits over the map and opens from a button.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2F0VhZK9sPuJOIEo0Pzhnw%2Fmaptuto-add-search-and-filters-panel-settings.png?alt=media" alt="The Filter and Search groups of the Map&#x27;s Properties tab: Filter Type Panel with Use Record Picklist Values on, Search with Show Search on, Placeholder Search name or street and Position Panel." width="320"><figcaption><p>Filters and search both set to Panel share one side panel.</p></figcaption></figure>
{% endstep %}

{% step %}

### Save and test

Save the flow and run it.

1. In the side panel, check **Technology** under **Industry**: only the Technology accounts stay on the map.
2. Check **Hot** under **Account Rating**: the map keeps the Technology accounts rated Hot.
3. Type `Market` in the search bar: the pins narrow to the accounts on Market Street.
4. Click **Clear all selections** to bring back all 40 accounts.
   {% endstep %}
   {% endstepper %}

{% hint style="info" %}
Each filter menu also has a filter mode button. Switching **Industry** from **Equals** to **Not Equals** hides the checked industry instead of keeping it. Number and date fields get range modes such as **Between**. The [Map](/flow/flow-components/map.md) reference lists the modes for each field type.
{% endhint %}

## Troubleshooting

<details>

<summary>The Side panel group has no effect</summary>

The panel appears only when the filters (**Filter** > **Type** = **Panel**) or the search (**Search** > **Position** = **Panel**) are placed in it. Set at least one of them to **Panel**.

</details>

<details>

<summary>The side panel is gone on a phone</summary>

On a narrow map the filters become a popover and the search moves to the header. The settings stay as you set them for wider screens.

</details>

<details>

<summary>A filter menu lists values no account uses</summary>

Turn on **Use Record Picklist Values** in the **Filter** group. The menu then offers only the values found in the records on the map.

</details>

## Related tutorials

* [Interactive Map Filtering](/flow/tutorials/projects/interactive-map-filtering.md): recount metrics for the area the rep is looking at.
* [Filter a Data Table or Map by the current record](/flow/tutorials/tips-and-tricks/filter-a-data-table-or-map-by-the-current-record.md): limit the map to one record's data before the rep filters further.
* [Plan a Route from the Map](/flow/tutorials/components/map/plan-a-route.md): turn the filtered accounts into tomorrow's visits.


---

# 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/add-search-and-filters.md?ask=<question>&goal=<user_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.