Show and hide layers

The API allows you to place any number of display layers over the map.

The example is complete; you can save it locally in a file and call it in the browser. You only have to replace the value for the apiKey.

Click on the symbol in the upper right corner of the example and select the layer you want to show or hide.

SmartMaps map

Code example: Show and hide layers

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Test example LayerControl</title>
</head>

<body>
  <div id="map-wrapper">
    <!-- Predefined DIV element into which the map is loaded. -->
    <div id="map" style="width: 600px; height: 600px;"></div>
  </div>
  <!-- SmartMaps-API -->
  <script src="https://www.yellowmap.de/api_rst/api/loader?libraries=free-3&apiKey={API_KEY}"></script>

  <script>
    ym.ready(function(modules) {

      // Define Layer Group
      var cities1 = L.layerGroup();
      var cities2 = L.layerGroup();

      // Add markers to layer group.
      new modules.provider.Marker([50.1145465, 8.6825010]).bindPopup('Zeil').addTo(cities1),
      new modules.provider.Marker([50.1146118689, 8.683300316333]).bindPopup('Stiftstrasse').addTo(cities1),
      new modules.provider.Marker([50.113980633146, 8.678405284881592]).bindPopup('Hauptwache').addTo(cities2),
      new modules.provider.Marker([50.11122167392529, 8.680733442306519]).bindPopup('Rathaus').addTo(cities2);

      // Define map
      var map = ym.map("map", {
        center: ym.latLng(50.1145465, 8.6825010),
        zoom: 15
      });

      // Define Object for Layer-Control => Name and Content
      var overlays = {
    		"Innenstadt": cities1,
        "Hauptwache und Rathaus": cities2
      	};

      // Add initials content to map.
      map.original.addLayer(cities2);
      // Add Layer Control to Map.
      L.control.layers(null, overlays).addTo(map.original);
    });
  </script>
</body>
</html>