I am trying to create a map using Leaflet with circles that indicate distances on the map at current zoom level (map scale). See illustration below:

Circles for map scale

I know how to calculate sizes and update the circles themselves, but I am struggling to add the text to the circles.

I have tried the leaflet.label plugin but this wasn't an option because it doesn't support static labels for Vectors.

The alternative seems to be to use a divIcon, but this seems to be a very clunky way to solve my problem, as I will have to edit the options of the divIcon, inside a marker on each zoom event.

What would you advise?

  • I liked the divIcon workaround… Why do you say you would need to change it after each zoom? If your circle stays the same, so the divIcon, is not it? Note: be careful with circles at low zoom levels, default Leaflet CRS (i.e. Web Mercator EPSG:3857) represents length differently in vertical compared to horizontal. See also How to draw Tissot's ellipse (Tissot's indicatrix) in Leaflet. – ghybs Mar 1 '16 at 18:12
  • I would have to at least update the text to reflect the different distance each circle represents at different zoom levels. In my current implementation (in OpenLayers) I am using some logic that resizes the circles slightly after each zoom, so their distance value is a multitude of ten. To me this made sense, a circle representing 10.37291 miles is not to a helpful scale line. So I would have to update both position and text. – Hendrik Mar 1 '16 at 18:40
  • If I understand your comment correctly, you change the circle when zoom changes? In that case, you would "just" need an extra step in the function that resizes your circles, so that it also updates the labels accordingly (position and text indeed). But even a plugin that draws your new circle with text would have to do that step anyway. – ghybs Mar 1 '16 at 18:45
  • Yes I suppose that's true... I was just hoping for some more out-of-the-box functionality, like OpenLayers offers. I guess this is the price to pay for having a much lighter library footprint. – Hendrik Mar 1 '16 at 18:50
  • To be fair, a plugin with that functionality could implement it using only SVG, so the position would be computed in pixels rather than using an extra latitude/longitude conversion. Could be worth a Leaflet plugin, if it does not exist yet. – ghybs Mar 1 '16 at 18:56

If you do not like the divIcon workaround, be noted that you can also directly add a Leaflet.label to the map, without having it bound to a marker / vector first, even though this is not its initial purpose.

This is similar to adding pop-ups directly to the map. But since this was not expected, you have to manually set the content, position and adding to map:

L.marker([48.86, 2.35]).addTo(map); // The center.

var circle = L.circle([48.86, 2.35], 1000, {
  fill: false
}).addTo(map); // Your circle.

map.addLayer(new L.Label({ // label.addTo(map) is not implemented.
  noHide: true, // Force label to be shown permanently.
  offset: [6, -15] // Counter-act label CSS styling.
  2.35 + circle._getLngRadius()

Demo: http://jsfiddle.net/ve2huzxw/166/

  • 1
    Thanks so much, this will enable me to achieve what I wanted :-) I made a slight revision to your fiddle that shows I can also reference the label through a variable, which will come in handy when I need to update it on each zoomend: jsfiddle.net/hendrikdegraaf/0158vps4 – Hendrik Mar 1 '16 at 20:37

Using the Leaflet.Label plugin:

To Create a label that turns on on hover:

L.[datatype]([Lat,Long]).bindLabel('some text').addTo(map); 

To Create a label that is always on (static):

L.[datatype]([Lat,Long]).bindLabel('some text', { noHide: true })
  • Thanks for the quick reply, but leaflet.label doesn't support static labels for Vectors as I mention in my post. I had tried this already..... I would be delighted to be proven wrong... – Hendrik Mar 1 '16 at 14:05
  • ahhhhhh now I see what is going on! ya I have no answer for the vector side of it...I am interested to see a response though! – MDHald Mar 1 '16 at 14:06
  • :-) me too, it could save my bacon – Hendrik Mar 1 '16 at 14:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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