Add text on the circle created by the leaflet L.circle() function - leaflet

Question

I use the following function to create a series of circles around a clicked point on a leaflet map. I would like to label each circle by placing the distance (r or radius) on the circle line itself. But I can't find any option or function to do this. Can someone tell me how?
function circleKoords(e) {
var myJSON = JSON.stringify(e.latlng);
//alert("myJSON "+myJSON);
// myJSON {"lat":39.257778150283364,"lng":-94.41925048828126}
// myJSON {"lat":39.39587712612034,"lng":-93.54583740234376}
var LatLng = e.latlng;
var lat = e.latlng["lat"]; //alert(lat); // 39.172658670429946
var lng = e.latlng["lng"]; //lert(lng);
var i;
var r = 1609.34; // in meters = 1 mile, 4,828.03 meters in 3 miles
//https://jsfiddle.net/3u09g2mf/2/
//https://gis.stackexchange.com/questions/240169/leaflet-onclick-add-remove-circles
var group1 = L.featureGroup(); // Allows us to group the circles for easy removal
var circleOptions = {
color: 'blue',
fillColor: '#69e',
fillOpacity: 0.1
}
var milesbetween = 0; var numberofrings = 0;
var milesbetween = prompt("How many miles between circles?");
if (milesbetween <= 0) {milesbetween = 1;}
var numberofrings = prompt("How many circles do you want to see?");
if (numberofrings <= 0) {numberofrings = 5;}
// The actual circles are created here at the var Cname =
for (i=0 ; i < numberofrings; i++ ) {
var Cname = 'circle'+i; //alert(Cname); // circle0, circle1, circle2, etc.
r = (r * i) + r; r=r*milesbetween;
//alert(lat+", "+lng); // lat and lng of clicked point.
//alert('r= '+r); // r= 1609.34, r= 3218.68, r= 4828.0199999999995, etc. up to the number of rings
var Cname = L.circle([lat, lng], r, circleOptions);
Cname.addTo(group1);
// r = 1609.34; // reset r so r calculation above works for each 1 mile step
map.addLayer(group1);
r = 1609.34;
}
alert("All "+numberofrings+" rings are "+milesbetween+" mile apart.");
// This part allows us to delete the circles by simply clicking anywhere in the circles.
group1.on('click', function() {
if(map.hasLayer(group1)) {map.removeLayer(group1);}
//else {map.addLayer(group1);}
});
}

Answer 1

Can you try putting this after "var Cname = L.circle([lat, lng], r, circleOptions);"? This attempts to add a label to the same coordinates with the text "radius" followed by the computed radius value.
var label = L.marker([lat, lng], {
icon: L.divIcon({
className: 'label',
html: `radius ${r}`,
iconSize: [0, 0]
})
});
label.addTo(group1);

Answer 2

Add the L.GeometryUtil library:
<script src="https://cdn.jsdelivr.net/npm/leaflet-geometryutil#0.9.1/src/leaflet.geometryutil.min.js"></script>
Update your circle loop to:
// The actual circles are created here at the var Cname =
for (i=0 ; i < numberofrings; i++ ) {
var Cname = 'circle'+i; //alert(Cname); // circle0, circle1, circle2, etc.
r = (r * i) + r; r=r*milesbetween;
//alert(lat+", "+lng); // lat and lng of clicked point.
//alert('r= '+r); // r= 1609.34, r= 3218.68, r= 4828.0199999999995, etc. up to the number of rings
var Cname = L.circle([lat, lng], r, circleOptions);
Cname.addTo(group1);
mymap.addLayer(group1);
//180° from top
var p_c = L.GeometryUtil.destination(L.latLng([lat, lng]),180,r);
var icon = L.divIcon({ className: 'dist-marker', html: r.toFixed(0)+';iles', iconSize: [null, 16] });
var marker = L.marker(p_c, { title: r.toFixed(0)+'Miles', icon: icon});
marker.addTo(mymap);
// r = 1609.34; // reset r so r calculation above works for each 1 mile step
r = 1609.34;
}
CSS:
.dist-marker {
margin-left: -8px !important;
font-size: 9px;
border: 1px solid #777;
border-radius: 10px;
text-align: center;
color: #000;
background: #fff;
padding: 0 3px;
}
https://jsfiddle.net/falkedesign/3aukgm7t/