Menampilkan Data Openstreetmap Dengan Overpass API

WebGIS Openstreetmap

Kita pasti sudah familiar dengan peta dasar Openstreetmap. Pada tutorial ini akan membahas mengenai cara untuk memanfaatkan Openstreetmap sebagai peta dasar dan melakukan query salah satu objek di Openstreetmap untuk ditampilkan dalam WebGIS. metode ini dengan memanfaatkan Openstreetmap Overpass API.

Beberapa referensi terkait dengan Openstreetmap dapat dilihat di Openstreetmap Wiki. Disini kita akan membuat peta dengan memanfaatkan peta Openstreetmap. Pertama-tama kita perlu menyiapkan code untuk membuat website dengan menggunakan html. Kita memerlukan javascript untuk menampilkan peta. Ada beberapa library javascript untuk menampilkan peta, di sini kita menggunakan Leaflet js. Contoh code HTML sederhana untuk menampilkan peta dengan Leafletjs

<!DOCTYPE html>
<html>
<head>
	
	<title>Quick Start - Leaflet</title>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
</head>
<body>

<div id="map" style="width: 600px; height: 400px;"></div>
<script>

	var map = L.map('map').setView([-6.1829957,106.8444433], 13);
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>'
	}).addTo(map);
</script>

</body>
</html>

Code tersebut sudah dapat menampilkan peta sederhana dengan menggunakan Leaflet. Code leaflet js tersebut menggunakan container peta dengan code html <div id=”map”></div> dan javascript yang akan mengontrol tag id “map” yang ada di code HTML, adapun javascript tersebut sebagai berikut:

var map = L.map('map').setView([-6.1829957,106.8444433], 13);
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>'
	}).addTo(map);

Code tersebut akan menampilkan peta dengan basemap openstreetmap, dimana basemap dimasukkan pada tag L.titleLayer(url basemap, option). Url basemap merupakan tile yang disediakan oleh beberapa service peta, salah satunya Openstreetmap(http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png).

Openstreetmap Overpass API

Kita memerlukan library AJAX Jquery untuk memproses respon dari Overpass API. Pertama-tama kita buat agar saat jendela web terbuka proses query langsung dijalankan dengan menggunakan code sebagai berikut:

$( document ).ready(function() {
    
  });    

misalnya kita disini akan melakukan query untuk objek rumah sakit maka menggunakan parameter node[amenity=hospital], untuk objek lainnya dapat dilihat di Openstreetmap Map Feature dan juga batas area yang akan diquery misalnya 106.7828,-6.2237,106.8695,-6.1469. Dengan demikian format Overpass API yang akan digunakan yaitu https://overpass-api.de/api/interpreter?data=[out:xml][bbox][timeout:180];node[amenity=hospital];out;&bbox=106.7828,-6.2237,106.8695,-6.1469, untuk menggunakan parameter-parameter lainnya dapat dipelajari di Overpass API by Example. Pada javascript dibuat variable url query sebagaiman di atas.

var overpassApiUrl = 'https://overpass-api.de/api/interpreter?data=[out:xml][bbox][timeout:180];node[amenity=hospital];out;&bbox=106.7828,-6.2237,106.8695,-6.1469';

Hasil query dari url tersebut berupa xml Openstreetmap sebagai berikut:

