Leaflet Alternatif Google Maps API. Bagian #1 Cara Menampilkan Peta

LeafletJS merupakan library Javascript yang digunakan untuk menampilkan peta interaktif pada halaman web. Leaflet menyediakan Map API (Application Programming Interface) yang memudahkan web developer untuk menampilkan peta berbasis Tile pada halaman web. Pengguna peta juga dapat berinteraksi dengan menggunakan fungsi telah disediakan oleh Leaflet.

Dibandingkan Map API lainnya seperti OpenLayer, Google Maps API, ArcGIS atau Mapbox, Leaflet memiliki keunggulan dalam kecepatan akses dan ukuran berkas yang kecil. Meskipun memiliki ukuran yang lebih kecil, LeafletJS memiliki fungsi web mapping yang cukup lengkap. Fungsionalitas LeafletJS ini dapat ditingkatkan dengan menggunakan berbagai Plugin yang tersedia secara gratis.

Pada artikel kali ini saya akan memberikan tutorial bagaimana cara menampilkan maps pada website menggunakan LeafletJS.

Langkah pertama yang harus kita lakukan adalah memasukkan css dan js dari leaflet kedalam tag <head> atau sebelum tag </head>

<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>
<style>
    html, body {
        height: 100%;
        margin: 0;
    }

    #map {
        width: 600px;
        height: 400px;
    }

    body {
        padding: 0; margin: 0;
    }

    #map {
        height: 100%; width: 100vw;
    }
</style>

Selanjutnya kita masukkan tag div dengan id map kedalam tag atau sebelum tag </body>

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

Lalu kita masukkan javascript dibawah untuk membuat layer pada peta.

<script type="text/javascript">
    var mymap = L.map('map', { zoomControl: false }).setView([-6.869544, 109.3948958], 13);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data © OpenStreetMap contributors.',
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1
    }).addTo(mymap);
</script>

Sehingga ketika kita satukan script diatas, maka menjadi seperti berikut.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Maps LeafletJS</title>
    <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>
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }

        #map {
            width: 600px;
            height: 400px;
        }

        body {
            padding: 0; margin: 0;
        }

        #map {
            height: 100%; width: 100vw;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script type="text/javascript">
        var mymap = L.map('map', { zoomControl: false }).setView([-6.869544, 109.3948958], 13);

        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
            maxZoom: 18,
            attribution: 'Map data © OpenStreetMap contributors.',
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1
        }).addTo(mymap);
    </script>
</body>
</html>

Mungkin cukup sekian artikel tentang Cara Membuat Peta pada LeafletJS, jika bermanfaat silahkan share keteman-teman kalian supaya mereka tau apa yang kalian tau. Jika ada kesulitan silahkan tinggalkan komentar.

Gagas Sangga Pratama Sabtu, 08 Agustus 2020 2.743 View Website