How to get OSM data using Overpass API from jQuery?

Asked 18/7, 2015 at 14:27 Answered 29/8, 2022 at 12:26

Solved javascript jquery ajax openstreetmap overpass-api

I have the following code for requesting map data from OSM:

$.ajax({
    url:
        'https://www.overpass-api.de/api/interpreter?' + 
        '[out:json][timeout:60];' + 
        'area["boundary"~"administrative"]["name"~"Berlin"];' + 
        'node(area)["amenity"~"school"];' + 
        'out;',
    dataType: 'json',
    type: 'GET',
    async: true,
    crossDomain: true
}).done(function() {
    console.log( "second success" );
}).fail(function(error) {
    console.log(error);
    console.log( "error" );
}).always(function() {
    console.log( "complete" );
});

When I test the request on Overpass Turbo, it runs without any issues, but when preforming this request in a JavaScript, I always get the error:

"<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>  <meta http-equiv="content-type" content="text/html; charset=utf-8" lang="en"/>  <title>OSM3S Response</title></head><body><p>The data included in this document is from www.openstreetmap.org. The data is made available under ODbL.</p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: Key expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: '!', '~', '=', '!=', or ']'  expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: Value expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: ',' or ']' expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: Key expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: '!', '~', '=', '!=', or ']'  expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: Value expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: ',' or ']' expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: static error: For the attribute "k" of the element "has-kv" the only allowed values are non-empty strings. </p><p><strong style="color:#FF0000">Error</strong>: line 1: static error: For the attribute "k" of the element "has-kv" the only allowed values are non-empty strings. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: Key expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: '!', '~', '=', '!=', or ']'  expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: Value expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: ',' or ']' expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: static error: For the attribute "k" of the element "has-kv" the only allowed values are non-empty strings. </p></body></html>"

There must be something wrong with the way I do the request, but I cannot figure out what could be wrong with it.

How do I get the positions of all schools in Berlin from a JavaScript?

I also tried using $.getJSON() but that didn't work for me either.

Riesling answered 18/7, 2015 at 14:27 Comment(0)

The URL you use in your example seems to be incomplete: it should read ...interpreter?data=[out:json].... i.e. the data= part was missing.

As a reference you can also put your query in overpass turbo and simply click on Export -> raw data directly from Overpass API to get to a working URL. Maybe try this first with wget and if it works out ok, put the URL in your Javascript code.

Maybe you also want to study a bit, how overpass turbo does the (POST-based) calls to Overpass API: please see https://github.com/tyrasd/overpass-turbo/blob/master/js/overpass.js#L581 for details.

Sweetsop answered 18/7, 2015 at 20:57 Comment(1)

Ah sorry, didn't refresh the page before posting my own answer. Wow that link is a lot of unreadable code :D but thanks anyway! – Riesling 18/7, 2015 at 21:32

Without a library, we have to POST a query formatted in OverpassQL.

This example will retrieve restaurants into a rather small bounding box bottom_left/top_right 48.865,2.25,48.9,2.27 somewhere in Paris.

(async () => {
  const api = await fetch('https://www.overpass-api.de/api/interpreter?', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body:"[out:json];node(48.865,2.25,48.9,2.27)[amenity=restaurant];out;"
  });
  const answer = await api.json();
  console.log(answer);
})()

List of amenity keys matching most common POI like pharmacy, parking, veterinary ...

This API is easily overloaded, we have to pass in smalls areas, and we better have to use a timeout. Unexpected errors are common, we have to handle them in our apps.

But warning the error response is not in JSON, but in XML, could require some try/catch over a XMLparser.

EQ:

Error: runtime error: open64: 0 Success /osm3s_v0.7.58_osm_base Dispatcher_Client::request_read_and_idx::timeout. The server is probably too busy to handle your request.

Examples complex queries in the overpassQL language https://wiki.openstreetmap.org/wiki/Overpass_API/Overpass_API_by_Example

Trioxide answered 29/8, 2022 at 12:26 Comment(0)

Recommended topics

Hot tags