All layers activated but visible is false

[signmeuptwice]

With the code below all layers are displayed by default but only osm is set to visible:true

 const createLayerSwitcher = () => {
  const osm = new LayerTile({
    title: 'OSM',
    type: 'base',
    visible: true,
    source: new SourceOSM()
  });

  const google = new LayerTile({
    title: 'XYZ',
    type: 'base',
    visible: false,
    source: new TileImage({
      url: 'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}'
    })
  });

  const Cycling = new LayerTile({
    title: 'Cycling',
    type: 'base',
    visible: false,
    source: new TileImage({
      url: 'https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=957117772d9'
    })
  });

  const Outdoors = new LayerTile({
    title: 'Outdoors',
    type: 'base',
    visible: false,
    source: new TileImage({
      url: 'https://tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey=9571177125d072d9'
    })
  });

  const Landscape = new LayerTile({
    title: 'Landscape',
    type: 'base',
    visible: false,
    source: new TileImage({
      url: 'https://tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=9571177303a25d072d9'
    })
  });

  const baseMaps = new LayerGroup({
    title: 'Base maps',
    layers: [osm, google, Cycling, Outdoors, Landscape]
  });

  const map = new Map({
    target: 'map',
    layers: [baseMaps]
  });

  const layerSwitcher = new LayerSwitcher({
    reverse: true,
    groupSelectStyle: 'group'
  });
  olMap.value.map.addControl(layerSwitcher);
}

[walkermatt]

Hi, I assume the examples work for you? I can't see anything obvious in your code. Are the base map layers being displayed in the layer switcher with radio buttons?

[signmeuptwice]

I have not specified any more code than this except the template for the tile-layer

I realise that to get the menu populated I do not need to create objects

If I just put code from line const layerSwitcher = new LayerSwitcher I still have menu populated with same behavior

 const layerSwitcher = new LayerSwitcher({
    groupSelectStyle: 'group'
  });
  olMap.value.map.addControl(layerSwitcher)

So that means it is reading from vue template?

I put template code below

  <ol-tile-layer ref="osmLayer" title="Normal">
    <ol-source-osm />
  </ol-tile-layer>

  <ol-tile-layer ref="googleLayer" title="Satellite">
    <ol-source-xyz
        attributions='<a href="https://www.google.at/permissions/geoguidelines/attr-guide.html">Map data ©2015 Google</a>'
        url="https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}"
        title="Satellite"
    >
    </ol-source-xyz>
  </ol-tile-layer>

  <!--https://manage.thunderforest.com-->
  <ol-tile-layer ref="cyclingLayer" title="Cycling">
    <ol-source-xyz
        attributions='<a href="https://www.google.at/permissions/geoguidelines/attr-guide.html">Map data ©2015 Google</a>'
        url="https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=957117711bdd9"
        title="Satellite"
    >
    </ol-source-xyz>
  </ol-tile-layer>

  <ol-tile-layer  ref="outdoorLayer" title="Outdoors">
    <ol-source-xyz
        attributions='<a href="https://www.google.at/permissions/geoguidelines/attr-guide.html">Map data ©2015 Google</a>'
        url="https://tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey=95713a25d072d9"
        title="Satellite"
    >
    </ol-source-xyz>
  </ol-tile-layer>

  <ol-tile-layer  ref="landscapeLayer" title="Landscape">
    <ol-source-xyz
        attributions='<a href="https://www.google.at/permissions/geoguidelines/attr-guide.html">Map data ©2015 Google</a>'
        url="https://tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=9571a25d072d9"
        title="Satellite"
    >
    </ol-source-xyz>
  </ol-tile-layer>

[walkermatt]

Can you specify a type attribute for each ol-tile-layer element?

[signmeuptwice]

The attributes is what is being shown in the template. I am using Vue3-OpenLayers; I do not generate everything myself. Does that make any difference ?

[signmeuptwice]

Can you specify a type attribute for each ol-tile-layer element?

You mean adding new attribute type ?

there is no type prop in the doc

[signmeuptwice]

is there a way to access the current layerswitcher and manually deselect; could be a workaround but would not solve the core issue. If you want I can publish the full component code

[signmeuptwice]

in the end you were right. I just dumbed it and went for :visible="false" in template and it worked

It is not in their doc...

Good :)