MapTiler SDK JS geocoding component how to search places using React JS

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

1. Follow the React JS with MapTiler maps 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.jsx file.

4. Create the GeocodingControl ref

1. Add the GeocodingControl to the map. Use the current MapTiler SDK map.

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

your map.ccs file should look like this:

MapTiler Geocoding control on GitHub

Learn more

Visit the MapTiler Geocoding API reference for all search options. For example specifying the language of the results, etc.

Related examples

Learn the basics - React

Tutorials

Create React JS components for MapTiler SDK JS maps.

Map with Material UI

Tutorials

Create React JS maps with Material UI and MapTiler.

Points from geojson - React

Tutorials

Add GeoJSON points to React JS maps with MapTiler.

Heatmap in React JS

Tutorials

Create heatmap visualizations in React JS maps using MapTiler.

Popup and sidebar - React

Tutorials

Create popups and sidebars in React JS maps.

Geocoding control - React

Tutorials

Add geocoding control to React JS maps using MapTiler.

3D Terrain Map

Tutorials

Create 3D terrain maps with geocoding in React JS.