2

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

2 Answers 2

3

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.

5
  • Hi Alex,Thanks for the reply. I've very much a newbie in this area. In your example I think i'm right in saying that this code highlights a feature and brings up a popup once you have clicked on it? The part i'm confused about is that I already have an 'onEachFeature' line in my code. Dec 1, 2014 at 21:10
  • You can have more than one thing happening at 'onEachFeature'. Where my code says 'layer.on({mouseover: highlightFeature ...' you should be able to get that in your code, and try replacing the actual functions with something like 'console.log('test')'. Ensure that you get into Chrome and its debugging tools, they're great! In order to get stuff happening best, would you like to share all your code somewhere? Then I can get a working example happening in your code.
    – Alex Leith
    Dec 2, 2014 at 3:08
  • 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); }' Dec 2, 2014 at 5:14
  • Can you put this in your original question or as a reply? That way others can read it better. Glad you got it working!
    – Alex Leith
    Dec 2, 2014 at 5:17
  • Sure. Newbie error! Dec 2, 2014 at 5:21
1

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

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.