MapLibre GL JS geocoding control how to search places using React JS

This tutorial shows how to search for places using the Geocoding control. The geocoder component facilitate the use of the MapTiler Geocoding API.

1. Follow the How to display MapLibre GL JS map using React JS tutorial to create a simple fullscreen map application. You do not need to add the marker to the map.

2. Install the Geocoding control module

    npm install --save @maptiler/geocoding-control
   

3. Import the Geocoding control and the required React functions. Add these lines on top of map.js file.

4. Create the mapController state

5. Set the mapController. Use the current MapLibre map.

6. Add the GeocodingControl component to the map.

7. We’ll need a simple style to correctly render the Geocoding control on the map. Add the following to the end of the map.css file.

    .geocoding {
      position: absolute;
      top: 10px;
      left: 10px;
    }
   

We are finished, your map.js file should look like this:

your map.ccs file should look like this:

MapTiler Geocoding control on GitHub