Leaflet - Change style on click

Question

I have an extern geojson file (points) and I would like to display a circle for each point coordinates and get a bigger circle on a mouse click, with a popup.

I have no problem to load the geojson and to view the circle markers, but I can't get both bigger cricle and popup.

Here is part of my code :

function clickFeature(e) {
                    if(clickedFeature) {clickedFeature.setRadius(3)}
                    var layer = e.target;
                    e.target.setRadius(5);
                    clickedFeature = e.target;
                    info.update(layer.feature.properties)
                    }   
function onEachFeature(feature, layer) {
                                    layer.bindPopup(feature.properties.PROPERTY).addTo(MyLayer);
                                    layer.on({click: clickFeature,})
                                    }

MyGeojson = new L.geoJson(mygeojson, {
    onEachFeature: onEachFeature,       
    pointToLayer: function (feature, latlng) {
    return L.circleMarker(latlng, {
                radius: 3,
                fillColor: getColor(feature.properties.TYPE),
                color: "#242121",
                opacity: 1,
                weight: 1.5,
                fillOpacity: 1
            });
        }
    }).addTo(map);

First I had this same kind of functions and code, but using PNG icon instead of circleMarkers, and it worked well, both bigger icon and popup on mouse click.

Any idea what is wrong ?

Answer 1

A couple of edits and suggestions that might help you. I am sure there is a more elegant way to do this, but I tested it and it works.

You have to check first if the variable clickedFeature is already defined. One way to do that is by checking what type it is. If the type is not defined yet, then the variable isn't defined yet.

function clickFeature(e) {
                    if (typeof clickedFeature != 'undefined') {clickedFeature.setRadius(3)}

You have to define the function update. info.update does not make sense in this case.

                    var layer = e.target;
                    e.target.setRadius(5);
                    clickedFeature = e.target;
                    update(feature.properties.PROPERTY)
                    }   


    var update = function (feature, latlng) {
        return L.circleMarker(latlng)
};

You don't have to add it to your layer again, since the function is called when the layer is created. So I deleted .addTo(MyLayer).

function onEachFeature(feature, layer) {
                                layer.bindPopup(feature.properties.name);
                                layer.on({click: clickFeature,})
                                }