Comment étiqueter les points geojson dans Leaflet?

Comment afficher les étiquettes des points geojson dans une carte Leaflet?

Il y a Leaflet.label qui est maintenant déconseillé en faveur de L.Tooltip , mais qui n'affiche que du texte au survol. Je souhaite afficher les étiquettes de texte directement sur la carte sans avoir besoin d'interaction avec l'utilisateur.

Exemple d'entrée - https://gist.github.com/maphew/e168430e999fc738eeb3448feda121cd

Résultat souhaité (points verts avec des étiquettes de texte, les autres éléments graphiques sont juste pour le contexte):

Mise à jour: je veux créer du texte qui s'intègre à la carte comme l'image ci-dessous, pas une info-bulle contextuelle.

leaflet geojson

— Matt Wilkie
source

Utilisez simplement l'option info-bulle permanent? De leafletjs.com/reference-1.1.0.html#tooltip-option :Whether to open the tooltip permanently or only on mouseover

— BradHards

Utilisez L.Markers avec L.DivIcons.

— IvanSanchez

Si vous ne pouvez pas résoudre ce problème uniquement dans Leaflet, une option pourrait être de placer vos points dans GeoServer (ou similaire) et de les charger en tant que couche de tuiles WMS dans laquelle le style affiche des étiquettes . Dans cet exemple, les étiquettes bleues sont obtenues de cette manière

— Stephen Lead

@IvanSanchez Je n'arrive pas à faire fonctionner ça. Le html personnalisé ne passe pas. Voir ma tentative sur jsfiddle.net/maphew/q0refcwx/1

— matt wilkie

Voici une implémentation suivant la suggestion de @BradHards d'utiliser l' permanentoption pour info-bulle. L' opacityoption atténue à la fois le texte et le conteneur d'arrière-plan.

var data_points = {
    "type": "FeatureCollection",
    "name": "test-points-short-named",
    "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
    "features": [
    { "type": "Feature", "properties": { "name": "1" }, "geometry": { "type": "Point", "coordinates": [ -135.02507178240552, 60.672508785052223 ] } },
    { "type": "Feature", "properties": { "name": "6"}, "geometry": { "type": "Point", "coordinates": [ -135.02480935075292, 60.672888247036376 ] } },
    { "type": "Feature", "properties": { "name": "12"}, "geometry": { "type": "Point", "coordinates": [ -135.02449372349508, 60.672615176262731 ] } },
    { "type": "Feature", "properties": { "name": "25"}, "geometry": { "type": "Point", "coordinates": [ -135.0240752514004, 60.673313811878423 ] } }
    ]};

var pointLayer = L.geoJSON(null, {
  pointToLayer: function(feature,latlng){
    label = String(feature.properties.name) // Must convert to string, .bindTooltip can't use straight 'feature.properties.attribute'
    return new L.CircleMarker(latlng, {
      radius: 1,
    }).bindTooltip(label, {permanent: true, opacity: 0.7}).openTooltip();
    }
  });
pointLayer.addData(data_points);
mymap.addLayer(pointLayer);

Exemple de travail complet: https://jsfiddle.net/maphew/gtdkxj8e/3/

Pour supprimer l'arrière-plan de l'étiquette

Voir Ignorer le style de l'infobulle du dépliant? pour plus de détails sur la modification du CSS et la suppression complète de la bordure d'étiquette d'infobulle dans la carte Leaflet.js? pour retirer le pointeur triangle sans toucher au CSS (ajoutez simplement direction: "center"à .bindTooltip!)

Javascript:

.bindTooltip(label, {permanent: true, 
   direction: "center",
   className: "my-labels"}).openTooltip();

CSS:

.leaflet-tooltip.my-labels {
  background-color: transparent;
  border: transparent;
  box-shadow: none;
  }

Exemple de travail complet: https://jsfiddle.net/maphew/gtdkxj8e/7/

— Matt Wilkie
source

Si vous prenez cette route, vous pouvez modifier le CSS des info-bulles ou ajouter le nom de classe (l'info-bulle hérite de divoverlay) à l'info-bulle pour supprimer les couleurs d'arrière-plan, les bordures, les ombres, etc. .leaflet-tooltip {background-color: transparent;border: transparent;}

— Diffusion_net

Merci @Diffusion_net! ces mots clés m'ont conduit à des questions connexes et à une solution plus complète (maintenant ajoutée à la réponse).

— matt wilkie