Melanjutkan dari postingan sebelumnya untuk membuat map di web dari Open Street Map dan Leaflet. Berikut adalah tambahan agar map kamu lebih powerful dan variatif, yakni menambahkan fitur search location dan auto focus dan change marker ko posisi yang telah dipilih dari hasil pencarian. Untuk part 1 bisa kamu baca di https://academy.byidmore.com/id/post/Panduan-Implementasi-Open-Street-Map-di-Web-5e0090916857eb1948ae82bc .
Tentang Nominatim
Nominatim adalah search engine untuk mengolah Open Street Map data. Nominatif berupa api service yang gratis dan sangat terbuka, bahkan bisa diakses tanpa token atau access key, saya cukup was-was dengan keterbukaan ini, ditakutkan terlalu banyak yang akses akan membuat server Nominatim melambat bahkan mati.
Dibaca dari https://operations.osmfoundation.org/policies/nominatim/ Nominatim memberikan aturan untuk menggunakan servis mereka antara lain ;
- Tidak ada kegunaan berat (maksimum absolut 1 permintaan per detik).
- Berikan HTTP Referer atau User-Agent yang valid yang mengidentifikasi aplikasi (stok Agen-Pengguna sebagaimana diatur oleh pustaka http tidak akan melakukannya).
- Tampilkan atribusi dengan jelas sesuai untuk media Anda.
- Data disediakan di bawah lisensi ODbL yang mengharuskan untuk berbagi (meskipun ekstraksi kecil kemungkinan akan tercakup oleh penggunaan yang adil / transaksi yang adil).
Dan beberapa aturan lainnya yang bisa kalian baca di link diatas.
Menggunakan Api Nominatim
Dokumentasi lengkap seputar Nominatim, bisa dibaca di https://nominatim.org/release-docs/develop/ . Tapi dibagian ini kita hanya fokus di endpoint search location. Yakni di https://nominatim.openstreetmap.org/search/<query>?<params> . Berikut adalah sampel endpoint yang diakses
https://nominatim.openstreetmap.org/search?q=stadion%20kridosono&format=jsonDan ini adalah responnya
[
{
"place_id": 141677185,
"licence": "Data © OpenStreetMap contributors, ODbL 1.0. https://osm.org/copyright",
"osm_type": "way",
"osm_id": 286234164,
"boundingbox": [
"-7.7884935",
"-7.7869745",
"110.3736477",
"110.375006"
],
"lat": "-7.7877266",
"lon": "110.374319016165",
"display_name": "Stadion Kridosono, Jalan Yos Sudarso, Kotabaru, Gondokusuman, Yogyakarta, Special Region of Yogyakarta, 55224, Indonesia",
"class": "leisure",
"type": "stadium",
"importance": 0.201
}
]Data yang ditampilkan cukup lengkap ya, tapi untuk kasus ini nama lokasi dan koordinat saja sudah cukup, karena ditujukan untuk fokus peta dan merubah lokasi marker.
Implementasi di Web
Untuk implementasi di web, berikut adalah beberapa langkah implementasi yang bisa kamu lakukan :
- membuat tampilan input text dan search results
- Mendapatkan value dari hasil input user, untuk digunakan ketika request ke nominatim
- Jika ada response dari Nominatim maka render search results berdasarkan json di response api tersebut.
- Users klik di hasil pencarian, dan menggunakan koordinat, latitude dan longitude untuk membuat peta lebih center dan mengubah posisi marker.
Tentu masih banyak kondisi lainnya agar sistem ini semakin stabil, seperti handling jika tidak ada pencarian, handling jika user tidak ingin mau menggunakan search result.
Kesimpulan
Memang signifikan sekali hasil pencari dari Open Street Map ini dibandingan dengan Google Map, tapi ini sudah cukup karena Open Street Map bisa mengenali spot-spot terkenal di beberapa tepat, bisa dibilang ada harga ada rupa. Untuk code dan demo lengkap seputar materi ini, bisa kamu baca di https://codepen.io/yussan/pen/ExaQOwQ , terimakasih.
- Yussan