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.
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.
Select the group created in step 1 and add the basemaps.
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.
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.
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.
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.
Finally, you may change the display settings of the Basemap Gallery widget, such as changing the title of the Basemap Gallery to French.
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.