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.

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/