Increase the radius of circle based on the slider value

Question

I have a map with a single marker at the moment. I have created a circular radius around this marker. This implies the service area of given marker position.

I have implemented a slider below the map. Now, I am trying to increase the radius of circle based on sliding this slider.

I have no idea how to start.

Can anybody help me?

var myloc = new L.LatLng(39.9042, 116.4074);
var map = L.map('map').setView(myloc, 15);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  maxZoom: 18,
  id: 'mapbox.streets',
  accessToken: 'pk.eyJ1Ijoic2FuaW5kcmEiLCJhIjoiY2pqam5qZzZnMHRycTNrbWR3ZGF4Mmd5eSJ9.ZRIVhopMmACa80OQ0yZN3g'
}).addTo(map);

var marker = L.marker(myloc).addTo(map);

var marker = L.marker(myloc).addTo(map);

var circle = L.circle(myloc, {
  color: '#f03',
  weight: 0.1,
  fillColor: '#f03',
  fillOpacity: 0.4,
  radius: 100
}).addTo(map);

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}



function clickCircle(e) {
  var clickedCircle = e.target;
}

$('#myRange').on('change', function() {
  clickCircle();
})

#map {
  width: 400px;
  height: 200px;
  border: 1px solid #AAA;
}

.search-scope {
  margin-top: 10px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"></script>

<div id="map"></div>

<div class="search-scope">
  <input type="range" min="100" max="1000" value="100" class="slider" id="myRange">
  <p>Radius:
    <span id="demo"></span>
  </p>
</div>

Answer 1

From the Leaflet docs:

circle.setRadius(<Number> radius);

So, you can use the function you already have for changing output.innerHTML:

$('#myRange').on('input', function(event) {
  output.innerHTML = event.target.value;
  circle.setRadius(event.target.value);
});

Full working snippet:

var myloc = new L.LatLng(39.9042, 116.4074);
var map = L.map('map').setView(myloc, 15);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  maxZoom: 18,
  id: 'mapbox.streets',
  accessToken: 'pk.eyJ1Ijoic2FuaW5kcmEiLCJhIjoiY2pqam5qZzZnMHRycTNrbWR3ZGF4Mmd5eSJ9.ZRIVhopMmACa80OQ0yZN3g'
}).addTo(map);

var marker = L.marker(myloc).addTo(map);

var marker = L.marker(myloc).addTo(map);

var circle = L.circle(myloc, {
  color: '#f03',
  weight: 0.1,
  fillColor: '#f03',
  fillOpacity: 0.4,
  radius: 100
}).addTo(map);

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

$('#myRange').on('input', function(event) {
  output.innerHTML = event.target.value;
  circle.setRadius(event.target.value);
});

#map {
  width: 400px;
  height: 200px;
  border: 1px solid #AAA;
}

.search-scope {
  margin-top: 10px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"></script>

<div id="map"></div>

<div class="search-scope">
  <input type="range" min="100" max="1000" value="100" class="slider" id="myRange">
  <p>Radius:
    <span id="demo"></span>
  </p>
</div>

Answer 2

Simply just use the .setRadius(radius) method like so circle.setRadius(this.value);. You will need to do this when the slider changes, so in the slider.oninput function

See a working example below:

var myloc = new L.LatLng(39.9042, 116.4074);
var map = L.map('map').setView(myloc, 15);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  maxZoom: 18,
  id: 'mapbox.streets',
  accessToken: 'pk.eyJ1Ijoic2FuaW5kcmEiLCJhIjoiY2pqam5qZzZnMHRycTNrbWR3ZGF4Mmd5eSJ9.ZRIVhopMmACa80OQ0yZN3g'
}).addTo(map);

var marker = L.marker(myloc).addTo(map);

var marker = L.marker(myloc).addTo(map);

var circle = L.circle(myloc, {
  color: '#f03',
  weight: 0.1,
  fillColor: '#f03',
  fillOpacity: 0.4,
  radius: 100
}).addTo(map);

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;


slider.oninput = function() {
  output.innerHTML = this.value;
  circle.setRadius(this.value); // Sets the radius of the circle to be the value of the slider
}

function clickCircle(e) {
  var clickedCircle = e.target;
}

/* Removed as was causing error */
/*$('#myRange').on('change', function() {
  clickCircle();
})*/

#map {
  width: 400px;
  height: 200px;
  border: 1px solid #AAA;
}

.search-scope {
  margin-top: 10px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"></script>

<div id="map"></div>

<div class="search-scope">
  <input type="range" min="100" max="1000" value="100" class="slider" id="myRange">
  <p>Radius:
    <span id="demo"></span>
  </p>
</div>