How to search places by coordinates (reverse geocoding)

In this step-by-step tutorial, we will demonstrate the process of finding locations using coordinates through the utilization of the MapTiler Geocoding API. The option to search by coordinates allows for the conversion of specific coordinates into corresponding place names, a technique commonly referred to as reverse geocoding.

MapTiler’s all-in-one Geocoding search API offers users the ability to effortlessly locate specific places either by their names or addresses (direct geocoding) or by inputting coordinates (reverse geocoding).

^{Click on the map to search for places.}

1. Copy the following code, paste it into your favorite text editor, and save it as a .html file.

2. Install the npm package.

3. Include the CSS file.

   If you have a bundler that can handle CSS, you can import the CSS or include it with a <link> in the head of the document via the CDN

4. Include the following code in your JavaScript file (Example: app.js).

5. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

6. The next is up to you. You can center your map wherever you desire (modifying the starting position) and set an appropriate zoom level (modifying the starting zoom) to match your users’ needs. Additionally, you can change the map’s look (by updating the source URL); choose from a range of visually appealing map styles from our extensive MapTiler standard maps, or create your own to truly differentiate your application.

7. Create the map layer where we will display the search results.

8. Create the function to perform the reverse geocoding search when the map is clicked. Show the results on the map and adjust the map view to the results.

9. We already have the results on the map, now we will create a list to show the place names found. By clicking on a name we will zoom to the bbox of the place

10. Create the html element where to display the list. Add after the element that contains the map

11. Create the style of the list. Add the list style to your stylesheet.

Learn more

Check out the tutorials on How to search places (geocoding) and How to search places using the geocoder component.

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

Related examples

Geocoding search for POIs near the user's location

Example

Geocoding control search results filter by type and given higher priority for the results near the user's location.

Reverse geocoding uses the user’s location

Example

How to search for places by coordinates (reverse geocoding) using the user's location. Reverse geocoding transforms coordinates into place names.

Geolocate control (GPS)

Example

This tutorial shows how to disable the geolocate control to show the user's location using the GPS or the browser location.