Getting the Function of the Map Layers/Legend Widget Into the Appearance of the Layers Tool Built Into the Map Widget

[JeffreyThompson2]

In Experience Builder, there are two ways to get map layer controls and a legend in your map. The first option is to flip on the Layers Tool in the Map Widget. This will give you an icon on your map that when clicked contains a list of map layers and a legend in a tabbed view. It's super easy, looks ok, and has zero customization options. You can't even decide where to put it. It'll just dance around the map however Experience Builder feels like putting it. The other option is to use the separate Map Layers and Legend Widgets. This takes only slightly more work, but it gives so much more customization controls and looks better. The main problem is that two always open widget take up way more screen real estate than a single icon. Why can't we have the power of the Map Layers/Legend Widgets, but the compactness of the Layers Tool in the Map Widget? Take a look at the title. We are making this happen.

Today's recipe calls for a Widget Controller, a Fixed Panel or Card Widget, a Section Widget, a Map Layers Widget, a Legend Widget and a Views Navigation Widget.

1. Add a Widget Controller to your Experience. This will compact your final product down to a single button.
2. As I am working in ArcGIS Online, I will place a Fixed Panel Widget inside my Widget Controller. Enterprise users will need to wait for 11.3 to do this, but an empty Card Widget will work just as well.
3. Inside my Fixed Panel Widget, I will add a Section Widget leaving some space up top for the Views Navigation Widget. Section Widgets are super useful tools in Experience Builder that allow different stuff to occupy the same space on a page at different times. Think of them as mini-pages within your main page.
4. In the Section Settings Panel, I will add a New View. Then I will rename my first view Map Layers and the second one Legend. Look for the three dot menu on the right to find the rename option.
5. Now, I will add the Map Layers and Legend Widgets into the appropriate views and connect them to my Map Widget.
6. Next, add a View Navigation Widget in that space we left earlier above the Section Widget and connect it to the section. If you would like some more control on the appearance, you could use Button Widgets instead.
7. Finally, you will want to change the icon and title of the Fixed Panel Widget. Instructions on how to do that here. The map layers icon is for some reason not one of the standard icons pre-loaded in the icon chooser, so I would need to find an icon I could download and then upload back into Experience Builder, and this is the step that caused me the most hassle.  First, I tried going to the Calcite icon library, where ESRI keeps all their icons. But the Figma links are broken, so there is currently no way to download an icon. Then I tried some developer tricks, looking through the assets in Developer Edition and using the Dev Tools in the browser to inspect the icon, but these assets are in .svg, a format the icon uploader won't accept. So I turned to Google, specifically Google's Material UI Icon Library, where you will find all of the icons Google has made, free-to-use for any purpose without attribution. This includes the icons in Google Maps and I was able to download their map layer icon in .png.
8. Optionally, bake your computer at 350°F for 15 minutes. (I didn't say it was a good option.)

Here's my final product, a combined Map Layers and Legend Widget that collapses to a single button when not in use.

Edit: Alternatively, you could use a Grid Widget. Placing multiple widgets in the center of a Grid Widget will cause them to automatically stack into tabs. It's easier and faster than the Section Widget method described above and more similar in appearance to the map layer tool built into the map. However, you will get some more optionality with the Section based method.