Highlighting features in qgis2leaf export

Question

I have exported a QGIS map to Leaflet using the qgis2leaf plugin. I am looking for some assistance as to how to highlight features (polylines) when the mouse hovers over it. I just want the polyline to stand out (become bold); i only want popups to appear when the feature is clicked (which I have already customized).
I have seen plenty of examples such as the Leaflet Cloropleth tutorial but I have two geojson files in my map that users can click between (so i'm guessing that any 'highlighting' code would need to be entered twice.

The two geojson files are exp_AllRoutesAM and exp_AllRoutesPM. Here is the leaflet code that shows how the exp_AllRoutesPM file is handled.

 function pop_AllRoutesPM(feature, layer) {
            var popupContent = '<b>Survey: ' + feature.properties.Survey + '</b>' + '<br/>' + 'Section: ' + feature.properties.Section + '<br/>' + 'Speed In 2013: ' + feature.properties.OUT_2013 + ' km/h' +'<br/>' + 'Speed In 2012: ' + feature.properties.OUT_2012 + ' km/h' +'<br/>' + 'Speed In 2011: ' + feature.properties.OUT_2011 + ' km/h' + '<br/>' + 'Speed In 2010: ' + feature.properties.OUT_2010 + ' km/h' + '<br/>' + 'Speed In 2009: ' + feature.properties.OUT_2009 + ' km/h' ;
            layer.bindPopup(popupContent);
        }

    var exp_AllRoutesPMJSON = new L.geoJson(exp_AllRoutesPM,{
            onEachFeature: pop_AllRoutesPM,
            style: function (feature) {
                return {weight: feature.properties.radius_qgis2leaf,
                        color: feature.properties.color_qgis2leaf,
                        opacity: feature.properties.transp_qgis2leaf,
                        fillOpacity: feature.properties.transp_fill_qgis2leaf};
                }
            });
                feature_group.addLayer(exp_AllRoutesPMJSON);
                //add comment sign to hide this layer on the map in the initial view.
                exp_AllRoutesPMJSON.addTo(map);

Answer 1

You can do it pretty easy, here's some code:

onEachFeature: function (feature, layer) {
            var content = "";
            content = content + "<b><u>" + feature.id.split('.')[0] + "</b></u><br>";
            delete feature.properties.bbox;
            for (var name in feature.properties) {content = content + "<b>" + name + ":</b> " + feature.properties[name] + "<br>"};
            var popup = L.popup()
                .setLatLng(queryCoordinates)
                .setContent(content)
                .openOn(map);
            layer.bindPopup(content);
            layer.on({
                mouseover: highlightFeature,
                mouseout: resetHighlight
            });
        },                

function highlightFeature(e) {
    var layer = e.target;
    layer.setStyle({
        fillColor: "yellow",
        color: "yellow",
        weight: 5,
        opacity: 1
    });
    if (!L.Browser.ie && !L.Browser.opera) {
        layer.bringToFront();
    }
}
function resetHighlight(e) {
    var layer = e.target;
    layer.setStyle({
        radius: 5,
        fillColor: "yellow",
        color: "yellow",
        weight: 5,
        opacity: 0.6,
        fillOpacity: 0.2
    });
}

This is something I use here: https://github.com/gccgisteam/maps-website/blob/master/stormwater.html#L116

I know that the example is a bit complex. But see how you go, and if you need more help then let me know.

Answer 2

So we had a play around with the code you sent through, although I had some help in writing a different reset. This is what it looks like and it seems to work well.

function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
    fillColor: "yellow",
    color: "yellow",
    weight: 5,
    opacity: 1
});
if (!L.Browser.ie && !L.Browser.opera) {
    layer.bringToFront();
}
}

function resetHighlight(e) {
exp_AllRoutesAMJSON.resetStyle(e.target);
exp_AllRoutesPMJSON.resetStyle(e.target);

}