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

One possible waysolution 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");

One possible way 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");

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");
Source Link
TomazicM
  • 27k
  • 24
  • 31
  • 42

One possible way 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");