membuat map sederhana dengan leafletjs

Membuat Map Sederhana Dengan LeafletJS

Pada tutorial kali ini saya akan membahas tentang GIS namun kali ini saya tidak akan menggunakan Google Maps API. Pada topik kali ini saya akan menjelaskan cara membuat map sederhana dengan LeafletJS.

Apa itu Leaflet? Berikut penjelasan singkatnya yang saya kutip dari website resmi LeafletJS.

“Leaflet is a modern open-source JavaScript library for mobile-friendly interactive maps. It is developed by Vladimir Agafonkin with a team of dedicated contributors. Weighing just about 34 KB of JS, it has all the features most developers ever need for online maps.

Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms out of the box, taking advantage of HTML5 and CSS3 on modern browsers while still being accessible on older ones. It can be extended with a huge amount of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.”

Pada intinya LeafletJS adalah sebuah library Javascript yang dibangun untuk dapat membuat sebuah platform peta berbasis Open Sources.

Baca Juga : Membuat Peta Pada LeafletJS Dengan PHP dan MySQL

Sekarang kita akan membuat map sederhana dengan LeafletJS! ketikkan script berikut pada text editor kamu.

<html>
<head>
<title></title>
<script src="leaflet.js"></script>
</head>
<h3>Peta Leaflet Sederhana</h3>
<div id="map" style="width: 1024px; height: 600px;"></div>
<script>
    // koordinat dan zoom view peta 
    var map = L.map('map').setView([-6.92202, 107.60645], 12);
    
    // ini adalah copyright, bisa dicopot tapi lebih baik kita hargai sang penciptanya ya :)
    L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>, , Modified © <a href="https://elcicko.com">ElCickoBlog</a>'
    }).addTo(map);
    
    // ini adalah koordinat marker 
    L.marker([-6.92202, 107.60645]).addTo(map)
    .bindPopup("<b>Wilujeng sumping!</b> Ieu teh Kota Bandung.").openPopup();
    
    var popup = L.popup();
    function onMapClick(e) {
        popup
        .setLatLng(e.latlng)
        .setContent("Koordinat pada titik ini adalah " + e.latlng.toString())
        .openOn(map);
    }
    
    map.on('click', onMapClick);
</script>
</body>
</html>

Ok sekarang kita simpan dalam bentuk HTML, lalu jalankan di browser, maka output yang tampil adalah sebagai berikut.

Membuat Map Sederhana Dengan LeafletJS - Output

Sekian dulu tutorial dari saya tentang cara membuat map sederhana dengan LeafletJS. silahkan dicoba dan semoga bermanfaat.

download-button

Tinggalkan komentar