Reverse Geocoding

The SmartMaps API is able to infer the corresponding address from a geocoordinate. Compared to geocoding, this type of geocoding is called reverse geocoding.

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

Click on the map to trigger the reverse geocoding for the selected point.

SmartMaps map

Code example: Reverse Geocoding

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Reverse Geocoding</title>
</head>

<body>
  <div id="map-wrapper">
    <div class="geocoder-form" style="z-index:1000">
      <form id="location-form">
        <fieldset>
          <label>
              Country:
              <input type="text" id="country" name="country" value="" placeholder="country">
            </label>
          <label>
              State:
              <input type="text" id="district" name="district" value="" placeholder="state">
            </label>
          <label>
              Zip:
              <input type="text" id="zip" name="zip" value="" placeholder="zip">
            </label>
          <label>
              City:
              <input type="text" id="city" name="city" value="" placeholder="city">
            </label>
          <label>
              District:
              <input type="text" id="cityPart" name="cityPart" value="" placeholder="district">
            </label>
          <label>
              Street:
              <input type="text" id="street" name="street" value="" placeholder="street">
            </label>
          <label>
              Housenumber:
              <input type="text" id="houseNo" name="houseNo" value="" placeholder="housenumber">
            </label>
        </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');

      // Define Layer Group.
      var markerLayer = ym.layerGroup();

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

      // Drawing a Layer Group.
      markerLayer.addTo(map);

      // Click on map triggers reverse geocoding.
      map.on('click', function(e) {
        markerLayer.clearLayers();
        ym.services.geoCoder.reverseGeocode(e.latlng);
        markerLayer.addLayer(ym.marker(e.latlng, {
          icon: ym.provider.Icon.Default()
        }));
      });

      ym.services.geoCoder.on('success', function(req, res) {
        // Fill out the form.
        var geoJson = ym.geoJson(res.body, {
          onEachFeature: function(feature, layer) {
            console.log(feature);
            document.getElementById("country").value = feature.properties.isoCountry;
            document.getElementById("district").value = feature.properties.district;
            document.getElementById("zip").value = feature.properties.zip;
            document.getElementById("city").value = feature.properties.city;
            document.getElementById("cityPart").value = feature.properties.cityPart;
            document.getElementById("street").value = feature.properties.street;
            document.getElementById("houseNo").value = feature.properties.houseNo;
          }
        });
      });

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