1. Home
  2. Dokumente
  3. Karten
  4. Beispiele
  5. Geokodierung
  6. Geokodierung von Adressen

Geokodierung von Adressen

SmartMaps kann Adressen weltweit geokodieren. In diesem Beispiel werden die einzelnen Bestandteile einer Adresse zur Geokodierung verwendet.

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>Geokodierung</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">
      <form id="location-form">
        <fieldset>
          <legend>Geokodiere Adresse</legend>
          <label>
              Postleitzahl:
              <input type="text" name="zip" value="76133" placeholder="zip code">
            </label>
          <label>
              Stadt:
              <input type="text" name="city" value="Karlsruhe" placeholder="city">
            </label>
          <label>
              Straße:
              <input type="text" name="street" value="Wattkopfstr" placeholder="street">
            </label>
          <input type="hidden" name="country" value="DE">
          <button type="submit">send</button>
        </fieldset>
      </form>
    </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 geocodingForm = document.getElementById('location-form');

      // Layergruppe definieren.
      var layerGroup = ym.layerGroup();

      // Karte einzeichnen.
      var map = ym.map("map", {
        center: ym.latLng(49.021273, 8.439316),
        zoom: 14
      });

      // Layergruppe einzeichnen.
      layerGroup.addTo(map);

      geocodingForm.onsubmit = function(e) {
        e.preventDefault();
        var inputs = document.querySelectorAll('#location-form input');
        var zip = inputs[0].value;
        var city = inputs[1].value;
        var street = inputs[2].value;
        var country = inputs[3].value;
        // Adressdaten geokodieren.
        modules.geocode({
          "country": country,
          "district": "",
          "zip": zip,
          "city": city,
          "cityAddOn": "",
          "cityPart": "",
          "street": street,
          "houseNo": "",
          "singleSlot": ""
        });
      };

      ym.services.geoCoder.on('success', function(req, res) {
        // Alte Daten aus der Karte löschen.
        layerGroup.clearLayers();
        var geoJson = ym.geoJson(res.body, {
          // Für jeden Eintrag Marker einzeichnen.
          onEachFeature: function(feature, layer) {
            layer.setIcon(ym.provider.Icon.Default());
            var popUpContent = "";
            if (feature.properties.street) {
              popUpContent += feature.properties.street + ", "
            }
            if (feature.properties.zip) {
              popUpContent += feature.properties.zip + " "
            }
            if (feature.properties.city) {
              popUpContent += feature.properties.city + " "
            }
            if (feature.properties.cityPart) {
              popUpContent += feature.properties.cityPart
            }
            // Adressdaten im PopUp anzeigen.
            layer.bindPopup(popUpContent);
          }
        });
        // Kartenausschnitt auf Ergebnismenge optimieren.
        map.fitBounds(geoJson.getBounds());
        layerGroup.addLayer(geoJson);
      });

      ym.services.geoCoder.on('error', function(req, res, errorType) {
        console.log(arguments);
      });
    });
  </script>
</body>
</html>

 

Wie können wir helfen?