Leaflet GeoJSON style and labeling

Question

I'm trying to add a GeoJSON polygon layer from a file, give it a specific style and show the label (ToolTip) but couldn't find a way to do it in a single function call . I only found different code samples doing each task alone (styling data or showing labels), then I mixed both codes and got something weird, it just created another layer on top of the previous one.

  var geojson = L.geoJSON(myGeoJson);

  L.geoJson(myGeoJson,{
    onEachFeature: function (feature, layer) {
        layer.bindTooltip(feature.properties.CASOS.toString(), {permanent: true}).openTooltip();
    }
    }).addTo(map)

  L.geoJSON(myGeoJson, {
    style: myStyle
    }).addTo(map);

How could I show labels and style the polygons without creating a stack of layers?

EDIT: I edited the question because I think I was unclear, I want to style the data, not the labels.

Answer 1

To give all tooltips your own style, you just modify Leaflet built in CSS class leaflet-tooltip.

For example, if you create the following CSS class:

.leaflet-tooltip {
  border-color: #3399FF;
  border-width: 2px;
  background-color: lightgreen;
}

then the default tooltip

would become

If you want to give some tooltip individual style, then you can use className option, which L.tooltip inherits from DivOverlay class.

Your tooltip binding could then look something like:

layer.bindTooltip(
  feature.properties.CASOS.toString(),
  {permanent: true, className: 'myClass', direction: 'center'}
).openTooltip();

Answer 2

function style(feature) {
    return {
        fillColor: '#E31A1C',
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
    };
}

L.geoJson(myGeoJson, {
            style: style,
            onEachFeature: function (feature, layer) {
            layer.bindTooltip(feature.properties.CASOS.toString(), { permanent: true });
        }}).addTo(map);

The line

style:style

does the styling, and the next 2 lines does the labeling. I just had to separate them by a comma inside a single command instead of creating another command. Now it created a single layers instead of a stack of two layers.