maptalks - Layer Switcher

Download All

Layer Switcher

Source

Open

Edit

Copy

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

Initialize map with a GroupTileLayer as the baseLayer, set candidate layers as the child layers.
Set visible option of other layers than the default one to false to make them invisible.
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://unpkg.com/maptalks/dist/maptalks.css">
  <script type="text/javascript" src="https://unpkg.com/maptalks/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': 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
            'subdomains'  : ['a','b','c','d']
          }),
          new maptalks.TileLayer('Carto dark',{
            'visible' : false,
            'urlTemplate': 'https://{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>

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': 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
      'subdomains': ['a', 'b', 'c', 'd']
    }),
    new maptalks.TileLayer('Carto dark', {
      'visible': false,
      'urlTemplate': 'https://{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);