0

I have followed Leaflet GeoJSON style and labeling to create labels for my GeoJson I achieved this using "OnEachFeature" and a "CSS" class. This is a part of the code:

CSS class

    .label {
  line-height: 1;
  margin-top: 0px;
  padding-top: 1px;
  padding-bottom: 0px;
  padding-left: 4px;
  padding-right: 4px;
background-color: true;
font-weight: bold;
color: black;
border: transparent;
box-shadow: none;
font-size:20px;
}

OnEachFeature function

   onEachFeature: function(feature, layer) {
                        layer.bindTooltip(feature.properties.nam.toString(), 
                        {permanent: true, className: 'label'}
                        ).addTo(map);
   }

Instead of this rectangle with a callout as a label, I need it to be a rectangle without a callout (I mean the little triangle that each rectangle has) and each one has to be above the shape line.

This is what I get: Routes with simbology and ToolTips are Squares displayed as dialog calls and not as simple squares (

Does anyone have an idea what could be going on?

0

1 Answer 1

4

To position tooltip above, you have to use direction: 'top' tooltip option. To get rid of callout and for other tooltip style adjustments, just modify appropriate Leaflet CSS styles.

For example, with the direction: 'top' tooltip option and the following CSS styles

.leaflet-tooltip-top {
  line-height: 1;
  margin-top: 0px;
}
.leaflet-tooltip-top::before {
  display: none
}
.leaflet-tooltip {
  padding-top: 1px;
  padding-bottom: 0px;
  padding-left: 4px;
  padding-right: 4px;
}

you will achieve this effect:

enter image description here

0

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.