I have a map made with leaflet.js with a geoJSON layer consisting of 70-some polygons. Each time the user clicks on a polygon, it is highlighted and a side panel is filled with data and opened:

function clickFeature(e) {
    var layer = e.target;
        layer.setStyle({
        weight: 3,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    });

    info.update(layer.feature.properties);
    $( "#mypanel" ).panel("open");
}

That works fine. But I need to change it so that each time a polygon is clicked, it simultaneously gets highlighted AND the previously clicked polygon returns to the original style, so only one polygon is ever "selected" at a time.

I've tried this, but it doesn't work (the panel is no longer updated or opened):

var lastClickedLayer;
function clickFeature(e) {
    geojson.resetStyle(lastClickedLayer);
    var layer = e.target;
        layer.setStyle({
        weight: 3,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    });

    info.update(layer.feature.properties);
    $( "#mypanel" ).panel("open");
    layer = lastClickedLayer;
}

Any help very appreciated.

I have a map made with leaflet.js with a geoJSON layer consisting of 70-some polygons. Each time the user clicks on a polygon, it is highlighted and a side panel is filled with data and opened:

function clickFeature(e) {
    var layer = e.target;
        layer.setStyle({
        weight: 3,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    });

    info.update(layer.feature.properties);
    $( "#mypanel" ).panel("open");
}

That works fine. But I need to change it so that each time a polygon is clicked, it simultaneously gets highlighted AND the previously clicked polygon returns to the original style, so only one polygon is ever "selected" at a time.

I've tried this, but it doesn't work (the panel is no longer updated or opened):

var lastClickedLayer;
function clickFeature(e) {
    geojson.resetStyle(lastClickedLayer);
    var layer = e.target;
        layer.setStyle({
        weight: 3,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    });

    info.update(layer.feature.properties);
    $( "#mypanel" ).panel("open");
    layer = lastClickedLayer;
}

Any help very appreciated.

• javascript
• leaflet
• mapbox

1 Answer 1

Your assignment is wrong, it has to be

lastClickedLayer = layer;

You also should add an additionally check if lastClickedLayer has already been set:

if(lastClickedLayer){
   geojson.resetStyle(lastClickedLayer);
}