Pencarian Lokasi(Geosearch) Menggunakan Leaflet
3:32 PM
Kali ini saya akan memperkenalkan plugin leaflet yang bernama Geosearch, plugin ini dapat digunakan untuk mencari lokasi berdasarkan alamat tertentu atau lebih dikenal dengan nama geocoding.
Sebelum itu pastikan anda sudah mempunyai file leaflet dan juga plugin geosearch nya
Leaflet dapat di download di http://leafletjs.com
Dan untuk plugin Geosearch bisa langsung download di https://github.com/smeijer/L.GeoSearch
Secara default kita bisa menggunakan beberapa geocoding service yang disediakan oleh plugin ini, antara lain adalah Esri, Google Maps, dan OpenStreetMap. Untuk tutorial kali ini saya akan memberikan contoh dengan menggunakan geocoding service dari Google Maps, untuk yang lain bisa dicoba sendiri.
Untuk menggunakan plugin ini tentunya pertama kita harus include plugin ini di project leaflet kita.
Css:
<link rel="stylesheet" href="geosearch/src/css/l.geosearch.css" />
js:
<script src="geosearch/src/js/l.control.geosearch.js"></script>
<script src="geosearch/src/js/l.geosearch.provider.google.js"></script>
Sesuaikan link dari file css dan js di atas dengan letak dan nama file plugin Leaflet.Geosearch anda. Selain itu bisa kita lihat juga pada baris ke dua script include bahwa kita menggunakan provider dari google, untuk yang lainnya bisa anda coba sendiri.
Untuk menambahkan plugin ini supaya terlihat di dalam peta cukup gunakan script berikut:
new L.Control.GeoSearch({
provider: new L.GeoSearch.Provider.Google(),
position: 'topcenter',
showMarker: true
}).addTo(map);
Untuk kode lengkap sampai dengan menampilkan peta adalah sebagai berikut:
dan untuk hasilnya kurang lebih seperti berikut:
Cukup mudah bukan, next tutorial masih akan membahas plugin ini, yaitu cara mengetahui koordinat dari marker yang ditampilkan oleh plugin geosearch, tujuannya supaya nantinya koordinat yang ada dapat digunakan untuk pengembangan lebih lanjut seperti routing, penyimpanan alamat, dan lain sebagainya.
nb: jika ada kesalahan pada kodingan lengkapnya bisa diperbaiki sendiri untuk belajar. Ganti scrip dengan script
Sekian, GBU
1 comments
wow keren kak, terimakasih buat sharingnya ooo iya kak kalau ingin tahu tentang web gratis yukk disini saja.. terimakasih
ReplyDelete