Como adicionar rótulos somente texto no mapa do Leaflet sem ícone

22

Estou procurando uma maneira de mostrar texto no mapa do Leaflet usando marcadores ou qualquer outra coisa sem mostrar nenhum ícone. Quero mostrar apenas o texto e poder estilizá-lo e girá-lo ... Alguma sugestão?

leaflet

— Etienne Desgagné
fonte

1

@NikhilVJ - As perguntas e respostas não discutem como ter uma dica de ferramenta sem ter um marcador correspondente. As respostas aqui discutem como ter apenas o texto, sem marcador visível.

— ToolmakerSteve

ah desculpe meu mal

— Nikhil VJ

19

Resolvi meu problema usando o recurso Leaflet L.DivIcon, que representa um ícone leve para marcadores que usa um elemento div simples em vez de uma imagem ... Esses marcadores têm um html e um className que permitem criar etiquetas com css drived estilos ...

— Etienne Desgagné
fonte

11

Você se importaria de fornecer um pouco de código para isso?

— Mastov 13/05/16

Esta resposta não é idéia se você quer um rótulo e um marcador

— Roy

@ Roy - essa é uma situação diferente; Consulte Dica de ferramenta . Se você deseja que o rótulo (a dica de ferramenta) seja sempre exibido, defina a opção permanente como true.

— ToolmakerSteve

16

Atualização para o Leaflet 1.0: A partir do Leaflet 1.0, o plug - in Leaflet.label foi descontinuado, pois foi incluído no núcleo do Leaflet como L.Tooltip. Não há necessidade de incluir o script de origem, e a sintaxe mudou um pouco. Uso da amostra:

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);

O estilo CSS pode ser aplicado à classe da mesma maneira que antes.

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

Parece também que a opacidade do marcador pode estar completamente definida como 0.

Antes do Leaflet 1.0: Use o plug-in Leaflet.label (já mencionado por geomajor56).

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

Com o plug-in Labellet Label, os rótulos são diretamente vinculados aos marcadores, mas você pode definir a opacidade do marcador para quase zero, para que apenas o rótulo fique visível. (Se você definir a opacidade do marcador como 0, o rótulo associado também 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);

Você pode usar o CSS para estilizar seus rótulos como achar melhor:

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

— James Lawruk
fonte

— Marcin Kosiński

@ MarcinKosiński - Sim, você precisará fazer o download do leaflet.label.js no link do GitHub na publicação e colocá-lo em uma subpasta do seu site chamada scripts. Ou, você pode substituir a URL no código pelo arquivo hospedado em leaflet.github.io/Leaflet.label/leaflet.label.js (você também pode querer o arquivo CSS; mesmo nome e local, extensão diferente).

— 21716 KeithS

Eu tentei fazer isso ,,, alguma idéia de como remover o fundo e a borda? snag.gy/JdnpyV.jpg

— WantIt

Ao usar o L.TooltiponEachFeature, obtendo o erro: "TypeError não capturado: falha ao executar 'appendChild' em 'Node': o parâmetro 1 não é do tipo 'Node'."

— Nikhil VJ

Resolvido, eu estava usando uma das propriedades do recurso como texto, tinha que acrescentar um .toString()no final. marker.bindTooltip(feature.properties['prabhag_number'].toString(), {...

— Nikhil VJ

4

Você pode começar aqui com este plugin do Leaflet . Provavelmente crie ou edite um marcador ao seu gosto. O texto é proveniente de atributos do recurso?

— geomajor56
fonte

Isso responde a uma pergunta diferente da que foi feita. Isto é como adicionar um rótulo a um marcador existente ; é não uma explicação de como ter unicamente uma etiqueta - nenhum símbolo marcador.

— ToolmakerSteve

0

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

Isso funciona para mim

— Sathish Kumar Arunachalam
fonte

Isso responde a uma pergunta diferente da que foi feita. Isto é como adicionar um rótulo a um marcador existente ; é não uma explicação de como ter unicamente uma etiqueta - nenhum símbolo marcador.

— ToolmakerSteve