<?xml version="1.0" encoding="UTF-8"?>
<osm version="0.6" generator="Overpass API 0.7.55.9 ab41fea6">
<note>The data included in this document is from www.openstreetmap.org. The data is made available under ODbL.</note>
<meta osm_base="2020-01-23T10:27:01Z"/>

  <bounds minlat="-6.2237000" minlon="106.7828000" maxlat="-6.1469000" maxlon="106.8695000"/>

  <node id="5519910721" lat="-6.1474447" lon="106.8294922">
    <tag k="addr:street" v="Jalan Mangga Besar"/>
    <tag k="amenity" v="hospital"/>
    <tag k="name:en" v="Husada"/>
    <tag k="opening_hours" v="24/7"/>
    <tag k="phone" v="+62216260108"/>
    <tag k="website" v="http://www.husada.co.id"/>
  </node>
  <node id="5673769073" lat="-6.1763071" lon="106.8448212">
    <tag k="amenity" v="hospital"/>
    <tag k="healthcare" v="hospital"/>
  </node>
  <node id="5673769081" lat="-6.1698218" lon="106.7837097">
    <tag k="amenity" v="hospital"/>
    <tag k="emergency" v="yes"/>
    <tag k="name" v="Rumah Sakit Pelita Harapan"/>
  </node>
  <node id="6210541001" lat="-6.1716367" lon="106.8106939">
    <tag k="amenity" v="hospital"/>
    <tag k="healthcare" v="hospital"/>
    <tag k="name:en" v="Instalasi Gawat Darurat"/>
    <tag k="opening_hours" v="24/7"/>
  </node>
  <node id="6210541003" lat="-6.1723055" lon="106.8106017">
    <tag k="amenity" v="hospital"/>
    <tag k="healthcare" v="hospital"/>
    <tag k="name:en" v="RSUD Tarakan"/>
  </node>
  <node id="6239456587" lat="-6.1804350" lon="106.8181303">
    <tag k="addr:housenumber" v="25"/>
    <tag k="addr:postcode" v="10110"/>
    <tag k="addr:street" v="Jalan Budi Kemuliaan"/>
    <tag k="amenity" v="hospital"/>
    <tag k="healthcare" v="hospital"/>
    <tag k="name:en" v="Emergency"/>
    <tag k="phone" v="+62213501012"/>
  </node>
  <node id="6249775451" lat="-6.2062530" lon="106.8486027">
    <tag k="amenity" v="hospital"/>
    <tag k="name:en" v="RSIA Tambak"/>
    <tag k="phone" v="+62212303444"/>
  </node>
  <node id="6249961896" lat="-6.1959453" lon="106.8370930">
    <tag k="amenity" v="hospital"/>
    <tag k="name:en" v="RSU Bunda Jakarta"/>
    <tag k="phone" v="1500799"/>
    <tag k="website" v="http://www.bunda.co.id"/>
  </node>
  <node id="6265275488" lat="-6.1888097" lon="106.8286737">
    <tag k="amenity" v="hospital"/>
    <tag k="healthcare" v="hospital"/>
    <tag k="name:en" v="RS Abdi Waluyo Physiotherapy"/>
  </node>

</osm>

Disini kita perlu untuk mengkonversi data xml menjadi GEOjson agar dapat dibuka oleh library Leafletjs. Adapun library untuk mengubah xml Openstreetmap menjadi GEOjson adalah osmtogeojson, kita hanya menggunakan yang javascript yang akan dipanggil dalam file HTML yang kita buat. Cara penggunaan library cukup mudah hanya dengan code osmtogeojson(xml Openstreetmap). Adapun file GEOjson hasil konversi sebagai berikut:

{
  "type":"FeatureCollection",
  "features":[
    {
      "type":"Feature",
      "id":"node/5519910721",
      "properties":{
        "type":"node",
        "id":5519910721,
        "tags":{
          "addr:street":"Jalan Mangga Besar",
          "amenity":"hospital",
          "name:en":"Husada",
          "opening_hours":"24/7",
          "phone":"+62216260108",
          "website":"http://www.husada.co.id"
        },
        "relations":[

        ],
        "meta":{

        }
      },
      "geometry":{
        "type":"Point",
        "coordinates":[
          106.8294922,
          -6.1474447
        ]
      }
    },
    {
      "type":"Feature",
      "id":"node/5673769073",
      "properties":{
        "type":"node",
        "id":5673769073,
        "tags":{
          "amenity":"hospital",
          "healthcare":"hospital"
        },
        "relations":[

        ],
        "meta":{

        }
      },
      "geometry":{
        "type":"Point",
        "coordinates":[
          106.8448212,
          -6.1763071
        ]
      }
    },
    {
      "type":"Feature",
      "id":"node/5673769081",
      "properties":{
        "type":"node",
        "id":5673769081,
        "tags":{
          "amenity":"hospital",
          "emergency":"yes",
          "name":"Rumah Sakit Pelita Harapan"
        },
        "relations":[

        ],
        "meta":{

        }
      },
      "geometry":{
        "type":"Point",
        "coordinates":[
          106.7837097,
          -6.1698218
        ]
      }
    },
    {
      "type":"Feature",
      "id":"node/6210541001",
      "properties":{
        "type":"node",
        "id":6210541001,
        "tags":{
          "amenity":"hospital",
          "healthcare":"hospital",
          "name:en":"Instalasi Gawat Darurat",
          "opening_hours":"24/7"
        },
        "relations":[

        ],
        "meta":{

        }
      },
      "geometry":{
        "type":"Point",
        "coordinates":[
          106.8106939,
          -6.1716367
        ]
      }
    },
    {
      "type":"Feature",
      "id":"node/6210541003",
      "properties":{
        "type":"node",
        "id":6210541003,
        "tags":{
          "amenity":"hospital",
          "healthcare":"hospital",
          "name:en":"RSUD Tarakan"
        },
        "relations":[

        ],
        "meta":{

        }
      },
      "geometry":{
        "type":"Point",
        "coordinates":[
          106.8106017,
          -6.1723055
        ]
      }
    },
    {
      "type":"Feature",
      "id":"node/6239456587",
      "properties":{
        "type":"node",
        "id":6239456587,
        "tags":{
          "addr:housenumber":"25",
          "addr:postcode":"10110",
          "addr:street":"Jalan Budi Kemuliaan",
          "amenity":"hospital",
          "healthcare":"hospital",
          "name:en":"Emergency",
          "phone":"+62213501012"
        },
        "relations":[

        ],
        "meta":{

        }
      },
      "geometry":{
        "type":"Point",
        "coordinates":[
          106.8181303,
          -6.180435
        ]
      }
    },
    {
      "type":"Feature",
      "id":"node/6249775451",
      "properties":{
        "type":"node",
        "id":6249775451,
        "tags":{
          "amenity":"hospital",
          "name:en":"RSIA Tambak",
          "phone":"+62212303444"
        },
        "relations":[

        ],
        "meta":{

        }
      },
      "geometry":{
        "type":"Point",
        "coordinates":[
          106.8486027,
          -6.206253
        ]
      }
    },
    {
      "type":"Feature",
      "id":"node/6249961896",
      "properties":{
        "type":"node",
        "id":6249961896,
        "tags":{
          "amenity":"hospital",
          "name:en":"RSU Bunda Jakarta",
          "phone":"1500799",
          "website":"http://www.bunda.co.id"
        },
        "relations":[

        ],
        "meta":{

        }
      },
      "geometry":{
        "type":"Point",
        "coordinates":[
          106.837093,
          -6.1959453
        ]
      }
    },
    {
      "type":"Feature",
      "id":"node/6265275488",
      "properties":{
        "type":"node",
        "id":6265275488,
        "tags":{
          "amenity":"hospital",
          "healthcare":"hospital",
          "name:en":"RS Abdi Waluyo Physiotherapy"
        },
        "relations":[

        ],
        "meta":{

        }
      },
      "geometry":{
        "type":"Point",
        "coordinates":[
          106.8286737,
          -6.1888097
        ]
      }
    }
  ]
}

