1. Home
  2. Dokumente
  3. Karten
  4. Beispiele
  5. Flächenservice
  6. Bereiche auf der Karte anzeigen

Bereiche auf der Karte anzeigen

Sie können auf der Karte eine oder mehrere administrative Grenzen einzeichnen. Hierzu müssen Sie lediglich einen geographischen Punkt angeben, der innerhalb der zu bestimmenden administrativen Grenze liegt. Im folgenden Beispiel wird das umgebende Bundesland eingezeichnet.

Das Beispiel ist vollständig. Sie können es lokal in einer Datei abspeichern und im Browser aufrufen. Sie müssen lediglich den Wert für den apiKey ersetzen.

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Flächenservice</title>
  <!-- SmartMaps CSS einbinden. -->
  <link href="https://www.yellowmap.de/Presentation/Yellowmaps/Examples/assets/site.css" rel="stylesheet">
  <link rel="stylesheet" href="https://www.yellowmap.de/api_js/cdn/highlight/styles/github.css">
</head>

<body>
  <div id="map-wrapper">
    <div class="geocoder-form" style="z-index:1000">
      <p>Klick in die Karte lädt den zugehörigen Bereich</p>
      <small id="message"></small >
    </div>
    <div id="map"></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");

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

      // Flächen-Layer definieren.
      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>");
        }
      });

      // Layer einzeichnen.
      map.addLayer(areaLayer);

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

      area.on('success', function(req, res) {
        message.innerHTML = "Daten wurden übermittelt";
        areaLayer.addData(res.body);
        map.fitBounds(areaLayer.getBounds());
      });

      window.map = map;

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

</html>

 

Wie können wir helfen?