JavaScript Wrapper for the what3words Web API

A JavaScript library to use the what3words REST API.

The JavaScript API wrapper is useful for JavaScript developers who wish to seamlessly integrate the what3words API into their JavaScript applications, without the hassle of having to manage the low level API calls themselves.

The what3words API is a fast, simple interface which allows you to convert 3 word addresses such as ///index.home.raft to latitude and longitude coordinates such as (-0.203586, 51.521251) and vice versa. It features a powerful autosuggest function, which can validate and autocorrect user input and limit it to certain geographic areas (this powers the search box on our map site). It allows you to request a section of the what3words grid (which can be requested as GeoJSON for easy display on online maps), and to request the list of all languages supported by what3words. For advanced users, autosuggest can be used to post-process voice output. See links on the left to navigate.

All coordinates are latitude,longitude pairs in standard WGS-84 (as commonly used worldwide in GPS systems). All latitudes must be in the range of -90 to 90 (inclusive).

Step 1: Obtain an API key

Sign up to obtain your free API key.

Step 2: Installation

To load the what3words JavaScript API, use a script tag like the one in the following example:

<script src="https://assets.what3words.com/sdk/v3/what3words.js?key=YOUR_API_KEY"></script>

The URL contained in the script tag is the location of a JavaScript file that loads everything you need for using the what3words JavaScript API.

The key parameter contains your application's API key. Sign up to obtain your free API key.

Step 3: Usage

Convert to 3 word address

Convert coordinates, expressed as latitude and longitude to a 3 word address.

More info about convertTo3wa, including returned results is available in the what3words REST API documentation.

Return standard response.

Code Example
what3words.api.convertTo3wa({lat:51.508344, lng:-0.12549900}).then(function(response) {
   console.log("[convertTo3wa]", response);
});

Return as GeoJSON.

Code Example
what3words.api.convertTo3waGeoJson({lat:51.508344, lng:-0.12549900}).then(function(response) {
   console.log("[convertTo3wa]", response);
});

Convert to coordinates

Convert a 3 word address to a position, expressed as coordinates of latitude and longitude.

This function takes the words parameter as a string of 3 words 'table.book.chair'

More info about convertToCoordinates, including returned results is available in the what3words REST API documentation.

Return standard response.

Code Example
what3words.api.convertToCoordinates("filled.count.soap").then(function(response) {
   console.log("[convertToCoordinates]", response);
});

Return as GeoJSON.

Code Example
what3words.api.convertToCoordinatesGeoJson({lat:51.508344, lng:-0.12549900}).then(function(response) {
   console.log("[convertTo3wa]", response);
});

Autosuggest

When presented with a 3 words address which may be incorrectly entered, autosuggest returns a list of potential correct 3 word addresses. It needs the first two words plus at least the first character of the third word to produce suggestions.

This method provides corrections for mis-typed words (including plural VS singular), and words being in the wrong order.

Optionally, clipping can narrow down the possibilities, and limit results to:

  • one or more countries
  • a geographic area (a circle, box or polygon)

This dramatically improves results, so we recommend that you use clipping if possible.

To improve results even further, set the focus to user’s current location. This will make autosuggest return results which are closer to the user.

More info about autosuggest, including returned results is available in the what3words REST API documentation.

