maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY'; const map = new maptilersdk.Map({ container: 'map', style: maptilersdk.MapStyle.STREETS, center: [2.3522, 48.8566], zoom: 13 }); const popup = new maptilersdk.Popup(); map.on('click', async (e) => { const { lng, lat } = e.lngLat; const res = await fetch(`https://api.maptiler.com/geocoding/${lng},${lat}.json?key=YOUR_MAPTILER_KEY`); const data = await res.json(); const name = data.features.length ? data.features[0].place_name : 'No result'; popup.setLngLat([lng, lat]).setHTML(`<b>${name}</b><br>${lng.toFixed(5)}, ${lat.toFixed(5)}`).addTo(map); });

How it works

Reverse geocoding converts coordinates to a place name. Click anywhere on the map to trigger a request to https://api.maptiler.com/geocoding/{lng},{lat}.json.

The API returns matching features sorted by relevance. The place_name property contains a human-readable address. The popup displays it along with the clicked coordinates.

The coordinate order in the URL is lng,lat: the same order used throughout the SDK and GeoJSON.

Key APIs

API	Description	Docs
Reverse Geocoding API	Coordinates to address REST endpoint	docs.maptiler.com/cloud/api/geocoding/
`map.on('click')`	Click event with lngLat	docs.maptiler.com/sdk-js/api/
`maptilersdk.Popup`	Display result in a popup	docs.maptiler.com/sdk-js/api/

FAQ

What types of places are returned?

The API returns results at multiple levels of detail: address, street, neighborhood, city, region, and country. The first result is the most specific.

Can I get results in a specific language?

Yes. Add &language=fr to the URL to get French place names.

Common mistakes

Swapping lat and lng in the URL: the order is lng,lat (not lat,lng)
Not handling empty results: some ocean or remote areas have no geocoding data
Making too many requests: debounce if using mousemove instead of click

Reverse Geocoding with MapTiler SDK

How it works

Key APIs

FAQ

Common mistakes

Build maps using MapTiler SDK with AI

Related Examples