How to implement georeverse code in my application?

Maps SDK for Web (JavaScript)
#1

Hi, i want to add a georeverse function to my code but I am not really sure how to do that. My Code looks like this : map.current.on(“click”, function (event) {

  console.log(event);

  marker = new tt.Marker().setLngLat(event.lngLat).addTo(map.current);

  new tt.Popup({ offset: popupOffsets })

    .setLngLat(event.lngLat)

    .setText("Coordinates: " + event.lngLat)

    .addTo(map.current);

  event = event.lngLat;

  markers.push(marker);

  console.log(marker.getlngLat);

  lngLatset = event.lngLat;

});

As you can tell the user creates a marker with a popup when he clicks on the map. I want to convert the lng and lat to a human readable adress. Iam looking forward to answers :slight_smile:

#2

Hey! Thanks for using our Web SDK :slight_smile:

TomTom Web SDK is a modularized library - so it consists of few standalone packages. To be able to use Reverse Geocode API, you need to include services library in your project: Downloads | Maps SDK Web JS v6

Once you have this package added to your app, adding the call to the Reverse Geocode API in your case would look like this:

 map.on("click", function (event) {
   
  var marker = new tt.Marker().setLngLat(event.lngLat).addTo(map);

   // perform Reverse Geocode API call
   tt.services.reverseGeocode({
       key: '<YOUR_API_KEY>',
       position: event.lngLat.toArray() //pass coordinates from event object as array
   })
    .then(function(response) {
      // if the call to the service was successfull add the popup here
       var popup = new tt.Popup({ anchor: 'top'})
        .setLngLat(event.lngLat)
        .setText(response.addresses[0].address.freeformAddress)
        .addTo(map);
 
       marker.setPopup(popup);
    })
    .catch(function(error) {
      // if the call failed, handle the error here
      console.log(error)
    });
});

I used map object directly, but in your case I assume it will be map.current...

Hope it helps :slight_smile:

1 Like