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.

  • try jsfiddle.net/CrqkR/6 – Mapperz Apr 5 at 23:47
  • that code doesn't style any data – CaD Apr 5 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 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 at 10:47
  • First I'd like to have one custom style for all of them. – CaD Apr 6 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();
| improve this answer | |
  • 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 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 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 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.

| improve this answer | |

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.