7

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

9

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

screenshot

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

screenshot: labels with no container graphics

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

  • 1
    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 9 '17 at 6: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 0:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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