How to show GeoJson feature properties as labels on the angular leaflet map?

Question

I'm trying to show GeoJson feature properties as labels on the leaflet map. here's my code:

private createGeoJsonLayer(cords) {
return L.geoJSON(
  cords as any,
  {
    onEachFeature: (feature, layer) => {
      layer.bindTooltip(feature.properties.country_name).openTooltip();
    },
  });

the problem with this code is that it depends on the mouse hover to show the tooltip and the tooltip does not open when the page loads, how can I fix this? user expects to see all the country names as labels when the page loads.

and if there is a better way than tooltip to show labels on the map, I'll be happy to hear that.

Answer 1

I'm trying to improve my own code around labels like you. This is a piece of my code, similar to yours, that I'm working on over a previous ajax call.

In this case the tooltip always open when the page loads. The Leaflet documentation explains about parameters like "permanent: true":

Whether to open the tooltip permanently or only on mouseover.

So"true" is necessary in your case.

It is working, and could be helpful for you.

var calzada = new L.geoJson(data, {
                    onEachFeature: function(feature, layer) {
                      layer.bindTooltip(feature.properties.nam.toString(), 
                         {permanent: true, className: 'label'}
                        ).addTo(map);
                    }
                  })

"nam" is the property I am labeling and "label" is my CSS style