Introduction to OpenStreetMap API

OpenStreetMap (OSM) provides a public API that allows developers to access various features of the OSM map data. The API provides a range of functionality that includes reading map data, making edits to the map, and creating custom applications with OSM data.

This blog post provides a brief introduction to the OSM API and includes examples of how to use the API in JavaScript.

Getting Started — Reading Needs No API Key

Reading OpenStreetMap data through the API v0.6 requires no API key and no authentication — anonymous GET requests work. OSM does not use API keys at all; authentication (OAuth 2.0) is only needed to edit the map (creating changesets, adding or modifying nodes and ways).

Download map data for a bounding box (anonymous):

const url = 'https://api.openstreetmap.org/api/0.6/map?bbox=-0.489,51.28,0.236,51.686';

fetch(url)
  .then(res => res.text())
  .then(xml => {
    const doc = new DOMParser().parseFromString(xml, 'text/xml');
    console.log(doc.getElementsByTagName('node').length, 'nodes');
  });

Add .json to element endpoints (e.g. /api/0.6/node/{id}.json) for JSON instead of XML. The read API caps the bounding-box area, so keep bbox small.

For editing: register an OAuth 2.0 application at https://www.openstreetmap.org/oauth2/applications, request scopes like write_api, and send the resulting token as Authorization: Bearer <token>. For geocoding or bulk data extraction, use Nominatim or the Overpass API instead of the editing API.

Example Code in JavaScript

Here are some examples of how to use the OSM API in JavaScript. These examples use the Fetch API to make requests to the OSM API.

Example 1: Reading Map Data

This example demonstrates how to retrieve map data from the OSM API.

const url = 'https://api.openstreetmap.org/api/0.6/map?bbox=-0.489,-0.123,0.236,51.569';
fetch(url)
  .then(response => response.text())
  .then(xml => {
    // Parse the XML response and extract the map data
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xml, "text/xml");
    const nodes = xmlDoc.getElementsByTagName("node");
    // Do something with the map data
  })
  .catch(error => console.error(error));

In this example, we are requesting map data for a bounding box defined by the bbox parameter. The response is an XML document that contains the map data.

Example 2: Making Edits to the Map

This example demonstrates how to make edits to the OSM map data.

const url = 'https://api.openstreetmap.org/api/0.6/changeset/create';
const requestBody = '<?xml version="1.0" encoding="UTF-8"?><osm><changeset><tag k="created_by" v="My Application"/><tag k="comment" v="Adding a new feature"/><tag k="source" v="My Custom Source"/></changeset></osm>';
fetch(url, {
  method: 'PUT',
  headers: {
    'Content-Type': 'text/xml'
  },
  body: requestBody
})
  .then(response => response.text())
  .then(changesetId => {
    // Use the changeset ID to make edits to the map
  })
  .catch(error => console.error(error));

In this example, we are creating a new changeset and adding some tags to it. Once the changeset is created, we can use the changeset ID to make edits to the map data.

Example 3: Creating Custom Applications with OSM Data

This example demonstrates how to use the OSM API to create custom applications that display OSM data.

const url = 'https://api.openstreetmap.org/api/0.6/node/1234567';
fetch(url)
  .then(response => response.text())
  .then(xml => {
    // Parse the XML response and extract the node data
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xml, "text/xml");
    const node = xmlDoc.getElementsByTagName("node")[0];
    const lat = node.getAttribute("lat");
    const lon = node.getAttribute("lon");
    // Use the node data to display a marker on a map
  })
  .catch(error => console.error(error));

In this example, we are retrieving data for a single node and using that data to display a marker on a map. This demonstrates how the OSM API can be used to create custom applications that use OSM data.

Conclusion

The OSM API provides a powerful set of tools for accessing and manipulating OSM map data. By using the examples provided in this blog post, you can get started with the OSM API in JavaScript and begin creating your own custom applications.