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.

Just use the tooltip option permanent? From http://leafletjs.com/reference-1.1.0.html#tooltip-option : Whether to open the tooltip permanently or only on mouseover — BradHards, Jun 27 '17 at 21:03
If you can't solve this purely in Leaflet, an option could be to put your points in GeoServer (or similar) and load them as a WMS tile layer whereby the style shows labels. In this example the blue labels are achieved in this manner — Stephen Lead, Jul 04 '17 at 05:47
@IvanSanchez I can't get that to work. The custom html is not coming through. See my attempt at https://jsfiddle.net/maphew/q0refcwx/1/ — matt wilkie, Jul 09 '17 at 06:25

matt wilkie · Answer 1 · 2017-07-10T00:32:55.780

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/

If you do take this route you can change css of tooltips or add classname (tooltip inherits from divoverlay) to the tooltip to remove the background colors, borders, shadows, etc. ie. .leaflet-tooltip {background-color: transparent;border: transparent;} — Diffusion_net, Jul 09 '17 at 06:49
Thank you @Diffusion_net! those keywords led me to related questions and to a more complete solution (now added to answer). — matt wilkie, Jul 10 '17 at 00:33
This is a 2017 solution, some 2022 news? (strange seems nothing on leafletjs.com reference...) — Peter Krauss, Jan 10 '22 at 23:21
@PeterKrauss In 2022 answer would be the same, see https://leafletjs.com/reference.html#tooltip — TomazicM, Jan 15 '22 at 19:43

How to label geojson points in Leaflet?

1 Answers1

To remove the label background

Linked