Make it possible to have more backgroud layers

[huggla]

The number of background layers is limited by the width of the layerswitcher. Find a way to fix this limitation.

Wrap the line of background icons?:

Option to have a dropdown for backgrounds (would also make it possible to add text description)?:

[Grammostola]

Dropdown would need to be dropup as the legend control's background layer pane is in the bottom of the window and then it would cover parts of the legend. That might and might not look problematic. The alternative is the way your last image shows , that the pane grows vertically to accomodate the dropdown. That might look a bit funny if there's a longer list of background layers I think.

If the line simply grows up in the second picture then that looks better. Maybe that's the simplest solution.

In a recent pr I was reportedly trying to solve this and we discussed it locally prior and "one button and a chooser that appears" is a popular thought, a bit like what maps.google.com does when the background layer button is hovered over. In order to fit something like that in the Origo legend ui something would need to stretch, though. A new element could be introduced above the background layer pane and the one above, with all the background layer choices and which would disappear when a choice was made. Can't tell for sure that that would look any better than your second image though. Maybe an element that floated could work.

Anyway I kind of like the second image - wrap - for its simplicity.

[tonnyandersson]

My first thought was also a new element, floating on top of the rest of the legend, kinda like the Add Layer button.

But the wrap thing seems like the best option here. What it lacks in looks and elegance, it makes up for in simplicity and ease of use and implementation.

[huggla]

All that is needed for the wrap solution is to remove height:50px and add max-width:300px to the top div for the background buttons. But in which source file do I find the code to change?

[tonnyandersson]

src/controls/legend.js, line 701, I presume.

[huggla]

Thanks!

Now the buttons on the right are centered in the middle. Good or bad? If bad, top or bottom?