1

I am trying to overwrite the styling of the leaflet tooltips on a map but it does not seem to use my CSS style. I am using angular and electron but as far as I know neither should cause any changes to leaflet. (leaflet is installed as a dependency)

My marker adding function looks like this at the moment:

data.flights.map(function(plane){
  const positionVariable = {
    lat: parseFloat(plane.position.latitude),
    lng: parseFloat(plane.position.longitude)
  }
  if(westBound <= positionVariable.lng && eastBound >= positionVariable.lng && northBound >= positionVariable.lat && southBound <= positionVariable.lat){
    var tooltipOptions = {
      classname: 'labelstyle',
      permanent: true,
      direction: 'right',
      opacity: 1.0
    }

    var tooltipContent = plane.callsign

    return L.marker(positionVariable, {icon: greensquare}).addTo(markers).bindTooltip(tooltipContent, tooltipOptions);
  } else {
    return;
  }
})

The markers and the tool tips are applied correctly however they are missing the custom style found in the scss file for the component in which the map is displayed:

.labelstyle{
  color: green;
  font-size:14px;
  font-weight: 700;
  background-color: none;
  border-color: none;
  background: none;
  border: none;
}
2

Use className instead of classname. Remember to check the Leaflet documentation for the right spelling. Stuff in javascript is case-sensitive, and most of the time you won't get any warnings about that.

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.