Cómo agregar etiquetas de solo texto en el mapa de folleto sin icono

22

Estoy buscando una manera de mostrar texto en el mapa de folleto usando marcadores o cualquier otra cosa sin mostrar ningún ícono. Quiero mostrar solo texto y poder estilizarlo y rotarlo ... ¿Alguna sugerencia?

leaflet

— Etienne Desgagné
fuente

1

@NikhilVJ: las preguntas y respuestas no tratan sobre cómo obtener información sobre herramientas sin tener un marcador correspondiente. Las respuestas aquí discuten cómo tener solo el texto, sin marcador visible.

— ToolmakerSteve

ah lo siento mal

— Nikhil VJ

19

Resolví mi problema usando la función Leaflet L.DivIcon que representa un ícono liviano para marcadores que usa un elemento div simple en lugar de una imagen ... Estos marcadores tienen un html y una opción className que me permite crear etiquetas con CSS controlado estilos ...

— Etienne Desgagné
fuente

11

¿Te importaría proporcionar un poco de código para esto?

— mastov

Esta respuesta no es idea si quieres una etiqueta Y un marcador

— Roy

@Roy: esa es una situación diferente; Ver L.Tooltip . Si desea que la etiqueta (la información sobre herramientas) se muestre siempre, establezca la opción permanente en verdadero.

— ToolmakerSteve

16

Actualización para Leaflet 1.0: a partir de Leaflet 1.0, el complemento Leaflet.label está depracado, ya que se ha incluido con el núcleo de Leaflet como L.Tooltip. No es necesario incluir el script de origen, y la sintaxis ha cambiado ligeramente. Uso de la muestra:

var marker = new L.marker([39.5, -77.3], { opacity: 0.01 }); //opacity may be set to zero
marker.bindTooltip("My Label", {permanent: true, className: "my-label", offset: [0, 0] });
marker.addTo(map);

El estilo CSS se puede aplicar a la clase de la misma manera que antes.

.my-label {
    position: absolute;
    width:1000px;
    font-size:20px;
}

También parece que la opacidad del marcador se puede establecer completamente en 0.

Antes del folleto 1.0: utilice el complemento Leaflet.label (ya mencionado por geomajor56).

<script src="scripts/leaflet.label.js"></script>

Con el complemento de etiqueta de folleto, las etiquetas están directamente vinculadas a los marcadores, pero puede establecer la opacidad del marcador en casi cero para que solo la etiqueta sea visible. (Si establece la opacidad del marcador en 0, la etiqueta asociada también desaparecerá).

var marker = new L.marker([39.5, -77.3], { opacity: 0.01 });
marker.bindLabel("My Label", {noHide: true, className: "my-label", offset: [0, 0] });
marker.addTo(map);

Luego puede usar CSS para diseñar sus etiquetas como mejor le parezca:

.my-label {
    position: absolute;
    width:1000px;
    font-size:20px;
}

— James Lawruk
fuente

— Marcin Kosiński

@ MarcinKosiński: Sí, deberá descargar leaflet.label.js del enlace de GitHub en la publicación y colocarlo en una subcarpeta de su sitio web llamado scripts. O bien, puede reemplazar la URL en el código con el archivo alojado en leaflet.github.io/Leaflet.label/leaflet.label.js (también puede querer el archivo CSS; mismo nombre y ubicación, extensión diferente).

— KeithS

Traté de hacer esto, ¿alguna idea de cómo eliminar el fondo y el borde? snag.gy/JdnpyV.jpg

— WantIt

Cuando se usa L.Tooltipdentro de onEachFeature, aparece el error: "Error de tipo no capturado: no se pudo ejecutar 'appendChild' en 'Nodo': el parámetro 1 no es del tipo 'Nodo'".

— Nikhil VJ

Resuelto, estaba usando una de las propiedades de la característica como texto, tenía que agregar un .toString()al final. marker.bindTooltip(feature.properties['prabhag_number'].toString(), {...

— Nikhil VJ

4

Puede comenzar aquí con este complemento de folleto . Probablemente cree o edite un marcador a su gusto. ¿El texto proviene de atributos de características?

— geomajor56
fuente

Esto responde una pregunta diferente a la que se hizo. Así es como agregar una etiqueta a un marcador existente ; es no una explicación de cómo tener solamente una etiqueta - ningún símbolo marcador.

— ToolmakerSteve

0

marker.bindTooltip("text here", { permanent: true, offset: [0, 12] });

Esto funciona para mi

— Sathish Kumar Arunachalam
fuente

Esto responde una pregunta diferente a la que se hizo. Así es como agregar una etiqueta a un marcador existente ; es no una explicación de cómo tener solamente una etiqueta - ningún símbolo marcador.

— ToolmakerSteve