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.

SmartMaps-Karte

Geokodiere Adresse

Codebeispiel: Geokodierung von Adressen

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Geokodierung</title>
</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" 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 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>