I am beginer with Leaflet library and I am facing an issue with a geojson.

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 ?

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 ?

I am beginer with Leaflet library and i am facing an issue with a geojson.

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 ? Thanks for the help !

I am beginer with Leaflet library and I am facing an issue with a geojson.

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 ?