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

Respostas:

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
<script src = "scripts / leaflet.label.js"> </script> - Depois de adicionar esta linha ao meu HTML, a página parecia estar em branco. Preciso baixar algum arquivo?
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