Skip to main content

Reverse geocoding

Reverse geocoding allows you to retrieve the nearest address for given longitude and latitude coordinates.

Fill polygon

Sample code

import React, { useEffect, useState } from "react";
import {
  Alert,
  View,
  NativeModules,
  NativeEventEmitter,
  Platform,
  StyleSheet,
  ToastAndroid,
} from "react-native";
import { TrimbleMapsMap } from "./TrimbleMapsMapViewManager";

const TrimbleMapsMapView = NativeModules.TrimbleMapsMapViewModule;
const TrimbleMapsGeocoding = NativeModules.TrimbleMapsGeocoding;
const TrimbleMapsMapViewConstants = TrimbleMapsMapView.getConstants();

export const ReverseGeocoding = () => {
  const [mapLoaded, setMapLoaded] = useState(false);

  useEffect(() => {
    const reverseTrimbleMapsGeocoding = async (event) => {
      if (Platform.OS === "android") {
        TrimbleMapsGeocoding.createGeocodingBuilder();
        TrimbleMapsGeocoding.queryLatLng(event.getLatitude, event.getLongitude);
        TrimbleMapsGeocoding.buildGeocoding();
        TrimbleMapsGeocoding.geocode(geocodeCallback);
      } else if (Platform.OS === "ios") {
        await TrimbleMapsGeocoding.createGeocodingParams(
          `${event.getLatitude}, ${event.getLongitude}`
        );
        await TrimbleMapsGeocoding.geocode(geocodeCallback);
      }
    };

    const eventEmitter = new NativeEventEmitter(TrimbleMapsMapView);
    let onMapClickListener = eventEmitter.addListener(
      "onMapClick",
      reverseTrimbleMapsGeocoding
    );

    TrimbleMapsMapView.addOnMapClickListener();

    return () => {
      onMapClickListener.remove();
    };
  }, [mapLoaded]);

  const geocodeCallback = (error, results) => {
    if (error) {
      console.log(error);
    } else {
      var resultStr = "No Results";
      if (results.length > 0) {
        const firstResult = JSON.parse(results[0]);
        resultStr = firstResult.ShortString;
      }
      if (Platform.OS === "android") {
        ToastAndroid.show(resultStr, ToastAndroid.SHORT);
      }
      if (Platform.OS === "ios") {
        Alert.alert(resultStr);
      }
    }
  };

  const onMapLoaded = (e) => {
    setMapLoaded(true);
  };

  const onTapGesture = async (e) => {
    // another way you can specify tap call back for iOS
    console.log("Tap Gesture callback");
  };

  const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
    mapStyle: {
      flex: 1,
    },
  });

  return (
    <View style={styles.container}>
      <View style={styles.container}>
        <TrimbleMapsMap
          style={styles.mapStyle}
          styleURL={TrimbleMapsMapViewConstants.MOBILE_DAY}
          onMapLoaded={onMapLoaded}
          onTapGesture={onTapGesture}
        />
      </View>
    </View>
  );
};
Last updated February 15, 2024.