Menambahkan Highlight Pada Peta Menggunakan Leafletjs - Leaflet

Pada tutorial sebelumnya kita telah membuat peta tematik / choropleth https://komputasistat.blogspot.co.id/2016/11/membuat-peta-tematik-choropleth.html.
Bagaimana jika anda ingin menambahkan highlight pada saat event mouse mouseover atau mouse click ?

Langkah - langkah / cara membuat highlight polygon / daerah tertentu pada peta pada saat mouseover / mouse melintas

Gif 1. Mouseover / highlight

1. MIsal kita menggunakan peta yang bersumber dari tutorial sebelumnya
https://komputasistat.blogspot.co.id/2016/11/membuat-peta-tematik-choropleth.html

2. kemudian tambahkan kode:

Kode pengaturan pewarnaan saat hightlight. (anda dapat mengganti2 sesuai kebutuhan ) :

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);
    }

Kode untuk me-reset style saat mouseut / cursor mouse sudah keluar polygon:

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

Mendefinisikan event apa saja yang ditambahkan (mouseover / mouseout): 

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

agar libary menjalankan event yang sudah ditambahkan ( onEachFeature: onEachFeature)

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

full code:

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);

Sekian dan terimakasih


tutorial ini diambil dari:
http://leafletjs.com/examples/choropleth/

Artikel Terkait javascript ,SISTEM INFORMASI GEOGRAFIS