Add multiple WMTS sublayers as basemap items in Basemap Gallery

[YingwenDeng]

Hello! 

I want to add sub-layers from a WMTS URL as basemap items in my BasemapGallery widget. 

My current "solution": 

1. Create two WMTS layer from the same URL but with different activeLayer.

2. Use these two WMTS layer to create two basemap object.

3. Add above two basemap objects to BasemapGallery.

  // create two WMTS layers with different active layer
        const wmtsLayer1 = new WMTSLayer({
          url: "https://basemap.at/wmts/",
          activeLayer: {
            id: "bmapoverlay"
          }
        });
        const wmtsLayer2 = new WMTSLayer({
          url: "https://basemap.at/wmts/",
          activeLayer: {
            id: "geolandbasemap"
          }
        });
  // create base maps with WMTS layers above
        const basemap01 = new Basemap({
          baseLayers: [wmtsLayer1],
          title: "basemap.at",
          id: "myBasemap",
          thumbnailUrl:
            "https://maps4.wien.gv.at/basemap/bmapoverlay/normal/google3857/14/5707/8794.png"
        });

        const basemap02 = new Basemap({
          baseLayers: [wmtsLayer2],
          title: "basemap.at02",
          id: "myBasemap02",
          thumbnailUrl:
            "https://maps4.wien.gv.at/basemap/geolandbasemap/normal/google3857/14/5707/8794.png"
        });

   // add to basemap source
        const basemapGallery = new BasemapGallery({
          view: view,
          source: [
            Basemap.fromId("topo-vector"),
            Basemap.fromId("hybrid"),
            basemap01,
            basemap02
          ]
        });

In the output web map, user can switch between two base maps.

However, both options appear to be selected in the BasemapGallery widget, when only one is selected.  

When option "basemap.at" is selected:

When "basemap.at02" is selected:

Is there any other way to do it? I tried to create only one WMTSLayer and then use multiple WMTSSublayer. But this doesn't work for me.

  const wmtsLayer = new WMTSLayer({
          url: "https://basemap.at/wmts/",
        });
  const wmtsubly01 = new WMTSSublayer({
          layer: wmtsLayer,
          id: "bmaporthofoto30cm"
        })
  const basemap03 = new Basemap({
          baseLayers: [wmtsubly01],
          title: "basemap.at03",
          id: "myBasemap03",
          thumbnailUrl:
            "https://maps4.wien.gv.at/basemap/geolandbasemap/normal/google3857/14/5707/8694.png"
        });

Thanks!

[UndralBatsukh]

Hi there, 

This is a known issue. We will install a fix for this (hoping version 4.23) and will update you once the fix is installed. 

[UndralBatsukh · Accepted solution]

Hi @YingwenDeng, 

Just want to let you know that we fixed this issue at version 4.23 which will be released on 3/23/2022. 

-Undral

[YingwenDeng]

That's great! Thanks for letting me know. 

[YingwenDeng]

Hello Undral,

I just tried version 4.23. But somehow I still have the same issue with my base maps.  

I am not sure if there is something wrong with my implementation. 

This is my script: 

    const basemapAT01 = new Basemap({
        baseLayers: [
           new WMTSLayer({
                url: "https://basemap.at/wmts/",
                activeLayer: {
                    id: "geolandbasemap"
                }
            })
        ],
        title: "basemap.at - Geoland Basemap",
        id: "myBasemap",
        thumbnailUrl:
            "https://maps3.wien.gv.at/basemap/geolandbasemap/normal/google3857/10/356/549.png"
    }); 
const basemapAT02 = new Basemap({
        baseLayers: [
            new WMTSLayer({
                url: "https://basemap.at/wmts/",
                activeLayer: {
                    id: "bmaporthofoto30cm"
                }
            })
        ],
        title: "basemap.at - Orthofoto",
        id: "myBasemap02",
        thumbnailUrl:
            "https://maps3.wien.gv.at/basemap/bmaporthofoto30cm/normal/google3857/9/178/275.jpeg"
    });
 const basemapGallery = new BasemapGallery({
        view: view,
        source: [
            basemapAT01,
            basemapAT02
        ]
    });

[UndralBatsukh]

Hi there, 

The fix will be available tomorrow (3/25/2022). Can you please try it again tomorrow and let me if it is not working? 

Thanks

[YingwenDeng]

Sure, no problem. 

[YingwenDeng]

Hi Undral, 

The problem is fixed. 

- Yingwen

[UndralBatsukh · Accepted solution]

Hi there, 

Thanks for letting me know. Please mark this issue as solved.