Membuat Marker dengan Leaflet / Open Street Map

Halo sahabat, lanjutan dari postingan saya Membuat peta dengan leaflet. Kali ini kita lanjutkan tutorialnya untuk Membuat Marker dengan Leaflet.

Pada tutorial kali ini, kita akan belajar bagaimana menambahkan marker pada peta kita.

Persiapan

Siapkan gambar yang akan kita gunakan untuk markernya. Biasanya leaflet menggunakan dua gambar. Satu untuk markernya, satunya untuk bayangannya.

Ok, kita lanjutkan ke gambarnya. Disini kita gunakan sample gambar dari leaflet sendiri. ada 3 gambar.

Anda bisa mengunduhnya disini:

• green
• red
• orange
• shadow

Membuat Icon

var greenIcon = L.icon({
    iconUrl: 'leaf-green.png',
    shadowUrl: 'leaf-shadow.png',

    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

Define Icon Class

var LeafIcon = L.Icon.extend({
    options: {
        shadowUrl: 'leaf-shadow.png',
        iconSize:     [38, 95],
        shadowSize:   [50, 64],
        iconAnchor:   [22, 94],
        shadowAnchor: [4, 62],
        popupAnchor:  [-3, -76]
    }
});

var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'}),
    redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}),
    orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'});

Sentuhan Terakhir

 var map = L.map('map', {
            center: [-6.991576, 109.122923],
            zoom: 13
        });

        L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=Ts9g8McLuNVEfjGFTHeG', {
            attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>'
        }).addTo(map);

        var LeafIcon = L.Icon.extend({
            options: {
                shadowUrl: 'imgs/leaf-shadow.png',
                iconSize:     [38, 95],
                shadowSize:   [50, 64],
                iconAnchor:   [22, 94],
                shadowAnchor: [4, 62],
                popupAnchor:  [-3, -76]
            }
        });

        var greenIcon = new LeafIcon({iconUrl: 'imgs/leaf-green.png'}),
        redIcon = new LeafIcon({iconUrl: 'imgs/leaf-red.png'}),
        orangeIcon = new LeafIcon({iconUrl: 'imgs/leaf-orange.png'});

        L.marker([-6.993347, 109.126950], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf.");
        L.marker([-6.994082, 109.129739], {icon: redIcon}).addTo(map).bindPopup("I am a red leaf.");
        L.marker([-6.990121, 109.127797], {icon: orangeIcon}).addTo(map).bindPopup("I am an orange leaf.");

Ok, semuanya telah disiapkan dan sudah dapat digunakan dengan baik. Saya akan membuat video tutorial yang akan saya upload di Youtube saya.

Jika kurang jelas, bisa dilihat di video dibawah.