Menampilkan Data Openstreetmap Dengan Overpass API

· 6 min read

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:


    
    
    
	  

Related Articles

XYZ Tiles sebagai Basemap

Saat kita membuat peta pasti membutuhkan basemap. banyak basemap yang tersedia misalnya google map. Di tutorial ini akan memberikan langkah-langkah

· 3 min read

Mengekstrak Data Openstreetmap Dengan Menggunakan Overpass Turbo

Kita sudah familiar dengan peta dasar opensource yaitu Openstreetmap. Pada tutorial ini akan membahas mengenai cara untuk mengexport data OpenStreetMap

· 3 min read
Apa itu Folium?
· 1 min read