If you want to set more than one base layers to choose from:

  1. Initialize map with a GroupTileLayer as the baseLayer, set candidate layers as the child layers.
  2. Set visible option of other layers than the default one to false to make them invisible.
  3. Layer Switcher will automatically list the layers to choose from.
index.html
<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Control and UIComponents - Layer Switcher</title>
  <style type="text/css">
    html,body{margin:0px;height:100%;width:100%}
    .container{width:100%;height:100%}
  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/maptalks.css">
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/maptalks.min.js"></script>
  <body>

    <div id="map" class="container"></div>
    <script>
      var map = new maptalks.Map('map', {
        center: [-0.113049,51.498568],
        zoom: 14,
        layerSwitcherControl: {
          'position'  : 'top-right',
          // title of base layers
          'baseTitle' : 'Base Layers',
          // title of layers
          'overlayTitle' : 'Layers',
          // layers you don't want to manage with layer switcher
          'excludeLayers' : [],
          // css class of container element, maptalks-layer-switcher by default
          'containerClass' : 'maptalks-layer-switcher'
        },
        baseLayer: new maptalks.GroupTileLayer('Base TileLayer', [
          new maptalks.TileLayer('Carto light',{
            'urlTemplate': 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
            'subdomains'  : ['a','b','c','d']
          }),
          new maptalks.TileLayer('Carto dark',{
            'visible' : false,
            'urlTemplate': 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
            'subdomains'  : ['a','b','c','d']
          })
        ])
      });

      var layer = new maptalks.VectorLayer('Vector Markers', [
        new maptalks.Marker(map.getCenter().add(0.01, 0.006)),
        new maptalks.Marker(map.getCenter().add(0.01, 0)),
        new maptalks.Marker(map.getCenter().add(0.01, -0.006))
      ]);
      layer.addTo(map);

      var layer2 = new maptalks.VectorLayer('Circle Markers', [
        new maptalks.Marker(map.getCenter().add(-0.01, 0.006)),
        new maptalks.Marker(map.getCenter().add(-0.01, 0)),
        new maptalks.Marker(map.getCenter().add(-0.01, -0.006))
      ], {
        style : [{
          filter : true,
          symbol : {
            markerType : 'ellipse',
            markerWidth : 20,
            markerHeight : 20,
            markerFill : '#f00',
            markerLineWidth : 2
          }
        }]
      });
      layer2.addTo(map);

    </script>
  </body>
</html>
Copied!