¿Cómo mostrar etiquetas para puntos geojson en un mapa de folleto?
Hay Leaflet.label que ahora está en desuso a favor de L.Tooltip , pero que solo muestra texto al pasar el mouse. Quiero mostrar las etiquetas de texto directamente en el mapa sin necesidad de la interacción del usuario.
Entrada de muestra: https://gist.github.com/maphew/e168430e999fc738eeb3448feda121cd
Resultado deseado (puntos verdes con etiquetas de texto, los otros elementos gráficos son solo para contexto):
Actualización: Quiero crear texto que se mezcle con el mapa como la imagen a continuación, no una información sobre herramientas emergente.
permanent
? De leafletjs.com/reference-1.1.0.html#tooltip-option :Whether to open the tooltip permanently or only on mouseover
L.Marker
s conL.DivIcon
s.Respuestas:
Aquí hay una implementación siguiendo la sugerencia de @BradHards de usar la
permanent
opción para información sobre herramientas. Laopacity
opción desvanece tanto el texto como el contenedor de fondo por igual.Ejemplo de trabajo completo: https://jsfiddle.net/maphew/gtdkxj8e/3/
Para eliminar el fondo de la etiqueta
Ver ¿Cómo sobrescribir el estilo de información sobre herramientas Folleto? para obtener detalles sobre cómo modificar CSS y eliminar completamente el borde de la etiqueta de información sobre herramientas en el mapa Leaflet.js? para quitar el puntero del triángulo sin tocar el CSS (¡simplemente agrégalo
direction: "center"
a.bindTooltip
!)Javascript:
CSS:
Ejemplo de trabajo completo: https://jsfiddle.net/maphew/gtdkxj8e/7/
fuente
.leaflet-tooltip {background-color: transparent;border: transparent;}