Drawing administrative areas

You can draw one or more administrative boundaries on the map. All you have to do is indicate a geographical point that lies within the administrative boundary to be defined. In the following example, the surrounding federal state is drawn in.

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

SmartMaps map

A click on a federal state loads the corresponding administrative area on the map

Code example: Drawing administrative areas

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Surface service</title>
</head>

<body>
  <div id="map-wrapper">
    <div class="geocoder-form" style="z-index:1000">
      <p>A click on a federal state loads the corresponding administrative area on the map</p>
      <small id="message"></small >
    </div>
    <div id="map" style="height: 400px; width: 500px;"></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) {
      var message = document.getElementById("message");

      // Define map.
      var map = ym.map("map", {
        center: ym.latLng(48.991897, 8.435568),
        zoom: 6
      });

      // Define surface layer.
      var areaLayer = ym.geoJson(null, {
        onEachFeature: function(feature, layer) {
          var popupContent = "";
          for (var k in feature.properties) {
            popupContent += "<b>" + k + "</b> " + feature.properties[k] + "<br>";
          }
          layer.bindPopup("<pre>" + popupContent + "</pre>");
        }
      });

      // Drawing layers.
      map.addLayer(areaLayer);

      var area = new ym.services.Area();

      area.on('success', function(req, res) {
        message.innerHTML = "Data was transmitted";
        areaLayer.addData(res.body);
        map.fitBounds(areaLayer.getBounds());
      });

      window.map = map;

      map.on('click', function(e) {
        message.innerHTML = "Area is loaded...";
        if (areaLayer) {
          areaLayer.clearLayers();
        }
        area.load(e.latlng, [1]);
      });
    });
  </script>
</body>

</html>