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.