Semenjak Google Maps tidak menggratiskan lagi penggunaan Maps api dan sdk terutama pada web dan production mode, Open Street Map pun mulai ramai digunakan. Bagi yang belum tahu update harga terbaru Google Maps terbaru bisa cek link berikut https://cloud.google.com/maps-platform/pricing/ . Untuk itu Id More Academy mengajak kamu untuk menggunakan berbagai fitur - fitur di Open Street Map, karena sifatnya yang sangat terbuka dan open source, banyak cara yang bisa digunnakan untuk implementasi Open Street Map dan link ini akan sangat berguna untuk kamu yang ingin mempelajarinya https://wiki.openstreetmap.org/wiki/Frameworks , banyak referensi open library, api, raw data dan lain - lain yang bisa dipilih disana.
Sample Menggunakan Leaflet
Dari banyak pilihan library untuk rendering map dari Open Street Map disini kami pilih Leaflet, karena saat tulisan ini dibuat Leaflet menempati urutn nomor 1 paling populer.
Untuk semua langkah didalam ini saya menggunakan Codepen agar lebih praktis. Pertama silahkan download atau gunakan cdn dari Leaflet yang bisa diakses di https://leafletjs.com .
Untuk download .js dan .css bisa melalui link berikut ini https://leafletjs.com/download.html . Atau kalian bisa menggunakan CDNnya sebagai berikut
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>Atau kalian juga bisa install Leaflet dari NPM dengan cara npm install leaflet.
Merender Peta
Menyiapkan Map Container
Dipostingan ini kita tidak akan membuat postingan yang sifatnya expert, yaknik cukup untuk rendering peta berdasarkan coordinat (latitude dan longitude) yang telah disiapkan, kemudian ditandai dengan sebuah marker dan jika marker itu diklik akan keluar popup message.
Setelah kamu memasang tag script dan style diatas, lanjutkan dengan membuat sebuah div kosong, dan berikan id untuk memudahkan melakukan seleksi di js, dalam kasus ini saya membuat div kosong dengan id = "#map-standard"
<div id="#map-standard"></div>Inisialisasi Leaflet
Ada 2 inisialisasi yang dilakukan yang inisialisasi untuk map container dan osm (Open Street Map).
// map container initial
const standardMap = L.map('map-standard');
// osm initial
onst osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const osmAttrib='Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
// create layer
const mapLayer = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 50, attribution: osmAttrib}); Dari inisialisasi diatas bertujuan untuk konfigurasi dari dari peta yang akan dirender, seperti url untuk raw map dari OSM , text di footer, batasan zoom dan lain sebagainya.
Render Map
Setelah semua inisialisasi awal dirasa cukup waktunya render peta tersebut ke browser.
// set focus location on map and zoom to 17
standardMap.setView(new L.LatLng('-7.75422', '110.38534'), 17)
// render map
standardMap.addLayer(mapLayer)
Hasil akhir dari baris code diatas akan menghasilkan tampilan peta seperti pada gambar dibawah. Untuk langkah inisialisasi sampai render bisa kalian baca lebih lengkap di https://leafletjs.com/examples/quick-start/.
Menambah Marker dan PopUp
Sesuai dengan misi diatas, maka tugas kita tinggal satu yaitu menampilkan marker dan popup sesuai dengan target yang telah ditentukan. Disini kita masih menggunakan koordinat yang sama seperti fokus diatas '-7.75422', '110.38534' . Untuk pop up di Leaflet support dengan HTML, jadi kamu bisa membuat tampilannya sesuai dengan kreatifitas kamu, tapi sayangnya hanya support inline CSS.
// added marker to standard map : pointing to Id More
const standardMarker = L.marker(['-7.75422', '110.38534']).addTo(standardMap);
// added popup in the marker and open by default
standardMarker.bindPopup("<b>Disini</b><br>Id More").openPopup();Dan berikut adalah hasil akhirnya.
Kesimpulan
Cukup gampang bukan, Leaflet bisa membuat lebih dari ini tergantung dari kreatifitas kamu. Berikut beberapa sampel yang telah saya buat di Codepen , membuat custom marker ketika klik , multi marker dan lain sebagainya.
Kekurangan dari Open Street Map menurut saya pribadi adalah kelengkapan datanya, tidak selengkap dengan Google Maps yang kita sudah tahu penggunannya hampir seluruh pengguna perangkat digital saat ini, serta kekurangan lain adalah tampilannyayang tidak se modern Google Maps. Tapi tidak apa-apa yang penting free.