Tagged with addTo

Add and Remove Leaflet Circle on Click

Similar to the popup example in the Leaflet tutorial, you might want to allow a user to add a circle centered on the point they click.

After defining your map, you first need to declare the variable you'll be using:

var clickCircle;

While popups automatically disappear on the next click, circles do not. The following code removes the former circle from the leaflet map before drawing the new circle:

function onMapClick(e) {
    if (clickCircle != undefined) {
        map.removeLayer(clickCircle);
    };

Next, we want our function to draw the new circle (NB: "1609 * 3" is the radius of the circle. This makes the radius equal 3 miles):

    clickCircle = L.circle(e.latlng, 1609 * 3, {
        color: '#f07300',
        fillOpacity: 0,
        opacity: 0.5
  }).addTo(map);
}

And finally, we need to add an event listener so that the function will be run when a user clicks on the map:

map.on('click', onMapClick);

The full code is available in a gist.

References

Tagged , , , , ,