5

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?

5
  • 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, 2016 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, 2016 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, 2016 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, 2016 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, 2016 at 18:56

2 Answers 2

4

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.
}).setContent("500m").setLatLng([
  48.86,
  2.35 + circle._getLngRadius()
]));

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

1
  • 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, 2016 at 20:37
0

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 })
.addTo(map)
.showLabel(); 
3
  • 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, 2016 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, 2016 at 14:06
  • :-) me too, it could save my bacon
    – Hendrik
    Mar 1, 2016 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.