How to label geojson points in Leaflet?

Question

How to show labels for geojson points in a Leaflet map?

There is Leaflet.label that is now deprecated in favour of L.Tooltip, but that only shows text on hover. I want to show the text labels directly on the map without needing user interaction.

Sample input - https://gist.github.com/maphew/e168430e999fc738eeb3448feda121cd

Desired result (green points with text labels, the other graphic elements are just for context):

Update: I want to create text that blends in with the map like the image below, not a popup tooltip.

Answer 1

Here's an implementation following @BradHards suggestion of using the permanent option for tooltip. The opacity option fades both text and background container equally.

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

Full working example: https://jsfiddle.net/maphew/gtdkxj8e/3/

To remove the label background

See Overriding Leaflet tooltip style? for details modifying the CSS and Removing tooltip label border completely in Leaflet.js map? for removing the triangle pointer without touching the CSS (simply add direction: "center" to .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;
  }

Full working example: https://jsfiddle.net/maphew/gtdkxj8e/7/