Langkah Demi Langkah Tutorial Cara Merender Peta Menggunakan Leaflet.js dan HTML

By
JogjaTech
-
0
63

Halo teman-teman! Selamat datang di tutorial ini. Pada kesempatan kali ini, kita akan belajar tentang langkah demi langkah cara merender peta menggunakan Leaflet.js dan HTML.

Apa itu LeafletJs?

Leaflet.js adalah pustaka (library) JavaScript open-source yang digunakan untuk membuat peta interaktif berbasis web. Leaflet sangat ringan, fleksibel, dan mudah digunakan, serta sering dipakai dalam pengembangan aplikasi berbasis peta, terutama dengan data geografis seperti titik koordinat, jalur, atau poligon.

Dikutip dari situs resminya, LeafletJs merupakan sebuah library JavaScript yang terbuka untuk umum dalam memenuhi keperluan maping. Kendati tidak sehebat google map, LeafletJs ini sangat ringan dan memiliki hampir semua fitur yang dibutuhkan developer dalam mengembangkan aplikasi.

Berikut beberapa poin penting yang perlu kita ketahui tentang keunggulan Leaflet.js:

  • Ringan dan cepat: Ukurannya kecil (~40KB setelah kompresi), tetapi cukup kuat untuk sebagian besar kebutuhan pemetaan.
  • Modular & Ekstensibel: Mendukung banyak plugin untuk menambahkan fitur seperti heatmap, marker cluster, drawing tools, dan lainnya.
  • Dukungan layer: Bisa menampilkan berbagai layer peta (misalnya OpenStreetMap, Mapbox, atau peta kustom).
  • Responsif & mobile-friendly: Mendukung fitur sentuh dan zoom gesture untuk perangkat mobile.
  • API mudah dipahami: Dokumentasi dan sintaksisnya sederhana dan ramah pemula.

Apa itu HTML?

HTML adalah singkatan dari HyperText Markup Language. Ini adalah bahasa standar yang digunakan untuk membuat dan menyusun halaman web.

HTML bukan bahasa pemrograman, tapi bahasa markup — artinya HTML digunakan untuk “menandai” struktur konten di sebuah halaman web, seperti teks, gambar, video, tautan, form, dan lainnya.

Fungsi Utama HTML:

  • Membuat struktur halaman web
    (misalnya: header, footer, sidebar, konten utama)
  • Menentukan jenis konten
    (apakah itu paragraf, judul, gambar, tabel, video, link, dll)
  • Menjadi dasar dari semua halaman web
    (CSS untuk tampilan, JavaScript untuk interaksi – tapi semuanya dimulai dari HTML!)

Berikut adalah langkah demi langkah yang harus Anda ikuti untuk menampilkan peta atau map kedalam halaman website.

Membuat Sebuah Project Dan File Web

Buatlah sebuah folder project baru pada webserver XAMPP ataupun WAMP SERVER, pada pembahasan ini saya lebih menggunakan WAMP Server sebagai web servernya. Dan untuk folder project disini saya menggunakan folder peta.

Kemudian buatalah sebuah file html ataupun PHP pada root project. Lalu buatalah halaman sebuah website tag html seperti berikut

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Render Peta Leaflet JS</title>
</head>
<body>
    
</body>
</html>

Tambahkan Library Leaflet.js

Pada tahap ini kita perlu menambahkan atau menginstal library LeafletJs, dimana library ini kita letakkan didalam tag head di file halaman web yang sudah kita buat. Sehingga secara keseluruhan file html halaman web akan seperti ini

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Render Peta Leaflet JS</title>
    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

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

 

Dapat kita lihat, bahwa kita menambahkan dua library LeafletJs, yaitu css dan javascript yang berupa API dari LeafletJs itu sendiri yang sudah disediakan oleh LeafletJs.

Buat Elemen HTML untuk Peta

Pada tahap ini kita akan membuat container yang akan kita manfaatkan unutk menampung atau merender peta. Disini kita akan memanfaatkan tag div dalam html.

<div id=”map” style=”height: 600px;”></div>

Sebagaimana diketahui, tag HTML adalah elemen dasar dari HTML (HyperText Markup Language) yang digunakan untuk menandai atau memberi struktur pada bagian-bagian dari konten web, seperti teks, gambar, tautan, tabel, form, dan lainnya.

Tentu! div adalah salah satu elemen paling penting dan sering digunakan dalam HTML. Fungsinya seperti wadah (container) untuk mengelompokkan atau membungkus elemen-elemen lain di dalam halaman web.

<div> adalah singkatan dari “division”, dan tidak memiliki tampilan bawaan secara visual (tidak menampilkan garis atau warna, kecuali kamu menambahkannya dengan CSS). Tapi, dia sangat berguna sebagai container untuk menyusun layout halaman.

Dimana elemen tag div kita letakkan dalam tag body html, sehingga terlihat seperti berikut

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Render Peta Leaflet JS</title>
    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

    <!-- Leaflet JS -->
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
</head>
<body>
    <div id="map" style="height: 600px;"></div>
</body>
</html>

 

Inisialisasi Peta dengan JavaScript

Pada tahap ini kita akan menampilkan peta menggunakan LeafletJs. Tambahkan kode berikut di dalam <script>, sehingga seperti berikut:

<script>
        var map = L.map('map').setView([-7.8032485,110.3336451], 9);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; OpenStreetMap contributors'
        }).addTo(map);
        L.marker([-7.8032485,110.3336451]).addTo(map)
        .bindPopup('<b>Halo!</b><br />Ini DI Yogyakarta.')
        .openPopup();
    </script>

Berikut Beberapa Penjelasan Singkat dari script untuk menampilkan map diatas:

  • L.map(‘map’): membuat objek peta di dalam elemen dengan id=”map”
  • .setView([lat, lng], zoom): mengatur posisi awal dan level zoom
  • L.tileLayer(…): mengatur sumber tile peta, biasanya dari OpenStreetMap
  • L.marker(…): menambahkan penanda (marker) di lokasi tertentu

Sehingga secara keseluruhan, kode akan terlihat seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Render Peta Leaflet JS</title>
    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

    <!-- Leaflet JS -->
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
</head>
<body>
    <div id="map" style="height: 600px;"></div>
    
    <script>
        var map = L.map('map').setView([-7.8032485,110.3336451], 9);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; OpenStreetMap contributors'
        }).addTo(map);
        L.marker([-7.8032485,110.3336451]).addTo(map)
        .bindPopup('<b>Halo!</b><br />Ini DI Yogyakarta.')
        .openPopup();
    </script>
</body>
</html>

 

Dan berikut adalah tampilan peta yang menggunakan Leaflet.js dan HTML yang telah kita buat pada pembahasan diatas.

Langkah Demi Langkah Cara Merender Peta Menggunakan Leaflet.js dan HTML

Nah, itu dia! Gampang, kan? Terima kasih sudah mengikuti tutorial ini sampai selesai. Semoga bermanfaat dan sampai jumpa di tutorial berikutnya!

RELATED ARTICLESMORE FROM AUTHOR