Tutorial Menambahkan Highlight Pada Peta Menggunakan Leafletjs – Leaflet

Pada postingan sebelumnya, kita telah membahas Cara Sederhana Membuat Peta Tematik / Choropleth Menggunakan Leaflet JS -Leaflet. Mari kita lanjutkan untuk menambahkan highlight pada peta menggunakan leafletjs – Leaflet.

Buat sebuah function highlightFeature()

function highlightFeature(e) {
        var layer = e.target;

        layer.setStyle({
            weight: 5,   //ketebalan garis
            color: '#666', //warna garis
            dashArray: '', 
            fillOpacity: 0.7, //tingkat transparansi
            fillColor: "#2262CC" // warna polygon saat hightlight
        });

        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
            layer.bringToFront();
        }

        info.update(layer.feature.properties);
    }

Definisikan function resetHighlight()

      function resetHighlight(e) {
        geojson.resetStyle(e.target);
        info.update();
    }

Definisi function onEachFeature, event apa saja yang ada didalam function setelah mouse masuk dan keluar peta

 function onEachFeature(feature, layer) {
        layer.on({
            mouseover: highlightFeature,
                mouseout: resetHighlight
            //click: zoomToFeature
        });
    }

Kode untuk memanggil library geojson.

geojson = L.geoJson(statesData, {
        style: getStyle,
        onEachFeature: onEachFeature
    }).addTo(m);

Full source code menambahkan highlight pada peta menggunakan leafletjs

geojson = L.geoJson(statesData, {
        style: getStyle,
        onEachFeature: onEachFeature
    }).addTo(m);
 function onEachFeature(feature, layer) {
        layer.on({
            mouseover: highlightFeature,
                mouseout: resetHighlight
            //click: zoomToFeature
        });
    }
        function resetHighlight(e) {
        geojson.resetStyle(e.target);
        info.update();
    }
function highlightFeature(e) {
        var layer = e.target;

        layer.setStyle({
            weight: 5,
            color: '#666',
            dashArray: '',
            fillOpacity: 0.7,
            fillColor: "#2262CC"
        });

        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
            layer.bringToFront();
        }

        info.update(layer.feature.properties);
    }To(m);

Leave a Reply