Menampilkan Map OSM dengan Leaflet

Saat ini, banyak aplikasi yang menggunakan geolokasi yang ditanam pada aplikasinya. Hal ini berfungsi untuk mengetahui lokasi pengguna secara real time. Tentu saja dibarengi dengan perangkat yang memiliki GPS (Global Positioning System) khususnya. Biasanya kita mengenal Google Map, yang merupakan jasa dari pihak ke-3 yang dapat kita gunakan. Namun saat ini, penggunaan Google Map, dikenakan biaya tertentu. Jadi untuk aplikasi yang memiliki budget minim, mengalami kendala.

Dengan adanya kendala tersebut, maka kita akan menggunakan map pihak ketiga lainnya yang opensourcer, yakni OSM (Open Street Map) dengan librari leafletjs. Pada tulisan kali ini, kita akan membuat bagaimana cara menampilkan map menggunakan leafletjsi. Pertama, kita import dahulu file css dan js nya. Begini codenya :

 
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
 

Letakkan code tersebut pada bagian atas file. Setelah itu, kita tuliskan element yang berfungsi untuk menampilkan map dari OSM tersebut. Begini codenya :

 
<div id="map"></div>
 

Kemudian kita lanjutkan dengan penulisan css yang brfungsi untuk menampilkan ukuran map pada browser. Begini codenya :

 
<style type="text/css" media="screen">
	#map {
        height: 100%;
        width:100%
    }
</style>
 

Pada bagian bawah, kita menuliskan lagi javascript yang berfungsi untuk menetukan letak posisi tengah map. Begini codenya :

 
<script>
    //menentukan posisi tengah map dan zoom default
    const map = L.map('map').setView([-6.175179063895251, 106.82716352560583], 14);
    //menampilkan map dengan maksimal zoom
    const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);
</script>
 

Setelah selesai, simpan file tersebut dengan nama yang kamu inginkan. Dan tentunya pada web server. Kemudian buka menggunakan browser. Apabila berhasil, maka akan tampil map seperti di bawah ini :

Contoh map
Nah, mudah sekali bukan? Demikianlah bagaimana cara Menampilkan Map OSM dengan Leaflet. Semoga bermanfaat.