Building with the Match API - Part 3 Reverse Geocoding

3 Minute Read

In Parts 1 and 2 of this series I introduced Addresscloud's Match API to search and map for an address. In this post I'm going to demonstrate Match's reverse geocoding capabilities - taking in coordinates and searching for nearby addresses.

Reverse geocoding a multi-occupancy property.

This tutorial builds on the material covered in Part 1 and Part 2. If you'd like an Addresscloud API key for testing please email All tutorials are available at

Need an "out the box" solution? Addresscloud provides a fully-fledged and globally-available map service to its customers for property searches and risk assessments. Contact for more details.


  1. Download the tutorial repository from GitHub here.
  2. Unzip the folder and navigate to the workspace for this tutorial: interactive/match/03_reverse_geocoding.
  3. Add your Addresscloud API credentials to api.js.
  4. Add your OS Vector Tile API key (created in Part 2) to map.js
  5. Open index.html.

Configuring the API

Open js/api.js and add your Addresscloud API key to the axios instance. Similar to Part 2, the reverseGeocode() function calls the Addresscloud geoode endpoint. However, instead of passing an address string into the query object a latitude/longitude pair is passed into the coordinates query. The endpoint also takes a search radius parameter (metres) for the reverse geocode search. Your api.js file should look as follows:

 // Setup
const api = axios.create({
    baseURL: '',
    headers: { 'X-CLIENT-ID': 'client-id', 'X-API-KEY': 'api-key' }

// Geocode an address
async function reverseGeocode(lon, lat, radius) {
    const { data } = await api.get(`/geocode?coordinates=${lon},${lat}&radius=${radius}`)

    return data
Snippet showing the api.js file.

Building the Map

Add your OS API key at the top of the js/map.js file to enable the OS Vector tiles layer. The map works by allowing the user to drag a marker around, and once the user releases the marker the coordinates are captured and sent to the reverseGeocode() function. This functionality is handled by the onDragEnd() function, which displays the reverse geocoding results in a pop-up.

    async function onDragEnd() {
        var { lng, lat } = marker.getLngLat();
        const data = await reverseGeocode(lng, lat, 5)
        document.getElementById('address').innerHTML = `<h2>Address</h2>`
        for (const address of data.results){
            document.getElementById('address').innerHTML += `<h3>${address.description}</h3>`
        marker.on('dragend', onDragEnd);
Map function onDragEnd() which fires after the user has moved the map pin and calls reverseGeocode().


Once you've updated your API keys you should be able to view index.html to see the map. Drop the pointer on a building to see its address! This simple example shows how you can quickly get setup to perform precise reverse geocoding requests, using Addresscloud's geocoding API. In the next tutorial we'll extend the service to add data from Addresscloud's intel service, including property attributes and geographic risk data.

Addresscloud in Action

See how Addresscloud services are helping our customers solve real-world challenges.


Want to see it for yourself? Try now!

Try it now