Skip to content

Reverse Geocoding

The SmartMaps API can infer the corresponding address from a geocoordinate. This type of geocoding is called reverse geocoding. The example is complete; you can save it locally in a file and view it in your browser. Click on the map to trigger the reverse geocoding for the selected point.

<!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=kVswlU9{YOUR 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>

This HTML code allows you to perform reverse geocoding using the SmartMaps API. You can save this code to a file and open it in your browser to see the reverse geocoding functionality in action.