layout.skipToContent

How to add a search bar to a choroplethe map

This tutorial demonstrates how to add a search bar to a choroplethe map.

applicationUI.publishedAt 6 de mayo de 2026
1. Go to Map Editor

Click here to go to the Map Editor.

Go to Map Editor
Go to Map Editor
2. Go to Map Settings

Click here to go to the Map Settings.

Go to Map Settings
Go to Map Settings
6. Customize zoom settings

You can activate "Keep current zoom level" if you want the map to stay at the same zoom level when you search for one country.

Customize zoom settings
Customize zoom settings
7. Customize zoom settings

If you deactivate "Keep current zoom level", the map will zoom onto the country you searched for. You can also activate and deactivate the animation to change how the zoom onto the country you searched for is animated.

Customize zoom settings
Customize zoom settings
8. Customize text elements

Click here to customize the text elements of the search bar.

Customize text elements
Customize text elements
9. Customize Container

In the "Container" settings, you can customize the general look of the Search field. You can change the background, shadow, the border and the border radius

Customize Container
Customize Container
10. Customize Items

In the "Items" settings, you can change the font and colour of the items in the dropdown.

Customize Items
Customize Items
11. Open Style Options

In the "Reset button" settings, you can customize the style of the button that users will use to deselect the country they searched for in the search field.

Open Style Options
Open Style Options
12. Save your changes

Don't forget to save your changes.

Save your changes
Save your changes

You have successfully added and styled a search bar on a choropleth map.