Andreas Bruns

Softwareentwicklung für Oldenburg und Bremen

OpenStreetMap-Daten abfragen mit der Overpass-API

Wenn man OpenStreetMap (OSM) erwähnt, dann denkt man sicherlich zunächst an die Einbindung von freiem Kartenmaterial in die eigene Webseite, was eine sehr gute Alternative zu Google Maps ist. OpenStreetMap bietet allerdings nicht nur die Karten sondern auch die freien Rohdaten an, sodass man sich aus einem riesigen Datenschatz die interessanten Daten heraussuchen kann. Wie das unter Einsatz einer eigenen Datenbank funktioniert, habe ich in folgendem Artikel vorgestellt: Osmosis, Osm2postgresql & Osm2pgsql – OpenStreetMap-Daten, Datenbanken und Spielplätze. Eine schlankere Lösung bietet seit einiger Zeit die Overpass API, mit der Entwickler anhand einer Abfragesprache OpenStreetMap-Daten abrufen können.

Am einfachsten nähert man sich der Overpass API, indem man interaktiv auf der Webseite http://overpass-turbo.eu/ eigene Abfragen ausprobiert. Die Ergebnisse werden übersichtlich auf einer Karte dargestellt. Die Spielplätze von Bremen erhält man, indem man auf der Karte nach Bremen navigiert und die Daten 'leisure=playground' unter Wizard eingibt.

Overpass Turbo - Spielplätze in Bremen

Overpass Turbo – Spielplätze in Bremen


Eine Übersicht über die OSM-Tags gibt es im OSM-Wiki und unter OSM-Taginfo. Jetzt wollen wir natürlich selber solch eine Karte mit OpenStreetMap-Daten erstellen!

Zunächst einmal benötigen wir eine JavaScript-Library, mit der wir Karten auf einer Webseite anzeigen können. Dafür habe ich in anderen Artikeln OpenLayers verwendet und dieses Mal setze ich zur Abwechslung die schlankere Library Leaflet ein. Die Leaflet Beispiele bieten einen schnellen Einstieg in Leaflet, sodass wir den folgenden Code als Basis für die Anbindung der Overpass API verwenden:

<!DOCTYPE html>
<html>
  <head>
    <title>Example: Overpass API mit Leaflet.js</title>
  	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="libs/leaflet/leaflet.css"/> 
    <style>
      body {
        padding: 0;
        margin: 0;
      }
      html, body, #map {
        height: 100%;
        width: 100%;
      }
      #overpass-api-controls {
        padding: 10px;
        background-color: rgb(255, 255, 255);
      }
      #overpass-api-controls a {
        display: inline;
      }
    </style>
  </head>
  <body>
    <div id="map">

      <div class="leaflet-control-container">
        <div class="leaflet-top leaflet-right">
          <div id="overpass-api-controls" class="leaflet-bar leaflet-control">
            <input id="query-textfield" value="leisure=playground" size="50">
            <input id="query-button" type="button" value="Laden">
          </div>
        </div>
      </div>
    
    </div>
 
    <script src="libs/leaflet/leaflet.js"></script>
    <script src="libs/jquery/jquery-1.11.0.min.js"></script>
    <script src="libs/osmtogeojson/osmtogeojson.js"></script>

    <script>
      var map = L.map('map').setView([53.079, 8.81308], 14);
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
          '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
      }).addTo(map);

    </script>
  </body>
</html>

Das Navigieren funktioniert bereits, allerdings fehlt noch der Programmcode für das Auswerten des Overpass API-Formulars und das Anzeigen der gefundenen Daten. Das wird in diesem Beispiel in den folgenden Schritten erledigt.

1. Abfrage-Textfeld und Abschicken-Button auswerten mit JQuery

2. URL für die Overpass API erstellen mit der Funktion buildOverpassApiUrl()

3. AJAX-Aufruf der erstellten URL mit JQuery durchführen

4. die gelieferten XML-Daten der Overpass API entgegennehmen, die im OpenStreetMap-Format (Nodes, Ways und Relations) vorliegen

5. die XML-Daten mit der Library osmtogeojson.js in GeoJson umwandeln, sodass wir FeatureCollection, Features, LineStrings, Points und MultiPolygon erhalten

6. die GeoJson-Daten mit einem GeoJson-Layer von Leaflet anzeigen, wobei Punkte als Marker und Polygone als Linien angezeigt werden

      function buildOverpassApiUrl(map, overpassQuery) {
        var bounds = map.getBounds().getSouth() + ',' + map.getBounds().getWest() + ',' + map.getBounds().getNorth() + ',' + map.getBounds().getEast();
        var nodeQuery = 'node[' + overpassQuery + '](' + bounds + ');';
        var wayQuery = 'way[' + overpassQuery + '](' + bounds + ');';
        var relationQuery = 'relation[' + overpassQuery + '](' + bounds + ');';
        var query = '?data=[out:xml][timeout:25];(' + nodeQuery + wayQuery + relationQuery + ');out body;>;out skel qt;';
        var baseUrl = 'http://overpass-api.de/api/interpreter';
        var resultUrl = baseUrl + query;
        return resultUrl;
      }

      $("#query-button").click(function () {
        var queryTextfieldValue = $("#query-textfield").val();
        var overpassApiUrl = buildOverpassApiUrl(map, queryTextfieldValue);
        
        $.get(overpassApiUrl, function (osmDataAsXml) {
          var resultAsGeojson = osmtogeojson(osmDataAsXml);
          var resultLayer = L.geoJson(resultAsGeojson, {
            style: function (feature) {
              return {color: "#ff0000"};
            }
          }).addTo(map);
        });
      });

