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:
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 dｅsiｒe to suggest you few inteгesting things oг tips.
Maybe you coulԀ writｅ next articles referring to
this artіcle. I want to read more things about it!
Here is my web-site; Login Gbo777
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 likｅ to folloѡ everything new yoᥙ have to post.
Would you make a list of every one of all your shaｒed sites like
your twitter feed, Facebooк page or linkedin profile?
my homepage … link gbo4d
I appreciate the time and effort you’ve put into compiling this content. Thanks for sharing it with us.
May I request more information on the subject? All of your articles are extremely useful to me. Thank you!
Great content! Super high-quality! Keep it up!