Tutorial Cara Menampilkan Marker pada Peta Menggunakan LeafletJS

By
JogjaTech
-
0
57

Halo semuanya. Pada kesempatan kali ini, kita akan ngebahas bagaimana cara menampilkan marker pada peta menggunakan LeafletJS. Bagi kamu yang sedang mengembangkan aplikasi berbasis peta atau sekadar ingin menandai lokasi tertentu di peta interaktif, fitur ini sangat penting untuk dipahami. Yuk, kita mulai langkah-langkahnya dengan mudah dan menyenangkan!

Apa itu Marker?

Sebelumnya terlebih dahulu mari kita ulas tentang apa itu marker. Marker adalah penanda atau ikon yang ditampilkan di atas peta untuk menunjukkan lokasi tertentu. Dalam konteks peta digital seperti yang dibuat dengan LeafletJS, marker biasanya berupa ikon kecil (bisa berupa pin, lingkaran, atau gambar lain) yang ditaruh di koordinat tertentu (latitude dan longitude).

Contohnya, kalau kamu ingin menunjukkan lokasi tempat usaha atau semisal kedai kopi di peta, kamu akan menambahkan marker di titik koordinat coffe favoritmu.

Tutorial Cara Menampilkan Marker pada Peta

Bisa kita lihat pada gambar diatas banyak marker atau Lokasi penanda tempat ngopi di daerah Jogja. Demikianlah yang dimaksud dengan marker atau penanda suatu lokasi.

Menampilkan Marker pada Map

Untuk menampilkan marker pada pembahasan kali ini, saya masih menggunakan project kerja sebelumnya pada judul Langkah Demi Langkah Tutorial Cara Merender Peta Menggunakan Leaflet.js dan HTML. Untuk melanjutkan tutorial ini, saya berharap kamu sudah mempelajarinya terlebuh dahulu.

Menampilkan marker sangatlah mudah, kamu hanya perlu menambahkan potongan kode yang berfungsi untuk menampilkan marker pada map. Berikut adalah contoh potongan kode untuk untuk menampilkan marker pada map.

var marker = L.marker([-7.8241841, 110.2105797]).addTo(map);

Sebagai contoh mari kita terapkan secara lengkap potongan kode tersebut kedalam file project, 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>
    
    <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);
        var marker = L.marker([-7.8241841, 110.2105797]).addTo(map)
        .bindPopup('<b>Halo!</b><br />Ini Masjid Jogokariyan di Jogja')
        .openPopup();
    </script>
</body>
</html>

Jika kode diatas kita jalankan, maka kita akan melihat sebuah tampilan peta dengan tambahan satu marker, yaitu marker Masjid Jogokaryan Yogyakarta seperti berikut.

Tutorial Cara Menampilkan Marker pada Peta Menggunakan LeafletJS

Nah, gampang banget, kan? Sekarang kamu sudah bisa menampilkan marker di peta dengan LeafletJS! Silakan eksplorasi lebih jauh dengan menambahkan ikon custom, marker interaktif, atau bahkan fitur peta lainnya. Selamat mencoba dan happy coding!

Semoga bermanfaat dan sampai jumpa di tutorial berikutnya!

RELATED ARTICLESMORE FROM AUTHOR