1

I am a beginner in leaflet.

Basically, I have a circle. I would like to show another circle when clicked on this circle. And hide it again when clicked for the second time. How is that possible?

 //the circle which will haven on click event
    var circle1 = L.circle([44.6663888888889, 6.775],{radius: 150, color:'white',weight:.5, opacity:1,fillColor: '#ff9900',fillOpacity:1});

//the circle to be added when one click on circle 1
    var circle2 = L.circle([44.6502777777778, 6.79333333333333], {radius: 150, color:'white',weight:.5, opacity:1,fillColor: '#008000',fillOpacity:1});
3

You can add a click event to circle1, and then add the logic to add or remove circle2:

//the circle which will haven on click event
var circle1 = L.circle([44.6663888888889, 6.775], { radius: 150, color: 'white', weight: .5, opacity: 1, fillColor: '#ff9900', fillOpacity: 1 });

//the circle to be added when one click on circle 1
var circle2 = L.circle([44.6502777777778, 6.79333333333333], { radius: 150, color: 'white', weight: .5, opacity: 1, fillColor: '#008000', fillOpacity: 1 });

circle1.addTo(map);

circle1.on("click", function (e) {

    //check to see if the circle is already on the map
    //and add/remove as needed

    if (map.hasLayer(circle2)) {
        circle2.remove(map);
    } else {
        circle2.addTo(map);
    }

});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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