Create a gist now

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">
<html>
<head>
<title>Click Circle</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<style type="text/css">
#map {
height: 500px;
}
</style>
</head>
<body>
<h1></h1>
<div id="map"></div>
<script type="text/javascript">
var map = L.map('map', {
center: [33.8, -84.4],
zoom: 11
});
L.tileLayer('http://tile.cloudmade.com/YOUR_API_KEY/29889/256/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
maxZoom: 18
}).addTo(map);
// click circle:
var clickCircle;
function onMapClick(e) {
if (clickCircle != undefined) {
map.removeLayer(clickCircle);
};
clickCircle = L.circle(e.latlng, 1609 * 3, {
color: '#f07300',
fillOpacity: 0,
opacity: 0.5
}).addTo(map);
}
map.on('click', onMapClick);
</script>
</body>
</html>

What is 1609*3 value?

shanyuk commented Sep 24, 2017

How to remove lots circlemarks by one click?

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