7. die Polygone möchten wir auch lieber als Marker darstellen, sodass wir einen Filter einbinden, der Polygon-Objekte in Point-Objekte umwandelt

            filter: function (feature, layer) {
              var isPolygon = (feature.geometry) && (feature.geometry.type !== undefined) && (feature.geometry.type === "Polygon");
              if (isPolygon) {
                feature.geometry.type = "Point";
                var polygonCenter = L.latLngBounds(feature.geometry.coordinates[0]).getCenter();
                feature.geometry.coordinates = [ polygonCenter.lat, polygonCenter.lng ];
              }
              return true;
            }

8. wir implementieren die Funktion onEachFeature(), die ein Popup mit weiteren OSM-Daten anzeigt

            onEachFeature: function (feature, layer) {
              var popupContent = "";
              var objectUrl = "http://overpass-api.de/api/interpreter?data=[out:json];" + feature.properties.type + "%28" + feature.properties.id + "%29;out;";
              $.get(objectUrl, function (objectDataAsJson) {
                popupContent = popupContent + "<dt>@id</dt><dd>" + feature.properties.type + "/" + feature.properties.id + "</dd>";
                var keys = Object.keys(objectDataAsJson.elements[0].tags);
                keys.forEach(function (key) {
                  popupContent = popupContent + "<dt>" + key + "</dt><dd>" + objectDataAsJson.elements[0].tags[key] + "</dd>";
                });
                popupContent = popupContent + "</dl>"
                layer.bindPopup(popupContent);
              });

9. wir staunen, wie einfach das alles geht und schauen uns die verarbeiteten Daten an

a) die Abfrage für die Overpass API:

http://overpass-api.de/api/interpreter?data=[out:xml][timeout:25];(node[leisure=playground](53.07298992691154,8.786659240722656,53.08502909887766,8.83948802947998);way[leisure=playground](53.07298992691154,8.786659240722656,53.08502909887766,8.83948802947998);relation[leisure=playground](53.07298992691154,8.786659240722656,53.08502909887766,8.83948802947998););out%20body;%3E;out%20skel%20qt;

b) die Antwort der Overpass API als XML-Daten im OpenStreetMAp-Format (Nodes, Ways, Relations)

