So, one day, I stumbled across US State Boundary QA Checks, a web app utility for identifying issues with boundary relations in the US by utilizing both OSM and Wikidata. This app queries both Wikidata (via SPARQL Query Service) and OpenStreetMap data (via Overpass API) by using simple Javascript.

For a long time, I’ve been quite interested in the concept of “integrating both Wikidata and OpenStreetMap data, then using the coalesced data for domain-specific purposes,” but I have never done it before. Perhaps I can learn something from this source code on how to query both of them and merge the data (by using Javascript).

Here’s what I found.

Querying Overpass

function stringifyParams(params) {
    return Object.keys(params)
        .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
        .join('&');
}

var overpassUrl = 'http://overpass-api.de/api/interpreter'
var relationID = 2388361 + 3600000000;
var query2 = `[timeout:180][out:csv(::id,wikidata,wikipedia,admin_level,boundary,name,"name:en";true;',')];
        area(id:${relationID})->.a;
        (
          rel[boundary=administrative][admin_level~"^7|8|9$"](area.a);
        );
        out;`;
var xhr2 = new XMLHttpRequest();
xhr2.open('POST', overpassUrl, true);

xhr2.onreadystatechange = function () {
           if (xhr2.readyState === 4) { // Check if the request is complete
               if (xhr2.status === 200) { // Check if the request was successful
                   console.log('Response:', xhr2.responseText);
               } else {
                   console.error('Error:', xhr2.status, xhr2.statusText);
               }
           }
       };

xhr2.send(stringifyParams({data:query2}))

Note :

• Overpass Area ID is OpenStreetMap Relation Id + 3600000000

Querying Wikidata

var query = `SELECT ?item ?itemLabel WHERE 
{
  ?item wdt:P31 wd:Q146. 
  SERVICE wikibase:label { bd:serviceParam wikibase:language "en". } 
}`;
var abc = encodeURIComponent(query)
var uri = "https://query.wikidata.org/sparql?format=json&query=" + abc
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    }
    else{
        console.log("error")
    }
};
xhr.send();

---

Well, currently, I don’t have any project ideas regarding OSM + Wikidata integration. But I’ll definitely save these code blocks for future reference, just in case I need them someday.