Skip to main content

Create a Custom Basemap Gallery - Experience Builder

Basemap galleries allow users to switch between various basemaps to help reference data. Experience Builder’s Basemap Gallery Widget allows users to customize the picklist of basemaps available for use in their Experience Builder project.

There are a few exciting new features released as part of the June 2023 update for Experience Builder. One of particular interest is the Basemap Gallery Widget. This new widget allows for more customization of your Experience Builder project. It gives the ability to explicitly select which basemaps will be available to choose from the basemap gallery when visitors use your site. This functionality is especially useful for those who would like to have different versions of their Experience Builder project, without changing organizational-level settings. For example, you would like an Experience Builder project to be in French, including all the basemaps, which may currently default to a different language according to basemap gallery settings within your organization. Of course, any layers, maps or map surrounds you add to the project, you can create in French. However, the basemap tool in Experience Builder only provides whichever default basemap gallery is set within your organization. If you would only like certain projects to have a basemap gallery that differs from your organization’s defaults, such as a French project, it doesn’t really make sense to change your whole organization settings. This article gives you a guide on how to add a custom basemap gallery, such as a French basemap gallery, to replace the defaults within Experience Builder’s basemap tool. 

Let’s get started! 

1. Create a public group in your ArcGIS Online account and find the French basemaps you wish to add to this group. 

Group created to hold the French basemaps

Within ArcGIS Online, navigate to the basemaps you would like to use. For example, Esri Canada’s Community Map of Canada has collaborated with Esri France to create a basemap with French-language place names. This basemap can be found here.

Additionally, to access more French basemaps, Esri France has a public group ArcGIS Online Vector Basemaps, which has a variety of French basemaps for public use. 

2. Add the basemaps to the group you created (in step 1). 

For each basemap you would like to use, open the item’s details page and click Share. 

Sharing a basemap from the item details page.

NOTE* You must be signed into ArcGIS Online to see the “Share” button. 

Select the group created in step 1 and add the basemaps.

Edit group sharing option.

Sharing the French basemaps to your group.

Click OK and Save. 

3. Open or create a new Experience Builder project and import the basemaps. 

From the Insert tab on the left-hand side, drag-and-drop the Basemap Gallery widget to your project. This will add a customizable basemap widget to your project. With the Basemap Gallery selected, choose “Configure Custom Basemaps” from the Basemap settings.

Basemap Gallery widget

Click the Import button to open the Import pane. 

Select the group that you created in step 1 from the drop-down menu. From here, you will see all the basemaps that you added to the group in step 2. 

Select the basemaps that you would like to add to the Basemap Gallery widget. Once selected, they will automatically be added to the Basemap Gallery widget in your project. 

Importing the basemaps.

You may either leave the basemap gallery widget as a panel in the map surrounds or add the basemap gallery to a basemap toggle button. 

To add the basemap gallery to a basemap toggle button, first add a Widget Controller to your project. Then, simply drag-and-drop the current basemap gallery panel into the widget controller.

Widget controller.

You may place the basemap toggle button anywhere you would like, such as in the map frame (as seen in the image below). Ensure to disable the default Basemap Gallery tool for the map if you would like to display only your custom Basemap Gallery widget.

The Basemap Gallery as a toggle button.

Finally, you may change the display settings of the Basemap Gallery widget, such as changing the title of the Basemap Gallery to French. 

Update the display settings, such as the title of the Basemap Gallery

Whether you are looking to change the Basemap Gallery to basemaps that are in a different language or other basemaps, such as custom basemaps for your project, the workflow remains the same. Simply create a group in ArcGIS Online, add the basemaps to the group, and within your Experience Builder project, import the basemaps to the customizable Basemap Gallery widget.

About the Author

Hillary Elliott is an Associate GIS Analyst at Esri Canada. She focuses on providing support to clients for Esri’s desktop GIS technology. Hillary has a bachelor’s degree in Human Environment and Geospatial Technologies from Concordia University and a graduate diploma from Fleming College’s GIS Applications Specialist program. Her passion for GIS started in her bachelor’s degree and continues to grow each day. In her free time, she enjoys being active, going on adventures and spending time with family and friends.

Profile Photo of Hillary Elliott