<?xml version="1.0" encoding="UTF-8"?>
<osm version="0.6" generator="Overpass API">
<note>The data included in this document is from www.openstreetmap.org. The data is made available under ODbL.</note>
<meta osm_base="2014-11-30T11:26:02Z"/>

  <node id="250749323" lat="53.0805128" lon="8.7942112">
    <tag k="leisure" v="playground"/>
    <tag k="wheelchair" v="yes"/>
  </node>
  <node id="582552975" lat="53.0786764" lon="8.8049520">
    <tag k="leisure" v="playground"/>
    <tag k="wheelchair" v="limited"/>
  </node>
  <node id="858277589" lat="53.0734249" lon="8.7906736">
    <tag k="leisure" v="playground"/>
  </node>
  <node id="1756523576" lat="53.0764605" lon="8.8178964">
    <tag k="leisure" v="playground"/>
  </node>
  <node id="2285687173" lat="53.0734841" lon="8.8335228">
    <tag k="leisure" v="playground"/>
  </node>
  <node id="2290588213" lat="53.0733810" lon="8.8338210">
    <tag k="leisure" v="playground"/>
  </node>
  <way id="102575338">
    <nd ref="1184557972"/>
    <nd ref="1601738417"/>
    <nd ref="1184557967"/>
    <nd ref="1601738414"/>
    <nd ref="1601738402"/>
    <nd ref="1601738383"/>
    <nd ref="1184557970"/>
    <nd ref="1184557964"/>
    <nd ref="1184557961"/>
    <nd ref="1184557966"/>
    <nd ref="1601738416"/>
    <nd ref="1184557968"/>
    <nd ref="1184557972"/>
    <tag k="leisure" v="playground"/>
    <tag k="name" v="Gleimstraße"/>
  </way>
  <way id="146980590">
    <nd ref="250799802"/>
    <nd ref="1601738638"/>
    <nd ref="1601738634"/>
    <nd ref="1829221904"/>
    <nd ref="1829221905"/>
    <nd ref="1923100484"/>
    <nd ref="1601738657"/>
    <nd ref="1601738663"/>
    <nd ref="1601738666"/>
    <nd ref="1601738661"/>
    <nd ref="1601738655"/>
    <nd ref="250799802"/>
    <tag k="leisure" v="playground"/>
    <tag k="name" v="Gustav-Deetjen-Allee"/>
    <tag k="wheelchair" v="yes"/>
  </way>
  <way id="146980610">
    <nd ref="2305021807"/>
    <nd ref="2305021809"/>
    <nd ref="2305021812"/>
    <nd ref="2305021808"/>
    <nd ref="2305021805"/>
    <nd ref="2258160237"/>
    <nd ref="2258160210"/>
    <nd ref="1601738449"/>
    <nd ref="1601738443"/>
    <nd ref="1601738441"/>
    <nd ref="1601738439"/>
    <nd ref="250802457"/>
    <nd ref="1601738445"/>
    <nd ref="1601738447"/>
    <nd ref="1601738457"/>
    <nd ref="2305021806"/>
    <nd ref="2305021807"/>
    <tag k="leisure" v="playground"/>
    <tag k="name" v="Vasmerstraße"/>
    <tag k="wheelchair" v="limited"/>
  </way>
  <way id="187948398">
    <nd ref="1985818008"/>
    <nd ref="2177273139"/>
    <nd ref="1985818011"/>
    <nd ref="2177273142"/>
    <nd ref="1985818010"/>
    <nd ref="2177273146"/>
    <nd ref="2177273137"/>
    <nd ref="2177273132"/>
    <nd ref="2177273119"/>
    <nd ref="1985818006"/>
    <nd ref="1985818005"/>
    <nd ref="1985818003"/>
    <nd ref="2177273120"/>
    <nd ref="2177273108"/>
    <nd ref="2177273111"/>
    <nd ref="2177273117"/>
    <nd ref="1985818004"/>
    <nd ref="1985818007"/>
    <nd ref="2177273121"/>
    <nd ref="2177273125"/>
    <nd ref="1985818008"/>
    <tag k="leisure" v="playground"/>
    <tag k="name" v="Schulhof"/>
  </way>
  <way id="188741852">
    <nd ref="1993615717"/>
    <nd ref="1993615711"/>
    <nd ref="1993615706"/>
    <nd ref="1993615700"/>
    <nd ref="1993615697"/>
    <nd ref="1993615692"/>
    <nd ref="1993615688"/>
    <nd ref="1993615686"/>
    <nd ref="1993615687"/>
    <nd ref="1993615689"/>
    <nd ref="1993615698"/>
    <nd ref="1993615713"/>
    <nd ref="1993615718"/>
    <nd ref="1993615725"/>
    <nd ref="1993615724"/>
    <nd ref="1993615721"/>
    <nd ref="1993615719"/>
    <nd ref="1993615717"/>
    <tag k="leisure" v="playground"/>
    <tag k="name" v="Robinsönchen"/>
  </way>
  <way id="201280249">
    <nd ref="2112372351"/>
    <nd ref="2112372348"/>
    <nd ref="2112372347"/>
    <nd ref="2112372350"/>
    <nd ref="2112372351"/>
    <tag k="leisure" v="playground"/>
    <tag k="wheelchair" v="yes"/>
  </way>
  <way id="207473296">
    <nd ref="2177273160"/>
    <nd ref="2177273162"/>
    <nd ref="2177273172"/>
    <nd ref="2177273165"/>
    <nd ref="2177273159"/>
    <nd ref="2177397720"/>
    <nd ref="2177273157"/>
    <nd ref="2177397718"/>
    <nd ref="2177397714"/>
    <nd ref="2177397716"/>
    <nd ref="2177273156"/>
    <nd ref="2177273153"/>
    <nd ref="2177273151"/>
    <nd ref="2177273155"/>
    <nd ref="2177273160"/>
    <tag k="area" v="yes"/>
    <tag k="leisure" v="playground"/>
    <tag k="name" v="Schulhof"/>
  </way>
  <way id="238382377">
    <nd ref="2462233883"/>
    <nd ref="2462233879"/>
    <nd ref="2462233866"/>
    <nd ref="2462233864"/>
    <nd ref="2462233855"/>
    <nd ref="2462233834"/>
    <nd ref="2462233842"/>
    <nd ref="2462233859"/>
    <nd ref="2462233865"/>
    <nd ref="2462233873"/>
    <nd ref="2462233884"/>
    <nd ref="2462233883"/>
    <tag k="access" v="permissive"/>
    <tag k="leisure" v="playground"/>
    <tag k="operator" v="Altes Gymnasium"/>
    <tag k="wheelchair" v="yes"/>
  </way>
  <way id="238382384">
    <nd ref="2462233857"/>
    <nd ref="2462233849"/>
    <nd ref="2462233856"/>
    <nd ref="2462233837"/>
    <nd ref="2462233831"/>
    <nd ref="2462233844"/>
    <nd ref="2462233857"/>
    <tag k="access" v="permissive"/>
    <tag k="leisure" v="playground"/>
    <tag k="operator" v="Altes Gymnasium"/>
    <tag k="wheelchair" v="no"/>
  </way>
  <way id="269716397">
    <nd ref="2748599670"/>
    <nd ref="1884390597"/>
    <nd ref="1884390595"/>
    <nd ref="1884390593"/>
    <nd ref="1884390594"/>
    <nd ref="2748599662"/>
    <nd ref="2748599663"/>
    <nd ref="2748599670"/>
    <tag k="leisure" v="playground"/>
  </way>
  <node id="2462233831" lat="53.0829185" lon="8.8024891"/>
  <node id="2462233834" lat="53.0829745" lon="8.8041421"/>
  <node id="2462233837" lat="53.0830176" lon="8.8023202"/>
  <node id="2462233842" lat="53.0830561" lon="8.8038675"/>
  <node id="2462233844" lat="53.0830610" lon="8.8027680"/>
  <node id="2462233849" lat="53.0830967" lon="8.8025438"/>
  <node id="2462233855" lat="53.0831276" lon="8.8042374"/>
  <node id="2462233856" lat="53.0831330" lon="8.8024610"/>
  <node id="2462233857" lat="53.0831372" lon="8.8025963"/>
  <node id="2462233859" lat="53.0831549" lon="8.8034804"/>
  <node id="2462233864" lat="53.0831924" lon="8.8039334"/>
  <node id="2462233865" lat="53.0832382" lon="8.8032903"/>
  <node id="2462233866" lat="53.0832413" lon="8.8037680"/>
  <node id="2462233873" lat="53.0832867" lon="8.8031133"/>
  <node id="2462233879" lat="53.0833532" lon="8.8035564"/>
  <node id="2462233883" lat="53.0833801" lon="8.8034668"/>
  <node id="2462233884" lat="53.0834289" lon="8.8032062"/>
  <node id="1993615686" lat="53.0727994" lon="8.8156771"/>
  <node id="1993615687" lat="53.0728005" lon="8.8155729"/>
  <node id="1993615688" lat="53.0728083" lon="8.8157554"/>
  <node id="1993615692" lat="53.0728345" lon="8.8158914"/>
  <node id="1993615697" lat="53.0728661" lon="8.8159479"/>
  <node id="1993615700" lat="53.0729055" lon="8.8159677"/>
  <node id="1993615706" lat="53.0729412" lon="8.8159668"/>
  <node id="1993615711" lat="53.0729971" lon="8.8159140"/>
  <node id="1993615717" lat="53.0730662" lon="8.8157965"/>
  <node id="1993615719" lat="53.0730944" lon="8.8157197"/>
  <node id="1993615721" lat="53.0731248" lon="8.8156443"/>
  <node id="1993615724" lat="53.0731486" lon="8.8155739"/>
  <node id="1993615725" lat="53.0731659" lon="8.8155034"/>
  <node id="1993615689" lat="53.0727658" lon="8.8154640"/>
  <node id="1993615698" lat="53.0728652" lon="8.8151140"/>
  <node id="1993615713" lat="53.0730653" lon="8.8152532"/>
  <node id="1993615718" lat="53.0731254" lon="8.8153532"/>
  <node id="1601738417" lat="53.0734870" lon="8.8276971"/>
  <node id="1184557961" lat="53.0729914" lon="8.8286490"/>
  <node id="1184557966" lat="53.0734358" lon="8.8287764"/>
  <node id="1184557967" lat="53.0734329" lon="8.8278683"/>
  <node id="1184557968" lat="53.0735363" lon="8.8286028"/>
  <node id="1184557972" lat="53.0736586" lon="8.8277396"/>
  <node id="1601738383" lat="53.0730884" lon="8.8278617"/>
  <node id="1601738402" lat="53.0732192" lon="8.8280928"/>
  <node id="1601738414" lat="53.0733192" lon="8.8279398"/>
  <node id="1601738416" lat="53.0734630" lon="8.8285749"/>
  <node id="1184557964" lat="53.0730152" lon="8.8280935"/>
  <node id="1184557970" lat="53.0730796" lon="8.8280906"/>
  <node id="250802457" lat="53.0747454" lon="8.8203152"/>
  <node id="1601738439" lat="53.0746937" lon="8.8205879"/>
  <node id="1601738441" lat="53.0747760" lon="8.8205913"/>
  <node id="1601738443" lat="53.0747776" lon="8.8206215"/>
  <node id="1601738445" lat="53.0748036" lon="8.8201909"/>
  <node id="1601738447" lat="53.0749190" lon="8.8199226"/>
  <node id="1601738457" lat="53.0751499" lon="8.8194788"/>
  <node id="1601738449" lat="53.0749929" lon="8.8207804"/>
  <node id="2258160210" lat="53.0750321" lon="8.8205877"/>
  <node id="2258160237" lat="53.0751380" lon="8.8203811"/>
  <node id="2305021805" lat="53.0752943" lon="8.8201347"/>
  <node id="2305021806" lat="53.0753082" lon="8.8197224"/>
  <node id="2305021807" lat="53.0754169" lon="8.8198896"/>
  <node id="2305021808" lat="53.0754741" lon="8.8199557"/>
  <node id="2305021809" lat="53.0754928" lon="8.8198091"/>
  <node id="2305021812" lat="53.0755346" lon="8.8198901"/>
  <node id="1829221904" lat="53.0827046" lon="8.8172424"/>
  <node id="1829221905" lat="53.0828047" lon="8.8174206"/>
  <node id="250799802" lat="53.0828300" lon="8.8166522"/>
  <node id="1601738634" lat="53.0825375" lon="8.8169629"/>
  <node id="1601738638" lat="53.0827805" lon="8.8166558"/>
  <node id="1601738661" lat="53.0829290" lon="8.8169422"/>
  <node id="1601738663" lat="53.0829342" lon="8.8174583"/>
  <node id="1601738666" lat="53.0829489" lon="8.8171152"/>
  <node id="1601738655" lat="53.0828733" lon="8.8167207"/>
  <node id="1601738657" lat="53.0829047" lon="8.8175296"/>
  <node id="1923100484" lat="53.0828703" lon="8.8175334"/>
  <node id="1884390594" lat="53.0750725" lon="8.8306771"/>
  <node id="1884390597" lat="53.0751668" lon="8.8305855"/>
  <node id="1884390593" lat="53.0750571" lon="8.8307824"/>
  <node id="1884390595" lat="53.0751358" lon="8.8308113"/>
  <node id="2748599662" lat="53.0750075" lon="8.8306482"/>
  <node id="2748599663" lat="53.0750572" lon="8.8302871"/>
  <node id="2748599670" lat="53.0752005" lon="8.8303491"/>
  <node id="2112372347" lat="53.0789320" lon="8.8388893"/>
  <node id="2112372348" lat="53.0789946" lon="8.8384316"/>
  <node id="2112372350" lat="53.0791127" lon="8.8389577"/>
  <node id="2112372351" lat="53.0791752" lon="8.8385000"/>
  <node id="1985818003" lat="53.0837752" lon="8.8386621"/>
  <node id="1985818004" lat="53.0836765" lon="8.8390167"/>
  <node id="1985818005" lat="53.0836764" lon="8.8386136"/>
  <node id="1985818006" lat="53.0836819" lon="8.8384580"/>
  <node id="1985818007" lat="53.0838189" lon="8.8390753"/>
  <node id="1985818010" lat="53.0843668" lon="8.8388801"/>
  <node id="2177273108" lat="53.0835018" lon="8.8389511"/>
  <node id="2177273111" lat="53.0835585" lon="8.8392921"/>
  <node id="2177273117" lat="53.0836530" lon="8.8392396"/>
  <node id="2177273119" lat="53.0837432" lon="8.8384318"/>
  <node id="2177273120" lat="53.0837665" lon="8.8388199"/>
  <node id="2177273132" lat="53.0840690" lon="8.8383280"/>
  <node id="2177273137" lat="53.0841588" lon="8.8386769"/>
  <node id="2177273146" lat="53.0842999" lon="8.8385864"/>
  <node id="2177273151" lat="53.0844252" lon="8.8400398"/>
  <node id="2177273153" lat="53.0843120" lon="8.8398037"/>
  <node id="2177273155" lat="53.0844392" lon="8.8401265"/>
  <node id="2177273156" lat="53.0843212" lon="8.8394967"/>
  <node id="2177273157" lat="53.0846350" lon="8.8392607"/>
  <node id="2177273159" lat="53.0845841" lon="8.8396394"/>
  <node id="2177273160" lat="53.0845890" lon="8.8400568"/>
  <node id="2177273162" lat="53.0846048" lon="8.8401343"/>
  <node id="2177273165" lat="53.0846584" lon="8.8395991"/>
  <node id="2177273172" lat="53.0847624" lon="8.8400503"/>
  <node id="2177397714" lat="53.0844422" lon="8.8391643"/>
  <node id="2177397716" lat="53.0844611" lon="8.8393270"/>
  <node id="2177397718" lat="53.0845194" lon="8.8391014"/>
  <node id="2177397720" lat="53.0845289" lon="8.8393532"/>
  <node id="1985818008" lat="53.0839211" lon="8.8394600"/>
  <node id="1985818011" lat="53.0842332" lon="8.8394245"/>
  <node id="2177273121" lat="53.0837911" lon="8.8392445"/>
  <node id="2177273125" lat="53.0839168" lon="8.8392599"/>
  <node id="2177273139" lat="53.0841134" lon="8.8394282"/>
  <node id="2177273142" lat="53.0842277" lon="8.8389441"/>
