Leaflet JS - Añadir texto a los círculos

Question

Estoy tratando de crear un mapa utilizando Leaflet con círculos que indican las distancias en el mapa en el nivel de zoom actual (escala del mapa). Véase la ilustración siguiente:

Sé cómo calcular los tamaños y actualizar los propios círculos, pero me cuesta añadir el texto a los círculos.

He probado el plugin leaflet.label pero no era una opción porque no admite etiquetas estáticas para los vectores .

La alternativa parece ser usar un divIcon, pero esto parece ser una manera muy torpe de resolver mi problema, ya que tendré que editar las opciones del divIcon, dentro de un marcador en cada evento de zoom.

¿Qué me aconseja?

Answer 1

Si no le gusta el divIcon tenga en cuenta que también puede añadir directamente un Folleto.etiqueta al mapa, sin tenerlo ligado a un marcador / vector primero, aunque este no sea su propósito inicial.

Esto es similar a añadir ventanas emergentes directamente en el mapa. Pero como esto no estaba previsto, hay que establecer manualmente el contenido, la posición y la adición al mapa:

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()
]));

Demostración: http://jsfiddle.net/ve2huzxw/166/

Answer 2

Utilizando el Plugin Leaflet.Label :

Para crear una etiqueta que se active al pasar por encima:

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

Para crear una etiqueta que esté siempre encendida (estática):

L.[datatype]([Lat,Long]).bindLabel('some text', { noHide: true })
.addTo(map)
.showLabel();