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

simulated map of points with text labels

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

image with unwanted part crossed out


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


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


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


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

screenshot: labels with no container graphics

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

  • 2
    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;} Jul 9, 2017 at 6:49
  • Thank you @Diffusion_net! those keywords led me to related questions and to a more complete solution (now added to answer). Jul 10, 2017 at 0:33
  • This is a 2017 solution, some 2022 news? (strange seems nothing on leafletjs.com reference...) Jan 10, 2022 at 23:21
  • @PeterKrauss In 2022 answer would be the same, see leafletjs.com/reference.html#tooltip
    – TomazicM
    Jan 15, 2022 at 19:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.