</osm>

c) die Antwort umgewandelt in GeoJson (Feature, Point, Polygon)

{
   "type": "FeatureCollection",
   "features": [
      {
         "type": "Feature",
         "id": "way/102575338",
         "properties": {
            "type": "way",
            "id": "102575338",
            "tags": {
               "leisure": "playground",
               "name": "Gleimstraße"
            },
            "relations": [],
            "meta": {}
         },
         "geometry": {
            "type": "Polygon",
            "coordinates": [
               [
                  [
                     8.82774,
                     53.073658
                  ],
                  [
                     8.827697,
                     53.073486
                  ],
                  [
                     8.827868,
                     53.073433
                  ],
                  [
                     8.82794,
                     53.07332
                  ],
                  [
                     8.828093,
                     53.07322
                  ],
                  [
                     8.827862,
                     53.07309
                  ],
                  [
                     8.828091,
                     53.07308
                  ],
                  [
                     8.828094,
                     53.073013
                  ],
                  [
                     8.828649,
                     53.07299
                  ],
                  [
                     8.828776,
                     53.073437
                  ],
                  [
                     8.828575,
                     53.073463
                  ],
                  [
                     8.828603,
                     53.073536
                  ],
                  [
                     8.82774,
                     53.073658
                  ]
               ]
            ]
         }
      },
      {
         "type": "Feature",
         "id": "way/146980590",
         "properties": {
            "type": "way",
            "id": "146980590",
            "tags": {
               "leisure": "playground",
               "name": "Gustav-Deetjen-Allee",
               "wheelchair": "yes"
            },
            "relations": [],
            "meta": {}
         },
         "geometry": {
            "type": "Polygon",
            "coordinates": [
               [
                  [
                     8.816652,
                     53.08283
                  ],
                  [
                     8.816656,
                     53.08278
                  ],
                  [
                     8.816963,
                     53.08254
                  ],
                  [
                     8.817243,
                     53.082706
                  ],
                  [
                     8.817421,
                     53.082806
                  ],
                  [
                     8.8175335,
                     53.08287
                  ],
                  [
                     8.81753,
                     53.082905
                  ],
                  [
                     8.817458,
                     53.082935
                  ],
                  [
                     8.817115,
                     53.08295
                  ],
                  [
                     8.816942,
                     53.082928
                  ],
                  [
                     8.816721,
                     53.082874
                  ],
                  [
                     8.816652,
                     53.08283
                  ]
               ]
            ]
         }
      },
      {
         "type": "Feature",
         "id": "way/146980610",
         "properties": {
            "type": "way",
            "id": "146980610",
            "tags": {
               "leisure": "playground",
               "name": "Vasmerstraße",
               "wheelchair": "limited"
            },
            "relations": [],
            "meta": {}
         },
         "geometry": {
            "type": "Polygon",
            "coordinates": [
               [
                  [
                     8.81989,
                     53.075417
                  ],
                  [
                     8.819722,
                     53.07531
                  ],
                  [
                     8.819479,
                     53.07515
                  ],
                  [
                     8.819922,
                     53.07492
                  ],
                  [
                     8.82019,
                     53.074802
                  ],
                  [
                     8.820315,
                     53.074745
                  ],
                  [
                     8.820588,
                     53.074696
                  ],
                  [
                     8.820591,
                     53.074776
                  ],
                  [
                     8.8206215,
                     53.074776
                  ],
                  [
                     8.820781,
                     53.074993
                  ],
                  [
                     8.820588,
                     53.07503
                  ],
                  [
                     8.820381,
                     53.075138
                  ],
                  [
                     8.820135,
                     53.075294
                  ],
                  [
                     8.819956,
                     53.075474
                  ],
                  [
                     8.81989,
                     53.075535
                  ],
                  [
                     8.819809,
                     53.075493
                  ],
                  [
                     8.81989,
                     53.075417
                  ]
               ]
            ]
         }
      },
      {
         "type": "Feature",
         "id": "way/187948398",
         "properties": {
            "type": "way",
            "id": "187948398",
            "tags": {
               "leisure": "playground",
               "name": "Schulhof"
            },
            "relations": [],
            "meta": {}
         },
         "geometry": {
            "type": "Polygon",
            "coordinates": [
               [
                  [
                     8.83946,
                     53.08392
                  ],
                  [
                     8.839428,
                     53.084114
                  ],
                  [
                     8.839424,
                     53.084232
                  ],
                  [
                     8.838944,
                     53.08423
                  ],
                  [
                     8.838881,
                     53.084366
                  ],
                  [
                     8.838587,
                     53.0843
                  ],
                  [
                     8.838676,
                     53.08416
                  ],
                  [
                     8.838328,
                     53.08407
                  ],
                  [
                     8.838431,
                     53.083744
                  ],
                  [
                     8.838458,
                     53.083683
                  ],
                  [
                     8.8386135,
                     53.083675
                  ],
                  [
                     8.838662,
                     53.083775
                  ],
                  [
                     8.8388195,
                     53.083767
                  ],
                  [
                     8.838951,
                     53.0835
                  ],
                  [
                     8.839293,
                     53.083557
                  ],
                  [
                     8.83924,
                     53.083652
                  ],
                  [
                     8.839017,
                     53.083675
                  ],
                  [
                     8.839075,
                     53.08382
                  ],
                  [
                     8.839245,
                     53.08379
                  ],
                  [
                     8.83926,
                     53.083916
                  ],
                  [
                     8.83946,
                     53.08392
                  ]
               ]
            ]
         }
      },
      {
         "type": "Feature",
         "id": "way/188741852",
         "properties": {
            "type": "way",
            "id": "188741852",
            "tags": {
               "leisure": "playground",
               "name": "Robinsönchen"
            },
            "relations": [],
            "meta": {}
         },
         "geometry": {
            "type": "Polygon",
            "coordinates": [
               [
                  [
                     8.815797,
                     53.073067
                  ],
                  [
                     8.81572,
                     53.073093
                  ],
                  [
                     8.815644,
                     53.073124
                  ],
                  [
                     8.815574,
                     53.073147
                  ],
                  [
                     8.815503,
                     53.073166
                  ],
                  [
                     8.815353,
                     53.073124
                  ],
                  [
                     8.815253,
                     53.073067
                  ],
                  [
                     8.815114,
                     53.072865
                  ],
                  [
                     8.815464,
                     53.072765
                  ],
                  [
                     8.815573,
                     53.0728
                  ],
                  [
                     8.815677,
                     53.0728
                  ],
                  [
                     8.815756,
                     53.072807
                  ],
                  [
                     8.815891,
                     53.072834
                  ],
                  [
                     8.815948,
                     53.072865
                  ],
                  [
                     8.815968,
                     53.072906
                  ],
                  [
                     8.815967,
                     53.07294
                  ],
                  [
                     8.815914,
                     53.072998
                  ],
                  [
                     8.815797,
                     53.073067
                  ]
               ]
            ]
         }
      },
      {
         "type": "Feature",
         "id": "way/201280249",
         "properties": {
            "type": "way",
            "id": "201280249",
            "tags": {
               "leisure": "playground",
               "wheelchair": "yes"
            },
            "relations": [],
            "meta": {}
         },
         "geometry": {
            "type": "Polygon",
            "coordinates": [
               [
                  [
                     8.8385,
                     53.079174
                  ],
                  [
                     8.838431,
                     53.078995
                  ],
                  [
                     8.838889,
                     53.078934
                  ],
                  [
                     8.838958,
                     53.079113
                  ],
                  [
                     8.8385,
                     53.079174
                  ]
               ]
            ]
         }
      },
      {
         "type": "Feature",
         "id": "way/207473296",
         "properties": {
            "type": "way",
            "id": "207473296",
            "tags": {
               "area": "yes",
               "leisure": "playground",
               "name": "Schulhof"
            },
            "relations": [],
            "meta": {}
         },
         "geometry": {
            "type": "Polygon",
            "coordinates": [
               [
                  [
                     8.840056,
                     53.084587
                  ],
                  [
                     8.840135,
                     53.084606
                  ],
                  [
                     8.840051,
                     53.084763
                  ],
                  [
                     8.839599,
                     53.08466
                  ],
                  [
                     8.83964,
                     53.084583
                  ],
                  [
                     8.839354,
                     53.08453
                  ],
                  [
                     8.839261,
                     53.084637
                  ],
                  [
                     8.839102,
                     53.08452
                  ],
                  [
                     8.839165,
                     53.084442
                  ],
                  [
                     8.839327,
                     53.08446
                  ],
                  [
                     8.839497,
                     53.08432
                  ],
                  [
                     8.839804,
                     53.084312
                  ],
                  [
                     8.84004,
                     53.084427
                  ],
                  [
                     8.840126,
                     53.08444
                  ],
                  [
                     8.840056,
                     53.084587
                  ]
               ]
            ]
         }
      },
      {
         "type": "Feature",
         "id": "way/238382377",
         "properties": {
            "type": "way",
            "id": "238382377",
            "tags": {
               "access": "permissive",
               "leisure": "playground",
               "operator": "Altes Gymnasium",
               "wheelchair": "yes"
            },
            "relations": [],
            "meta": {}
         },
         "geometry": {
            "type": "Polygon",
            "coordinates": [
               [
                  [
                     8.803467,
                     53.08338
                  ],
                  [
                     8.803206,
                     53.083427
                  ],
                  [
                     8.803113,
                     53.083286
                  ],
                  [
                     8.80329,
                     53.083237
                  ],
                  [
                     8.80348,
                     53.083157
                  ],
                  [
                     8.803867,
                     53.083057
                  ],
                  [
                     8.804142,
                     53.082973
                  ],
                  [
                     8.804237,
                     53.083126
                  ],
                  [
                     8.803933,
                     53.08319
                  ],
                  [
                     8.803768,
                     53.08324
                  ],
                  [
                     8.803556,
                     53.083355
                  ],
                  [
                     8.803467,
                     53.08338
                  ]
               ]
            ]
         }
      },
      {
         "type": "Feature",
         "id": "way/238382384",
         "properties": {
            "type": "way",
            "id": "238382384",
            "tags": {
               "access": "permissive",
               "leisure": "playground",
               "operator": "Altes Gymnasium",
               "wheelchair": "no"
            },
            "relations": [],
            "meta": {}
         },
         "geometry": {
            "type": "Polygon",
            "coordinates": [
               [
                  [
                     8.802596,
                     53.083138
                  ],
                  [
                     8.802544,
                     53.083096
                  ],
                  [
                     8.802461,
                     53.083134
                  ],
                  [
                     8.8023205,
                     53.08302
                  ],
                  [
                     8.802489,
                     53.08292
                  ],
                  [
                     8.802768,
                     53.08306
                  ],
                  [
                     8.802596,
                     53.083138
                  ]
               ]
            ]
         }
      },
      {
         "type": "Feature",
         "id": "way/269716397",
         "properties": {
            "type": "way",
            "id": "269716397",
            "tags": {
               "leisure": "playground"
            },
            "relations": [],
            "meta": {}
         },
         "geometry": {
            "type": "Polygon",
            "coordinates": [
               [
                  [
                     8.830349,
                     53.0752
                  ],
                  [
                     8.830287,
                     53.075058
                  ],
                  [
                     8.830648,
                     53.07501
                  ],
                  [
                     8.830677,
                     53.075073
                  ],
                  [
                     8.830782,
                     53.075058
                  ],
                  [
                     8.8308115,
                     53.075134
                  ],
                  [
                     8.8305855,
                     53.07517
                  ],
                  [
                     8.830349,
                     53.0752
                  ]
               ]
            ]
         }
      },
      {
         "type": "Feature",
         "id": "node/250749323",
         "properties": {
            "type": "node",
            "id": "250749323",
            "tags": {
               "leisure": "playground",
               "wheelchair": "yes"
            },
            "relations": [],
            "meta": {}
         },
         "geometry": {
            "type": "Point",
            "coordinates": [
               8.794211,
               53.080513
            ]
         }
      },
      {
         "type": "Feature",
         "id": "node/582552975",
         "properties": {
            "type": "node",
            "id": "582552975",
            "tags": {
               "leisure": "playground",
               "wheelchair": "limited"
            },
            "relations": [],
            "meta": {}
         },
         "geometry": {
            "type": "Point",
            "coordinates": [
               8.804952,
               53.07868
            ]
         }
      },
      {
         "type": "Feature",
         "id": "node/858277589",
         "properties": {
            "type": "node",
            "id": "858277589",
            "tags": {
               "leisure": "playground"
            },
            "relations": [],
            "meta": {}
         },
         "geometry": {
            "type": "Point",
            "coordinates": [
               8.790673,
               53.073425
            ]
         }
      },
      {
         "type": "Feature",
         "id": "node/1756523576",
         "properties": {
            "type": "node",
            "id": "1756523576",
            "tags": {
               "leisure": "playground"
            },
            "relations": [],
            "meta": {}
         },
         "geometry": {
            "type": "Point",
            "coordinates": [
               8.817897,
               53.07646
            ]
         }
      },
      {
         "type": "Feature",
         "id": "node/2285687173",
         "properties": {
            "type": "node",
            "id": "2285687173",
            "tags": {
               "leisure": "playground"
            },
            "relations": [],
            "meta": {}
         },
         "geometry": {
            "type": "Point",
            "coordinates": [
               8.833523,
               53.073483
            ]
         }
      },
      {
         "type": "Feature",
         "id": "node/2290588213",
         "properties": {
            "type": "node",
            "id": "2290588213",
            "tags": {
               "leisure": "playground"
            },
            "relations": [],
            "meta": {}
         },
         "geometry": {
            "type": "Point",
            "coordinates": [
               8.833821,
               53.07338
            ]
         }
      }
   ]
}
Overpass API - Spielplätze in Bremen

Overpass API – Spielplätze in Bremen

Das fertige Beispiel kann man sich hier anschauen und der Quellcode ist bei Github verfügbar: https://github.com/me4bruno/blog-examples -> example-overpass-api. Falls jemand das Beispiel als Basis für ein eigenes Projekt nutzen möchte, dann sollte man sich zunächst um folgende Punkte kümmern:

  • Löschen der vorhandenen Treffer bei erneuerter Abfrage
  • Funktion onEachFeature() anpassen, sodass Treffer-Daten erst nach Anklicken geladen werden (nicht sofort)
  • Laden von Daten über die Overpass API dem Anwender anzeigen, z.B. mit einem Spinner oder Ladebalken
  • Fehlerbehandlung, falls die Overpass API einen Timeout wegen zu großer Datenmenge erzeugt

Die Overpass API mit den vielen OSM-Möglichkeiten lädt einfach zum Experimentieren ein. Für anschließende Entspannung habe ich auch eine passende Abfrage: amenity~'pub|bar|restaurant|cafe|fast_food|biergarten'

Kommentare sind geschlossen.