1

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.

enter image description here

0

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

enter image description here

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.