Add option to set main button with a Unicode Decimal Code

[eldk]

Hello,

As I want to keep main ol-layerswitcher button as OL buttons style :

1 - I have to change background color for ol-layerswitcher main button
2 - I have to remove background-image only for ol-layerswitcher main button, not for the underneath panel.
3 - I have to replace background image with a simple character , I have choosen this for the moment.

So I have done those things :

• create a CSS class for ol-layerswitcher main button, this way, color and background-image may be set without interfering with underneath panel.
• add an option to ol-layerswitcher control to gives the unicode decimal value of the desired character. If option buttonUDCChar is not set or no character is given then it fallback on actual CSS background-image.

In your inline CSS - disable background image and set color to OL controls button standard:

button.layer-switcher-open-main {
  background-image: none !important; //removed only for main button
  background-color: rgba(0, 60, 136, 0.5) !important; // color set only for main button
}

Gives optional character when create the LayerSwitcher :

var mLayerSwitcher = new LayerSwitcher({
                tipLabel: 'Légende', 
                buttonUDCChar: '9776' // hamburger UDC value
            })

maybe this may help someone.

Thanks,

Eric

PS : I have also add type to main button (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Button)

[walkermatt]

Hi @eldk how about using SVG as the background (which shouldn't require any changes to ol-layerswitcher) https://stackoverflow.com/a/25593531/526860