I have a circle marker var circle = L.circleMarker(latLngCoords, { radius: 5, weight: 1, color: 'black' }).addTo(map);
that changes the radius based on the map zoom:
map.on('zoomend', function (e) {
var newRadius = map.getZoom() > 6 ? map.getZoom() * 2 : 5;
circle.setRadius(newRadius);
});
I've tried to add a small label on the side of the circle (next to the circle line)
var circleText = L.marker(latLngCoords, {
icon: L.divIcon({
html: '<div class="txt">' + myText + '</div>',
className: 'circle-with-txt',
iconSize: [40, 40]
})
});
.circle-with-txt {
position: relative;
color: white;
font-size: 12px;
font-weight: bold;
width: 40px;
height: 40px;
}
.txt {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 16px;
}
but when the circle marker radius changes the labels remain in the same area.
Is there a way to keep the label position relative to the circle marker (close to the circle line), even if the circle changes its radius?
Edit: I'm trying to achieve something like
that keeps the small label position related to the circle even if the circle radius changes on map zoom.