Code Example Simple basic call.
what3words.api.autosuggest("fun.with.code").then(function(response) {
   console.log("[autosuggest]", response);
});
Code Example Autosuggest, adjust the number of results returned.
what3words.api.autosuggest("fun.with.code", { nResults: 5})
  .then(function(response) {
    console.log("[autosuggest]", response);
  }
);
Code Example Autosuggest, clipping the results returned to France and Germany.
what3words.api.autosuggest("fun.with.code", { clipToCountry: ["FR", "DE"] })
  .then(function(response) {
    console.log("[autosuggest]", response);
  }
);
Code Example Autosuggest, clipping to a circle.
what3words.api.autosuggest("fun.with.code", { clipToCircle: {center: {lat:51.4243877, lng:-0.34745}, radius:50} })
  .then(function(response) {
    console.log("[autosuggest]", response);
  }
);
Code Example Autosuggest, clipping to a polygon.
what3words.api.autosuggest("fun.with.code", { clipToPolygon: [51.421,-0.343,52.6,2.3324,54.234,8.343,51.421,-0.343] })
  .then(function(response) {
    console.log("[autosuggest]", response);
  }
);
Code Example Autosuggest, clipping to a bounding box.
what3words.api.autosuggest("fun.with.code", { clipToBoundingBox:{ southwest: { lat: 51.521, lng: -0.343 },
    northeast: { lat: 52.6, lng: 2.3324 } }})
  .then(function(response) {
    console.log("[autosuggest]", response);
  }
);
Code Example Autosuggest, Focus on (51.4243877,-0.34745).
what3words.api.autosuggest("fun.with.code", { focus: {lat:51.4243877, lng:-0.34745} })
  .then(function(response) {
    console.log("[autosuggest]", response);
  }
);
Code Example Autosuggest, Focus on (51.4243877,-0.34745) and then determine how many results within the response it applies to.
what3words.api.autosuggest("fun.with.code", {focus: {lat:51.4243877, lng:-0.34745},nFocusResults: 2})
  .then(function(response) {
    console.log("[autosuggest]", response);
  }
);
Code Example Autosuggest, with Generic Voice input type.
what3words.api.autosuggest("fun with code", {inputType: "generic-voice", language: "en"})
  .then(function(response) {
    console.log("[autosuggest]", response);
  }
);

Grid Section

Grid Section returns a section of the what3words 3m x 3m grid as a set of horizontal and vertical lines covering the requested area, which can then be drawn onto a map.

The requested box must not exceed 4km from corner to corner, or a BadBoundingBoxTooBig error will be returned.

More info about gridSection, including returned results is available in the what3words REST API documentation.

Return standard response.

Code Example
what3words.api.gridSection({
    southwest: { lat: 51.508341, lng: -0.125499 },
    northeast: { lat: 51.507341, lng: -0.124499 }
  })
  .then(function(response) {
    console.log("[gridSection]", response);
  }
);

Return as GeoJSON.

Code Example
what3words.api.gridSectionGeoJson({
    southwest: { lat: 51.508341, lng: -0.125499 },
    northeast: { lat: 51.507341, lng: -0.124499 }
  })
  .then(function(response) {
    console.log("[gridSection]", response);
  }
);

Available Languages

This function returns the currently supported languages. It will return the two letter code, and the name of the language both in that language and in English.

More info about availableLanguages, including returned results is available in the what3words REST API documentation.

Code Example
what3words.api.availableLanguages().then(function(n) {
  console.log("[availableLanguages]",n)
});

Handling Errors

Errors returned from the API can be caught with the wrapper through the use of a catch function.

Within the catch function, code and message values which represent the error, are accessbable from the error object parameter

Code Example
what3words.api.convertToCoordinates("filled.count.soap")
  .then(function(response) {
    console.log("[convertToCoordinates]", response);
  })
  .catch(function(error) { // catch errors here
    console.log("[code]", error.code);
    console.log("[message]", error.message);
  });

Step 4: Putting It All Together

The example below takes the concepts described above, and turns some of them into a complete example. Here we take a partial 3 word address and pass it into Autosuggest - clipping the results to consider only addresses in France, setting a focus of Paris, and returning a single result

We then take the result and convert the 3 word address to coordinates, and find the nearest place.

<html>
  <head>
    <title>what3words JavaScript API Wrapper</title>
    <meta charset="utf-8" />
    <script 
        src="https://assets.what3words.com/sdk/v3/what3words.js?key=YOUR_API_KEY">
    </script>
  </head>
  <body>
    <p id="top3wa">Top 3 word address match: </p>
    <p id="coords">WGS84 Coordinates: </p>
    <p id="nearest_place">Nearest Place: </p>

    <script>
      what3words.api.autosuggest("freshen.overlook.clo", { 
          nFocusResults: 1,
          clipToCountry: ["FR"],
          focus: {lat:48.856618, lng:2.3522411},
          nResults: 1

        })
        .then(function(response) {
          var words = response.suggestions[0].words;

          top3wa = document.getElementById("top3wa");
          top3wa.innerHTML += words;

          what3words.api.convertToCoordinates(words).then(function(response) {
            coords = document.getElementById("coords");
            nearestPlace = document.getElementById("nearest_place");

            coords.innerHTML += response.coordinates.lat + ', ' + response.coordinates.lng;
            nearestPlace.innerHTML += response.nearestPlace;
          });
        })
        .catch(function(error) {
          console.log("[code]", error.code);
          console.log("[message]", error.message);
        });
    </script>
  </body>
</html>