1

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.

5
  • try jsfiddle.net/CrqkR/6
    – Mapperz
    Apr 5 '20 at 23:47
  • that code doesn't style any data
    – CaD
    Apr 5 '20 at 23:49
  • most likely you need polygon to points then label style via css here is a wingdings style label jsfiddle.net/0z9fak6o
    – Mapperz
    Apr 6 '20 at 0:05
  • Do you want to have one custom style for all tooltips or you want to style each individual tooltip differently?
    – TomazicM
    Apr 6 '20 at 10:47
  • First I'd like to have one custom style for all of them.
    – CaD
    Apr 6 '20 at 14:21
2

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

enter image description here

would become

enter image description here

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();
3
  • I'd like to style the GeoJSON data itself, not it's tooltip (label). But thanks for the information, that's really useful for other purposes. Maybe I was unclear in the question, so I will edit it.
    – CaD
    Apr 8 '20 at 1:08
  • Have a look at this example: leafletjs.com/examples/geojson/example.html. It seems to have answer to your question.
    – TomazicM
    Apr 8 '20 at 12:41
  • I looked through tutorial and examples but only could find the codes for each task, and when I try to use both codes in a single code it don't work.
    – CaD
    Apr 9 '20 at 2:09
0
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.

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.