[GIS] Leaflet tooltip classname not applying

angularjsleafletmarkerspopuptooltip

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;
}

Best Answer

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.

Related Solutions

[GIS] MarkerCluster don’t work with geojson layer in leaflet

From your above additional code, it looks like you are loading Leaflet.markercluster script before Leaflet script:

<script src="leaflet.markercluster-src.js">
<script src="http://code.jquery.com/jquery-1.12.0.min.js">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js">

You should rather load it after:

<script src="http://code.jquery.com/jquery-1.12.0.min.js">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js">
<script src="leaflet.markercluster-src.js">

You should learn to use your browser console (on Windows / Linux browsers, press F12; on Mac OS browsers, press Command ⌘+Option ⌥+i) to look for potential errors.

In your case, I suspect there should be something like "ReferenceError: L is not defined" due to Leaflet.markercluster trying to attach some code to Leaflet's L namespace, but could not find it because it is not loaded yet.

Leaflet Tooltip – How to Remove Leaflet Tooltip Label Collision

This will be brute force simple solution for the case when tooltip number is not too high. It's based on the fact it's possible to get all HTML elements with specific CSS class name with the call document.getElementsByClassName. This can be used to get all tooltip elements, if we assign them some dummy CSS class with the className option.

Logic of the solution goes like this (unoptimized brute force):

get all tooltip HTML elements with the document.getElementsByClassName call;
get bounding rects of all the elements with the .getBoundingClientRect() method;
set all elements visible;
iterate through all the elements and hide overlapping ones;
this process is done after each map zoom.

Example below is based on creating 250 random polygons with permanent tooltips with the help of turf.js library (here is working JSFiddle: https://jsfiddle.net/TomazicM/L2kewosz/).

function overlap(rect1, rect2) {
  return(!(rect1.right < rect2.left || 
          rect1.left > rect2.right || 
          rect1.bottom < rect2.top || 
          rect1.top > rect2.bottom));
}

function hideOverlappingTooltips() {
  var rects = [];
  var tooltips = document.getElementsByClassName('myTooltip');
  for (var i = 0; i < tooltips.length; i++) {
    tooltips[i].style.visibility = '';
    rects[i] = tooltips[i].getBoundingClientRect();
  }
  for (var i = 0; i < tooltips.length; i++) {
    if (tooltips[i].style.visibility != 'hidden') {
      for (var j = i + 1; j < tooltips.length; j++) {
        if (overlap(rects[i], rects[j])) tooltips[j].style.visibility = 'hidden';
      }
    }
  }
}

var map = L.map('map');

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18,
  attribution: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

function onEachFeature(feature, layer) {
  layer.bindTooltip(feature.id.toString(), {
    permanent: true,
    className: 'myTooltip'
  });
}

polygons = turf.randomPolygon(250, {bbox: [13.24, 45.5, 16.35, 46.84], max_radial_length: 0.01 });
turf.featureEach(polygons, function (currentFeature, featureIndex) {
  currentFeature.id = featureIndex;
});
var geojson = L.geoJson(polygons, {
  onEachFeature: onEachFeature
}).addTo(map);

map.setView(geojson.getBounds().getCenter(), 10);

hideOverlappingTooltips();

map.on('zoomend', function(evt) {
  hideOverlappingTooltips();
});

Best Answer

Related Solutions

[GIS] MarkerCluster don’t work with geojson layer in leaflet

Leaflet Tooltip – How to Remove Leaflet Tooltip Label Collision

Related Question