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

Respuestas:

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
<script src = "scripts / leaflet.label.js"> </script> - Después de agregar esta línea a mi HTML, la página parecía estar en blanco. ¿Necesito descargar algún archivo?
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