<!DOCTYPE html>
<html>
<head>
<title>Dynamic circle in Leaflet</title>
</head>
<body>
<!-- https://jf-blog.fr/cercle-dynamique-dans-leaflet -->
<div class="row">
<div class="col-xs-6">
<input type="number" class="kilometres" name="kilometres" min="0" max="100" placeholder="15" value="15" />
<input type="range" class="range" name="range" min="0" max="100" step="1" value="15" />
</div>
<div class="col-xs-6">
<div id="mapid"></div>
</div>
</div>
</body>
</html>
map();
function map() {
let set = 10;
let zoom = 9;
let circles;
let entreprise = [43.600000, 1.433333];
let mymap = L.map('mapid').setView(entreprise, zoom);
let osmLayer = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 18
});
mymap.addLayer(osmLayer);
L.marker(entreprise).addTo(mymap);
// On retranscrit la valeur du input range dans le input Number (et inversement)
$('.range').on('input', function() {
set = $(this).val();
$('.kilometres').val(set);
});
$('.kilometres').on('input', function() {
set = $(this).val();
$('.range').val(set);
});
circles = L.circle(entreprise, 1000*set, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(mymap);
$( ".range, .kilometres" ).on('input', function() {
if(mymap.hasLayer(circles))
mymap.removeLayer(circles);
circles = L.circle(entreprise, 1000*set, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(mymap);
});
}
