Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get OSM data using Overpass API from jQuery?

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.

like image 969
Zelphir Kaltstahl Avatar asked Oct 19 '22 06:10

Zelphir Kaltstahl


2 Answers

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.

like image 185
mmd Avatar answered Oct 21 '22 22:10

mmd


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

like image 38
NVRM Avatar answered Oct 21 '22 22:10

NVRM