Geocoding - React Quickstart

Mapbox Geocoding provides a convenient way to leverage the Mapbox Geocoding API in a web or Node environment. Create interactive, powerful search sessions enabling users to search for address and places.

Easy-to-use UI components can be dropped into websites as standalone elements or as part of a comprehensive map experience.

This Quickstart Guide will help you get started with Geocoding using the Mapbox Search JS React framework.

To use Geocoding in a website (without React), see the Geocoding Web Quickstart.

Prerequisites

To use Mapbox Search JS, you need to have a Mapbox access token.

Your default public token

You can use your default public token to get started with the code snippets in this guide.

To get your default public token, login to account.mapbox.com and scroll down to the Access Tokens section.

This access token associates your search requests with a Mapbox account for billing. For more information on creating and using access tokens, see our token management documentation.

Installation

Install the NPM package.


npm install --save @mapbox/search-js-react

Once installed, the Geocoder component will be available for import into your React app.

Use the `Geocoder` component

Add the Geocoder component wherever you need an interactive geocoding input. Be sure to pass in your Mapbox access token as the prop accessToken, and any other configuration you may need. For the full list of props, see GeocoderProps in the React reference.


import { Geocoder } from '@mapbox/search-js-react';

const MyComponent = () => {
  return (
    <div>
    <Geocoder
      accessToken='YOUR_MAPBOX_ACCESS_TOKEN'
      options={{
        language: 'en',
        country: 'US'
      }}
    />
    </div>
  )
}

export default MyComponent

EXAMPLE

Autofill Checkout (React) example

Try a full address autofill workflow in React, including address confirmation and minimap.

Integration with a Mapbox GL JS Map

The <Geocoder> component can be used in a standalone fashion, but a common use case is to zoom to a location on a map and show a marker pin after the user chooses a result. <Geocoder> includes convenient configuration options for binding with a Mapbox GL JS Map instance to achieve this functionality.

The map prop binds to the Map instance, and the props mapboxgl and marker are used to create the Marker.


import { useRef, useEffect, useState } from "react";
import { Geocoder } from "@mapbox/search-js-react";
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";

const accessToken = "YOUR_MAPBOX_ACCESS_TOKEN";

export default function MapWithGeocoder() {
  const mapContainerRef = useRef();
  const mapInstanceRef = useRef();
  const [, setMapLoaded] = useState(false);
  const [inputValue, setInputValue] = useState("");
  useEffect(() => {
    mapboxgl.accessToken = accessToken;

    mapInstanceRef.current = new mapboxgl.Map({
      container: mapContainerRef.current, // container ID
      center: [-74.5, 40], // starting position [lng, lat]
      zoom: 9, // starting zoom
    });

    mapInstanceRef.current.on("load", () => {
      setMapLoaded(true);
    });
  }, []);

  return (
    <>
      <Geocoder
        accessToken={accessToken}
        map={mapInstanceRef.current}
        mapboxgl={mapboxgl}
        value={inputValue}
        onChange={(d) => {
          setInputValue(d);
        }}
        marker
      />
      <div id="map-container" ref={mapContainerRef} style={{ height: 300 }} />
    </>
  );
}