Oleh karena itu code yang akan ditambahkan pada javascript memuat jquery .get() dan library osmtogeojson serta menambahkan GEOjson ke dalam layer peta “L.geoJson(Geojson).addTo(map);” sebagai berikut:

    $.get(overpassApiUrl, function (osmXml) {
      var OSMGeojson = osmtogeojson(osmXml); 
      var resultLayer = L.geoJson(OSMGeojson).addTo(map);
    });   

Keseluruhan HTML yang sudah jadi sebgai berikut:

<!DOCTYPE html>
<html>
<head>
	
	<title>Openstreetmap - Overpass API</title>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
    <script src="lib/osmtogeojson.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
</head>
<body>

<div id="map" style="width: 600px; height: 400px;"></div>
<script>

	var map = L.map('map').setView([-6.1829957,106.8444433], 13);
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>'
	}).addTo(map);

  $( document ).ready(function() {
      var overpassApiUrl = 'https://overpass-api.de/api/interpreter?data=[out:xml][bbox][timeout:180];node[amenity=hospital];out;&bbox=106.7828,-6.2237,106.8695,-6.1469';
      $.get(overpassApiUrl, function (osmXml) {
        var OSMGeojson = osmtogeojson(osmXml); 
        var resultLayer = L.geoJson(OSMGeojson).addTo(map);
      });
    });    
</script>

</body>
</html>

Hasil akhir peta yang ditampilkan berdasarkan code tersebut:


    
    
    
	  

Updated:

This Post Has 162 Comments

  1. It’s perfect time tօ make some ⲣlans for the futսre
    and it is time to ƅe happy. I’ve reɑd this poѕt and if I could
    I desire to suggest you few inteгesting things oг tips.
    Maybe you coulԀ write next articles referring to
    this artіcle. I want to read more things about it!

    Here is my web-site; Login Gbo777

  2. I almoѕt never create comments, but i did some
    seɑrching and woսnd up hгe Menampilkan Ꭰata Openstreetmap Ⅾengan Օverpass API – Spatial
    Mate. And I do haѵe 2 questions for you if it’s allright.
    Could it be only me or does it look like some օf the comments come acroѕs
    like left by brain dead folks? 😛 And, if you aree posting on additionaⅼ places, I’d like to folloѡ everything new yoᥙ have to post.
    Would you make a list of every one of all your shared sites like
    your twitter feed, Facebooк page or linkedin profile?

    my homepage … link gbo4d

Leave a Reply