tipos - mapas para leaflet

Folleto: ¿Cómo agregar una etiqueta de texto a un icono de marcador personalizado?

Question

¿Es posible agregar texto a un marcador de icono personalizado? Quiero evitar tener que editar el icono en un editor de imágenes solo para agregar el texto.

He creado mi marcador de icono personalizado como tal:

var airfieldIcon = L.icon({
        iconUrl: ''images/airfield.png'',
        iconSize: [48,48]
});

var airfield = L.geoJson (airfield, {
    pointToLayer: function(feature,latlng){
        return L.marker(latlng, {
            icon: airfieldIcon
        })
    }
}).addTo(map);

¿Cómo agregaría el texto "Banff Airfield" como una etiqueta a este icono? ¿Es la forma más fácil y eficiente de usar un editor de imágenes? Si es así, haré ese método, pero me pregunto si hay una mejor manera. ¡Gracias!

Answer 1

A partir de la versión 1.0.0 del folleto, puede agregar una etiqueta sin usar un complemento (el complemento se ha incorporado a la funcionalidad principal).

Ejemplo:

var marker = L.marker(latlng)
    .bindTooltip("Test Label", 
    {
        permanent: true, 
        direction: ''right''
    }
);

Esto produce un marcador en el mapa con una etiqueta de "Etiqueta de prueba" que siempre se muestra a la derecha del icono del marcador.

Answer 2

Podrías usar un L.DivIcon :

Representa un icono ligero para marcadores que utiliza un elemento div simple en lugar de una imagen.

http://leafletjs.com/reference.html#divicon

Ponga su imagen y texto en su HTML, esparza un poco de CSS para que aparezca como usted quiere y listo.

new L.Marker([57.666667, -2.64], {
    icon: new L.DivIcon({
        className: ''my-div-icon'',
        html: ''<img class="my-div-image" src="http://png-3.vector.me/files/images/4/0/402272/aiga_air_transportation_bg_thumb"/>''+
              ''<span class="my-div-span">RAF Banff Airfield</span>''
    })
});

Otra opción es usar el complemento Leaflet.Label:

Leaflet.label es un complemento para agregar etiquetas a marcadores y formas en los mapas de folletos.

• Repositorio: https://github.com/Leaflet/Leaflet.label
• Ejemplo: http://leaflet.github.io/Leaflet.label/