Skip to main content
2 of 2
added 5 characters in body
TomazicM
  • 27k
  • 24
  • 31
  • 42

One possible solution is to use purely CSS, so there's no need for for hacks like layerList.classList.add("iconLayerList").

The below CSS works for the above simple case (more complex selector might be necessary with complex maps):

div[title=Layers] calcite-icon {
  background-image: url('https://i.imgur.com/ESUiDwT.png');
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: center;
}

JS part stays unchanged:

const layerListExpand = new Expand({
    view: view,
    expandTooltip: "Layers",
    expandIcon: '',
    content: new LayerList({
      view: view,
    })
});

view.ui.add(layerListExpand, "top-right");
TomazicM
  • 27k
  • 24
  • 31
  • 42