How to make highlighted polygons when click on Leaflet map from qgis2web plugin?

Question

I have generated the Leaflet web map using qgis2web plugin in qgis software. The map contain polygons. Now I want the polygons to be highlighted when I click on each and to stay highlighted until I click on another one. I want to know which part of code I should change. I have tried to turn on option "Highlight on hover" when I run qgis2web plugin but that polygon is highlighted just on hover not on click.

Note that I am using qgis 3.0 and the last version of qgis2web

Answer 1

This is largely answered in here: https://stackoverflow.com/questions/21029533/reset-style-on-leaflet-polygon-on-click#21032302. However, here's how to do it specifically in a qgis2web Leaflet export.

First, make sure "Highlight on hover" is checked when you export your map with qgis2web. Next, edit index.html from your exported map. Find the following code:

function highlightFeature(e) {
    highlightLayer = e.target;

Replace it with:

function highlightFeature(e) {
    if (highlightLayer) {
        for (i in e.target._eventParents) {
            e.target._eventParents[i].resetStyle(highlightLayer);
        }
    }
    highlightLayer = e.target;

Next find the following code:

layer.on({
    mouseout: function(e) {
        for (i in e.target._eventParents) {
            e.target._eventParents[i].resetStyle(e.target);
        }
    },
    mouseover: highlightFeature,
});

Replace it with this:

layer.on({
    click: highlightFeature,
});

That should do it.