Comment ajouter des étiquettes de texte uniquement sur une carte de dépliant sans icône

22

Je cherche un moyen d'afficher du texte sur la carte Leaflet à l'aide de marqueurs ou de toute autre chose sans afficher d'icône. Je souhaite afficher uniquement le texte et pouvoir le styliser et le faire pivoter ... Une suggestion?

leaflet

— Etienne Desgagné
source

1

@NikhilVJ - Ce Q & A ne discute pas de la façon d'avoir une info-bulle sans avoir un marqueur correspondant. Les réponses ici expliquent comment avoir uniquement le texte, sans marqueur visible.

— ToolmakerSteve

ah désolé ma mauvaise

— Nikhil VJ

19

J'ai résolu mon problème en utilisant la fonctionnalité Leaflet L.DivIcon qui représente une icône légère pour les marqueurs qui utilise un simple élément div au lieu d'une image ... Ces marqueurs ont un html et une option className qui me permettent de créer des étiquettes avec css piloté modes...

— Etienne Desgagné
source

11

Pourriez-vous fournir un peu de code pour cela?

— mastov

Cette réponse n'est pas une idée si vous voulez une étiquette ET un marqueur

— Roy

@Roy - c'est une situation différente; Voir L.Tooltip . Si vous souhaitez que l'étiquette (l'infobulle) s'affiche toujours, vous définissez l'option permanente sur true.

— ToolmakerSteve

16

Mise à jour pour Leaflet 1.0: à partir de Leaflet 1.0, le plugin Leaflet.label est obsolète, car il a été inclus avec le noyau de Leaflet L.Tooltip. Il n'est pas nécessaire d'inclure le script source et la syntaxe a légèrement changé. Exemple d'utilisation:

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

Le style CSS peut être appliqué à la classe de la même manière qu'auparavant.

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

Il apparaît également que l'opacité du marqueur peut être complètement réglée sur 0.

Avant Leaflet 1.0: utilisez le plugin Leaflet.label (déjà mentionné par geomajor56).

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

Avec le plugin Leaflet Label, les étiquettes sont directement liées aux marqueurs, mais vous pouvez définir l'opacité du marqueur à presque zéro pour que seule l'étiquette soit visible. (Si vous définissez l'opacité du marqueur sur 0, l'étiquette associée disparaît également.)

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

Vous pouvez ensuite utiliser CSS pour styliser vos étiquettes comme bon vous semble:

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

— James Lawruk
source

— Marcin Kosiński

@ MarcinKosiński - Oui, vous devrez télécharger leaflet.label.js à partir du lien GitHub dans la publication et le placer dans un sous-dossier de votre site Web nommé scripts. Ou, vous pouvez remplacer l'URL dans le code par le fichier hébergé à leaflet.github.io/Leaflet.label/leaflet.label.js (vous pouvez également vouloir le fichier CSS; même nom et emplacement, extension différente).

— KeithS

j'ai essayé de le faire ,,, une idée comment supprimer l'arrière-plan et la bordure? snag.gy/JdnpyV.jpg

— WantIt

Lors de l'utilisation à l' L.Tooltipintérieur de onEachFeature, une erreur s'est produite: "Uncaught TypeError: échec de l'exécution de 'appendChild' sur 'Node': le paramètre 1 n'est pas de type 'Node'."

— Nikhil VJ du

Résolu, j'utilisais l'une des propriétés de la fonctionnalité comme texte, a dû ajouter un .toString()à la fin. marker.bindTooltip(feature.properties['prabhag_number'].toString(), {...

— Nikhil VJ

4

Vous pouvez commencer ici avec ce plugin Leaflet . Créez ou modifiez probablement un marqueur à votre convenance. Le texte provient-il d'attributs d'entité?

— geomajor56
source

Cela répond à une question différente de celle posée. Voici comment ajouter une étiquette à un marqueur existant ; ce n'est pas une explication sur la façon d'avoir seulement une étiquette - pas de symbole de marqueur.

— ToolmakerSteve

0

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

Ça marche pour moi

— Sathish Kumar Arunachalam
source

Cela répond à une question différente de celle posée. Voici comment ajouter une étiquette à un marqueur existant ; ce n'est pas une explication sur la façon d'avoir seulement une étiquette - pas de symbole de marqueur.

— ToolmakerSteve