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

Share Improve this question Follow edited Jan 31, 2019 at 8:55 kboul 14.6k55 gold badges4747 silver badges5858 bronze badges asked Jan 9, 2014 at 19:36 wbendwbend 5511 silver badge44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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