Administrative Flächen einzeichnen

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.

SmartMaps-Karte

Ein Klick auf ein Bundesland lädt die dazugehörige administrative Fläche auf der Karte

Codebeispiel: Karte einzeichnen

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Flächenservice</title>
</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" 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"); // 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>