Como mostrar etiquetas para pontos geojson em um mapa do Leaflet?
Há o Leaflet.label que agora está obsoleto em favor da L.Tooltip , mas que mostra apenas o texto ao passar o mouse. Quero mostrar os rótulos de texto diretamente no mapa sem precisar da interação do usuário.
Entrada de amostra - https://gist.github.com/maphew/e168430e999fc738eeb3448feda121cd
Resultado desejado (pontos verdes com rótulos de texto, os outros elementos gráficos são apenas para contexto):
Atualização: eu quero criar um texto que combine com o mapa, como na imagem abaixo, e não com uma dica de ferramenta pop-up.
permanent
? De leafletjs.com/reference-1.1.0.html#tooltip-option :Whether to open the tooltip permanently or only on mouseover
L.Marker
s comL.DivIcon
s.Respostas:
Aqui está uma implementação seguindo a sugestão do @BradHards de usar a
permanent
opção de dica de ferramenta. Aopacity
opção reduz o contêiner de texto e de plano de fundo igualmente.Exemplo de trabalho completo: https://jsfiddle.net/maphew/gtdkxj8e/3/
Para remover o fundo da etiqueta
Consulte Substituindo o estilo da dica de ferramenta de folheto? para obter detalhes sobre como modificar completamente a borda do rótulo CSS e Removendo a dica de ferramenta no mapa Leaflet.js? para remover o ponteiro do triângulo sem tocar no CSS (basta adicionar
direction: "center"
a.bindTooltip
!)Javascript:
CSS:
Exemplo de trabalho completo: https://jsfiddle.net/maphew/gtdkxj8e/7/
fonte
.leaflet-tooltip {background-color: transparent;border: transparent;}