[GIS] Mouseover highlight label in Leaflet

Question

I would like to see the geoJSON placemark label once hover it.

I found a few examples, but they refer mostly to providing a pop-up only:

Showing popup on mouse-over, not on click using Leaflet?

https://stackoverflow.com/questions/37408445/leaflet-mouseout-event-on-marker

Show popup on marker hover / mouseover, hide on mouseout, and keep open on click

My code looks as follows:

  job = L.geoJson(data, {

        pointToLayer: function(feature, latlng) {
        feature.properties.myKey = '<b>'+ feature.properties.Owner + '</b>; ' + feature.properties.Address
            return L.circleMarker(latlng, {
            radius:6,
            opacity: .5,
            //color: "#000",
            color:getColor(feature.properties.Contractor),
            fillColor:  getColor(feature.properties.Contractor),
            fillOpacity: 0.8

            });  //.bindTooltip(feature.properties.Name);
        },

            onEachFeature: function (feature, layer) {
                layer._leaflet_id = feature.properties.Owner;
                label = String(feature.properties.Owner)

            function highlightFeature(e){
                var ly = label
                }

                var popupContent = "<p><h2>" +
                feature.properties.Owner + "</h2><b> Number of units:</b> " +
                feature.properties.Units + "</br> <b>Client reference:</b> " +
                feature.properties.Client_Ref + "</br>" +
                '</br><center><a href="'+ feature.properties.Directory +'" target="_blank">Local directory</a></center></p>' +
                '<center><font color="red"><a href="'+ feature.properties.Sharepoint +'" target="_blank">Sharepoint</a></font></center></p>';

                if (feature.properties && feature.properties.popupContent) {
                    popupContent += feature.properties.popupContent;
                }
                    layer.bindPopup(popupContent);
                    layer.on({
            mouseover: function (e) {
                this.setStyle({
                    'fillColor': '#663300',
                    'weight':11,
                });
                highlightFeature(ly);
            },

            mouseout: function (e) {
                this.setStyle({
                    'fillColor': getColor(feature.properties.Contractor),
                    'weight': 2
                });
            }
            /*
            click: function () {
                // TODO Link to page
                alert('Clicked on ' + feature.properties.Title)
            }
            */
        });

            }

            }).addData(data).addTo(map);

where inside the mouseover: function (e) { I plotted the highligtfeature function highlightFeature(ly); as added to the onEachFeature: function above.
The map is fine, but I see no effect.
The console says:

(index):497 Uncaught ReferenceError: ly is not defined
at NewClass.mouseover ((index):497)
at NewClass.fire (Events.js:190)
at NewClass._fireDOMEvent (Map.js:1386)
at NewClass._handleDOMEvent (Map.js:1343)
at HTMLDivElement.handler (DomEvent.js:79)

Shall I input the:

     .bindTooltip(label, {permanent: true, direction: "center", className: "my-labels"}).openTooltip();

somewhere in the code too?

Could you help me with it?

I don't want popop opened, only the label.

Answer 1

It can be gained by the .bindToolTip option, whewre we must put permanent: false, if we want to have the name be hovered instead of visible permanently.

My code snippet now looks as follows:

Instead of:

   job = L.geoJson(data, {

    pointToLayer: function(feature, latlng) {
    feature.properties.myKey = '<b>'+ feature.properties.Owner + '</b>; ' + 
    feature.properties.Address
        return L.circleMarker(latlng, {
        radius:6,
        opacity: .5,
        color:getColor(feature.properties.Contractor),
        fillColor:  getColor(feature.properties.Contractor),
        fillOpacity: 0.8
        });  
     },

should be:

    job = L.geoJson(data, {   //layer1 start
    pointToLayer: function(feature, latlng) {
        feature.properties.myKey = '<b>'+ feature.properties.Owner + '</b>; ' + 
    feature.properties.Address
            label = String(feature.properties.Owner)
        return L.circleMarker(latlng, {
            radius:6,
            opacity: .5,
            color:getColor(feature.properties.Contractor),
            fillColor:  getColor(feature.properties.Contractor),
            fillOpacity: 0.8
        }).bindTooltip(label, {permanent: false, direction: "top", className: "my- 
     labels"}).openTooltip(); 
      },            

The className comes from customizing, which can be done with .css code:

  .leaflet-tooltip.my-labels {
   background-color: transparent;
   border: transparent;
   box-shadow: none;
   font-weight: bold;
   font-size: 16px;
  }