In my previous OpenStreetMap guide, I showed you how to add a map to your website by using OpenStreetMap and the Leaflet.js library, which prevented you from having to register for a Google Maps API key. In this guide, I am going to show you how to integrate the What3Words API into the markers of your map.
What3Words divided the world into 10-foot squares and gave each square a unique combination of three words, which makes it easy to find and share exact locations.
Before we can get started, you will need to create a free account on the What3Words website and create a new API key to use. Since we will only be converting coordinates to three words and not three words to coordinates, we will have unlimited free usage of the API.
Let's Get Started
Instead of reinventing the wheel, we are going to start off with the finished code from our OpenStreetMap guide and modify it for the new integration.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<style>
body {
margin: 0;
}
#map {
width: 640px;
height: 480px;
background-color: grey;
}
</style>
<title>My First OpenStreetMap</title>
</head>
<body onload="initMap()">
<div id="map"></div>
<script>
var map;
function create_markers() {
var markers = [
["Delaware State Monument", "39.8161", "-77.23247"],
["Indiana State Monument", "39.814138", "-77.216287"],
["New York State Monument", "39.8208", "-77.2306"],
["New York Auxiliary State Monument", "39.8043", "-77.23445"],
["Pennsylvania State Memorial", "39.807588", "-77.235153"],
["United States Regulars Monument", "39.811217", "-77.235683"],
["United States Signal Corps Marker", "39.79254", "-77.236503"],
["Vermont State Monument", "39.80945", "-77.23636"],
];
for ( var i = 0; i < markers.length; i++ ) {
marker = new L.marker( [ markers[i][1], markers[i][2] ] )
.bindPopup( markers[i][0] )
.addTo( map );
}
}
function initMap() {
map = L.map( 'map', {
center: [ 39.807305, -77.224207 ],
zoom: 13
});
L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo( map );
create_markers();
}
</script>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
</body>
</html>
Add a Link Style to CSS
This is optional but will help improve the look of the W3W link that appears in the marker.
body {
margin: 0;
}
#map {
width: 640px;
height: 480px;
background-color: grey;
}
a {
text-decoration: none;
}
Adding the What3Words (W3W) Function
We need to modify our script tag and add a new function that will be used to request a conversion of the latitude and longitude to three words. Replace the YOUR_API_KEY value with the API key that you generated earlier.
async function w3w( lat, lng ) {
return fetch( `https://api.what3words.com/v3/convert-to-3wa?coordinates=${lat},${lng}&language=en&key=YOUR_API_KEY` )
.then( async response => {
const json = await response.json();
return await `<span style="color: #e11f26;">///</span><a href="https://what3words.com/${json.words}" target="_blank">${json.words}</a>`;
});
}
Modify the create_markers Function
There is one last thing that we will need to do before we are finished, we will need to make the create_markers function asynchronous, add a call to the new w3w function to retrieve the data, and add that data to the marker popup text.
async function create_markers() {
var markers = [
["Delaware State Monument", "39.8161", "-77.23247"],
["Indiana State Monument", "39.814138", "-77.216287"],
["New York State Monument", "39.8208", "-77.2306"],
["New York Auxiliary State Monument", "39.8043", "-77.23445"],
["Pennsylvania State Memorial", "39.807588", "-77.235153"],
["United States Regulars Monument", "39.811217", "-77.235683"],
["United States Signal Corps Marker", "39.79254", "-77.236503"],
["Vermont State Monument", "39.80945", "-77.23636"],
];
for ( var i = 0; i < markers.length; i++ ) {
let data = await w3w( markers[i][1], markers[i][2] );
marker = new L.marker( [ markers[i][1], markers[i][2] ] )
.bindPopup( markers[i][0] + "<br /><br />" + data )
.addTo( map );
}
}
Our Final Project
Now that we have finished modifying our code to include the new integration, we can see what the finished application will look like.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<style>
body {
margin: 0;
}
#map {
width: 640px;
height: 480px;
background-color: grey;
}
a {
text-decoration: none;
}
</style>
<title>My First OpenStreetMap</title>
</head>
<body onload="initMap()">
<div id="map"></div>
<script>
var map;
async function w3w( lat, lng) {
return fetch( `https://api.what3words.com/v3/convert-to-3wa?coordinates=${lat},${lng}&language=en&key=YOUR_API_KEY` )
.then( async response => {
const json = await response.json();
return await `<span style="color: #e11f26;">///</span><a href="https://what3words.com/${json.words}" target="_blank">${json.words}</a>`;
});
}
async function create_markers() {
var markers = [
["Delaware State Monument", "39.8161", "-77.23247"],
["Indiana State Monument", "39.814138", "-77.216287"],
["New York State Monument", "39.8208", "-77.2306"],
["New York Auxiliary State Monument", "39.8043", "-77.23445"],
["Pennsylvania State Memorial", "39.807588", "-77.235153"],
["United States Regulars Monument", "39.811217", "-77.235683"],
["United States Signal Corps Marker", "39.79254", "-77.236503"],
["Vermont State Monument", "39.80945", "-77.23636"],
];
for ( var i = 0; i < markers.length; i++ ) {
let data = await w3w(markers[i][1], markers[i][2]);
marker = new L.marker( [ markers[i][1], markers[i][2] ] )
.bindPopup( markers[i][0] + "<br /><br />" + data )
.addTo( map );
}
}
function initMap() {
map = L.map( 'map', {
center: [ 39.807305, -77.224207 ],
zoom: 13
});
L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo( map );
create_markers();
}
</script>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
</body>
</html>
We have completed the guide for integrating What3Words into our OpenStreetMap. If you have done everything correctly, your page should display a map similar to the one below. Click on each marker to see the integration.
