Membuat Marker (Penanda) Pada Peta Leaflet WebGIS dengan Leaflet #2:

Baiklah bagi teman teman yang ingin mengikuti tutorial ini diharapkan sudah mengikuti tutorial pertama tentang membuat peta dengan menggunakan leaflet.JS disini.

Section Artikel

1 Membuat marker di leaflet JS.
- 1.1 Kustomisasi Icon Marker
- 1.2 Menambahkan Pop-up pada Marker

Membuat marker di leaflet JS.

Marker (Penanda) biasanya digunakan sebagai penanda suatu daerah, lokasi maupun tempat. Pada leaflet JS kita bisa membuat marker standar maupun kostum sendiri.

Membuat marker pada leaflet Js sangatlah gampang, kita hanya perlu menambahkan kode dibawah ini pada bagian script JS.

var marker = L.marker([-6.2008024,106.830451,12]).addTo(map);

Penjelasan kode:

var marker = inisialisasi nama variable “marker”

L.marker = L.Marker adalah method untuk membuat marker di leaflet JS.

([-6.2008024,106.830451,12]) = Posisi Latitude,Longitude suatu marker (penanda).

.addTo(map) = Perintah untuk menambahkan marker ke Peta kita.

Kode diatas kita ketikkan di script JS, maka seperti inilah kode script JS kita:

<script>
    var map = L.map('map',{
    center: [-6.2008024,106.830451,12],
    zoom: 15
    });

	var marker = L.marker([-6.2008024,106.830451,12]).addTo(map);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    </script>

Kode lengkapnya ialah seperti ini:

<!DOCTYPE html>
<html>
<head>
<title>Leaflet Web Map</title>

   <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""
    />

    <script
      src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
      integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
      crossorigin=""
    ></script>
<style>
#map {
    width: 960px;
    height:500px;
}
</style>
</head>
<body>
<h1>Peta Leaflet Pertama ku</h1>
    <div id="map"></div>
<script>
    var map = L.map('map',{
    center: [-6.2008024,106.830451,12],
    zoom: 15
    });

	var marker = L.marker([-6.2008024,106.830451,12]).addTo(map); 

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);    
</script>
</body>
</html>

Kustomisasi Icon Marker

Setelah berhasil membuat marker, kita akan belajar untuk mengkustomisasi icon marker dengan method L.icon, pada prakteknya kustomisasi icon marker biasanya digunakan untuk membedakan tempat tempat di suatu daerah, misalnya antara Toko dan Rumah Sakit.

Berikut contoh kode untuk kustom icon marker:

var MIcon = L.icon({
        iconUrl: 'https://joshuafrazier.info/images/firefox.svg',
        iconSize: [38, 95], 
        });

    var marker = L.marker[-6.2008024,106.830451,12],{icon: MIcon}).addTo(map);

Kalian juga bisa memakai icon gambar dari direktori pribadi kalian dengan kode berikut:

var MIcon = L.icon({
        iconUrl: 'leaf-green.png',
        iconSize: [38, 95],
        });

    var marker = L.marker([-6.2008024,106.830451,12],{icon: MIcon}).addTo(map);

Penjelasan kode:

Var MIcon= Inisialisasi icon yang kita buat.

L.icon= method untuk menambahkan kustom marker.

iconUrl= url gambar yang digunakan sebagai kustom marker, gambar bisa dari direktori pribadi maupun internet.

iconSize= ukuran kustom marker.

Kode di atas kita ketikkan di script JS, maka seperti inilah kode script js kita:

<script>
    var map = L.map('map',{
    center: [-6.2008024,106.830451,12],
    zoom: 15
    });

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var MIcon = L.icon({
        iconUrl: 'https://joshuafrazier.info/images/firefox.svg',
        iconSize: [38, 95], 
        });

    var marker = L.marker([-6.2008024,106.830451,12],{icon: MIcon}).addTo(map);
</script>

Kode lengkapnya ialah seperti ini:

<!DOCTYPE html>
<html>
<head>
<title>Leaflet Web Map</title>

   <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""
    />

    <script
      src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
      integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
      crossorigin=""
    ></script>
<style>
#map {
    width: 960px;
    height:500px;
}
</style>
</head>
<body>
<h1>Peta Leaflet Pertama ku</h1>
    <div id="map"></div>
<script>
    var map = L.map('map',{
    center: [-6.2008024,106.830451,12],
    zoom: 15
    });

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var MIcon = L.icon({
        iconUrl: 'https://joshuafrazier.info/images/firefox.svg',
        iconSize: [38, 95], 
        });

    var marker = L.marker([-6.2008024,106.830451,12], {icon: MIcon}).addTo(map);
</script>
</body>
</html>

Menambahkan Pop-up pada Marker

Pop-up umumnya muncul ketika marker diklik, pop-up biasanya digunakan untuk memberi informasi tentang marker tersebut, misalkan pada toko maka pop-upnya adalah nama toko tersebut. Untuk menambahkan pop-up kita menggunakan method .bindPopup().

Kode tersebut kita ketikkan pada L.Marker seperti di bawah ini:

var marker = L.marker([-6.2008024,106.830451,12], {icon: MIcon}).bindPopup('Tulis apa yang anda mau disini...').addTo(map);

Kode lengkapnya seperti ini:

<!DOCTYPE html>
<html>
<head>
<title>Leaflet Web Map</title>

   <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""
    />

    <script
      src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
      integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
      crossorigin=""
    ></script>
<style>
#map {
    width: 960px;
    height:500px;
}
</style>
</head>
<body>
<h1>Peta Leaflet Pertama ku</h1>
    <div id="map"></div>
<script>
    var map = L.map('map',{
    center: [-6.2008024,106.830451,12],
    zoom: 15
    });

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map); 

    var MIcon = L.icon({
        iconUrl: 'https://joshuafrazier.info/images/firefox.svg', 
        iconSize: [38, 95],
        });

    var marker = L.marker([-6.2008024,106.830451,12], {icon: MIcon}) .bindPopup('Belajar Leaflet JS di DosenIT.com').addTo(map);
</script>
</body>
</html>

Jika semua benar maka ketika marker diklik akan muncul “Belajar Leaflet JS di DosenIT.com”.

Terima kasih sudah mengikuti tutorial ini, bagi teman teman yang ingin mempelajari lebih tentang icon pada marker bisa langsung belajar di doc leaflet JS, pada tutorial selanjutnya kita akan membahas tentang lingkaran dan segitiga pada Peta leaflet JS, biasanya pada webGIS digunakan untuk menentukan suatu zona/area.

Membuat Marker (Penanda) Pada Peta Leaflet WebGIS dengan Leaflet #2:

Membuat marker di leaflet JS.

Kustomisasi Icon Marker

Menambahkan Pop-up pada Marker

10 Kampus Swasta Terbaik untuk Kuliah Jurusan Programmer

Tutorial dan Materi WebGIS

You may also like