Skip to main content

Geocoding

Geocode an address from a search query and zoom to that location on the map.

Geocoding

Sample code

import React, { useEffect, useState } from "react";
import {
  View,
  NativeModules,
  StyleSheet,
  Platform,
} from "react-native";

import { TrimbleMapsMap } from "./TrimbleMapsMapViewManager";

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

export const Geocoding = () => {
  const [mapLoaded, setMapLoaded] = useState(false);
  const searchTerm = "1 Independence Way Princeton NJ 08540";

  useEffect(() => {
    const geocodeCallback = (error, results) => {
      if (error) {
        console.log(error);
      } else {
        const firstResult = JSON.parse(results[0]);
        console.log(results[0]);
        const lat = parseFloat(firstResult.Coords.Lat);
        const lon = parseFloat(firstResult.Coords.Lon);
        moveCameraAndZoom(lat, lon, 13);
      }
    };

    if (Platform.OS === "ios" && mapLoaded) {
      TrimbleMapsGeocoding.createGeocodingParams(searchTerm);
      TrimbleMapsGeocoding.geocode(geocodeCallback);
    } else if (Platform.OS === "android") {
      TrimbleMapsGeocoding.createGeocodingBuilder();
      TrimbleMapsGeocoding.query(searchTerm);
      TrimbleMapsGeocoding.buildGeocoding();
      TrimbleMapsGeocoding.geocode(geocodeCallback);
    }
  }, [mapLoaded]);

  const moveCameraAndZoom = async (lat, lon, zoom) => {
    if (Platform.OS === "ios") {
      await TrimbleMapsMapView.setCenterCoordinateAndZoom(lat, lon, zoom, true);
    } else {
      TrimbleMapsMapView.setZoom(13.0);
      TrimbleMapsMapView.setTarget(lat, lon);
      TrimbleMapsMapView.buildCameraPosition();
      TrimbleMapsMapView.animateCamera();
    }
  };

  const onMapLoaded = (e) => {
    console.log("map loaded");
    setMapLoaded(true);
  };

  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}
        />
      </View>
    </View>
  );
};
Last updated February 9, 2024.