1

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

this

that keeps the small label position related to the circle even if the circle radius changes on map zoom.

1 Answer 1

0

Simple way of achieving what you want would be using permanent marker tooltip for marker label, with horizontal offset equal to marker radius. Upon zoomend marker tooltip is redefined with new offset.

To have plain label without tooltip style, custom style have to be used. To have label at 45 degrees, some Cartesian math have to be applied to offset.

Code could then look something like this (tested).

CSS

.marker-label {
  background-color: transparent;
  padding: 0px;
  border: none;
  box-shadow: none;
  margin-left: 0px !important;
}
.marker-label:before {
  border-right-color: transparent !important;
}

JS:

function markerRadius() {
  return(map.getZoom() > 15 ? 24 : 12);
}

function markerLabel(marker, txt) {
  var radius = marker.getRadius() + 4;
  var offset = Math.sqrt((radius**2)/2);
  marker.bindTooltip(txt, {
    direction: 'right',
    offset: L.point(offset, -offset),
    className: 'marker-label',
    permanent: true
  });
}

var circleMarker = L.circleMarker([-37.7612, 175.2856], {
  color: "#f00",
  radius: markerRadius()
}).addTo(map);
markerLabel(circleMarker, "Hello World!");

map.on('zoomend', function (e) {
  var newRadius = markerRadius();
  circleMarker.setRadius(newRadius);
  var txt = circleMarker.getTooltip().getContent();
  markerLabel(circleMarker, txt);
});
3
  • I was looking for something small, like a hint, near the circle marker, that doesn't have the white background from tooltip
    – LAffair
    Jun 14, 2022 at 10:31
  • Edited my question - added an image as an example
    – LAffair
    Jun 14, 2022 at 10:40
  • See modified answer.
    – TomazicM
    Jun 14, 2022 at 15:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.