Today I took on the challenge of adding pages that display all the details stored about an object in the Open Street Map system. These come as Nodes, Ways and Relations which has data associated with it available via the Overpass API.

Using the https://github.com/plepe/overpass-frontend I used the by ID function to display the a single Node, Way or Relation using the format n123, w123 and r123 respectively to make the overpass api query.

This is the code in the github readme:

const OverpassFrontend = require('overpass-frontend')

// you may specify an OSM file as url, e.g. 'test/data.osm.bz2'
const overpassFrontend = new OverpassFrontend('//overpass-api.de/api/interpreter')

// request restaurants in the specified bounding box
overpassFrontend.get(
  ['n27365030', 'w5013364'],
  {
    properties: OverpassFrontend.TAGS
  },
  function (err, result) {
    if (result) {
      console.log('* ' + result.tags.name + ' (' + result.id + ')')
    } else {
      console.log('* empty result')
    }
  },
  function (err) {
    if (err) { console.log(err) }
  }
)

Here is an example of one of each of the 3 types:

• /node/6371429623
• /way/175968074
• /relation/9653407

Each page displays a smaller map with a list of the data stored, which is returned from the overpass API call.

It took me a bit of fiddling to get the data to display but it works!

One thing I also managed to solve was the ability to add a loading data... block to the header which i have implemented on every map page to show the user that the data is loading. It isnt as quick I would like, but at least it provides the user with feedback.

If you would like to contact me with this form on londinium.com, ilminster.net or via Twitter @andylondon