Membuat peta menggunakan leafletjs untuk pemula

work hard & thinking!

Di bawah ini adalah tutorial cara membuat peta interaktif menggunakan Leaflet.js. Berikut langkah-langkah sederhana untuk memulai:

Langkah 1: Membuat File HTML

Buat file index.html dan tambahkan kerangka dasar HTML.


<!DOCTYPE html>
<html>
<head>
    <title>Peta dengan Leaflet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Tambahkan CSS Leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <style>
        #map {
            height: 500px; /* Atur tinggi peta */
        }
    </style>
</head>
<body>
    <h1>Peta Interaktif dengan Leaflet</h1>
    <div id="map"></div>

    <!-- Tambahkan JS Leaflet -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Peta dengan Leaflet</title>

<style>

#map {

height: 500px; /* Atur tinggi peta */

}

</style>

</head>

<body>

<h1>Peta Interaktif dengan Leaflet</h1>

</body>

</html>

Langkah 2: Tambahkan Script JavaScript

Tambahkan script di bagian bawah file HTML untuk memuat peta.


<script>
    // Inisialisasi peta
    var map = L.map('map').setView([3.139, 101.686], 13); // [Latitude, Longitude], Zoom level

    // Tambahkan tile layer (peta dasar)
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    // Tambahkan marker (penanda)
    var marker = L.marker([3.139, 101.686]).addTo(map); // Koordinat KL, Malaysia

    // Tambahkan popup ke marker
    marker.bindPopup("<b>Halo!</b><br>Ini Kuala Lumpur.").openPopup();
</script>

// Inisialisasi peta

var map = L.map('map').setView([3.139, 101.686], 13); // [Latitude, Longitude], Zoom level

// Tambahkan tile layer (peta dasar)

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

}).addTo(map);

// Tambahkan marker (penanda)

var marker = L.marker([3.139, 101.686]).addTo(map); // Koordinat KL, Malaysia

// Tambahkan popup ke marker

marker.bindPopup("<b>Halo!</b><br>Ini Kuala Lumpur.").openPopup();

</script>

Penjelasan Kode

CSS untuk Peta: Elemen #map diberi tinggi agar peta terlihat.
Inisialisasi Peta: L.map(‘map’): Membuat peta di elemen dengan ID map. setView([lat, lng], zoom): Mengatur lokasi awal dan level zoom peta.
Tile Layer: L.tileLayer: Menambahkan peta dasar dari OpenStreetMap.
Marker dan Popup: L.marker([lat, lng]): Menambahkan marker di lokasi tertentu. bindPopup: Menambahkan kotak informasi (popup) pada marker.

Langkah 3: Jalankan Peta

Simpan file index.html.
Buka file tersebut di browser. Anda akan melihat peta interaktif dengan marker dan popup!

5 October 2024 | Tags: leaflet, leafletjs, membuat peta web, peta interaktif

work hard & thinking!