Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Add and Remove Leaflet Circle on Click
<!DOCTYPE html>
<meta charset="utf-8">
<title>Click Circle</title>
<link rel="stylesheet" href="" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="" />
<script src=""></script>
<style type="text/css">
#map {
height: 500px;
<div id="map"></div>
<script type="text/javascript">
var map ='map', {
center: [33.8, -84.4],
zoom: 11
L.tileLayer('{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="">OpenStreetMap</a> contributors, <a href="">CC-BY-SA</a>, Imagery © <a href="">CloudMade</a>',
maxZoom: 18
// click circle:
var clickCircle;
function onMapClick(e) {
if (clickCircle != undefined) {
clickCircle =, 1609 * 3, {
color: '#f07300',
fillOpacity: 0,
opacity: 0.5
map.on('click', onMapClick);
Copy link

MarcoDiGioia commented Jul 4, 2017

What is 1609*3 value?

Copy link

qxang commented Sep 24, 2017

How to remove lots circlemarks by one click?

Copy link

MichaelPolla commented Nov 28, 2017

@Shanyuk : you could first put your circles (or whatever) into one or more LayerGroup, and remove the corresponding LayerGroup from your map when a click occurs on one of its circle. See these Layer Groups examples

Copy link

ikunyemingor commented Jul 11, 2018

@MarcoDiGioia 1609 is metre equivalent to 1 mile so 1609 * 3 converts 3 miles to metre

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment