[GIS] Leaflet EasyButton MouseOver event

easybutton-pluginjavascriptleaflet

I am using easybutton plugin for leaflet. Is there a possibility to display an image+some text when mouse is over on the button?

Here is my current code:

 var btn2 = L.easyButton ({position: 'topright', 
  states: [{
    stateName: 'NoSources2',
    icon:'<img src=ico/closed_eye.png height="16" width="16"><span>   masquer le nombre de resources</span>',
      title: 'NoSources' ,
      onClick: function(control) {
                map.removeLayer(NoSources);
                control.state('NoSources1')},
    },
    {
     stateName: 'NoSources1',
    icon: '<img src=ico/oeil.jpg height="16" width="16"><span>   voir le nombre de resources</span>',
    title: 'NoSources',
    onClick: function(control)  {
    map.addLayer(NoSources);
    control.state('NoSources2')}, 
  }]
});
btn2.addTo(map);

Best Answer

The following describes a method for a mouseover image for an easybutton.

(1) Add an id to your easybutton:

var btn2 = L.easyButton ({position: 'topright', id:'sbut',

(2) Add event listeners to your button which call the mover and mout functions:

document.getElementById("sbut").addEventListener("mouseover", mover);
document.getElementById("sbut").addEventListener("mouseout", mout);

(3) Add to your HTML an image, substituting in the image {IMGURL}:

<div class "container">
    <div class "picture">
        <img alt="n e image" id="neimage" style="display: none" src="{IMGURL}"/>
    </div>
</div>

(4) create the function mover to display the image at mouse coords; note as your button is top right then the image width is subtracted to get it to display with the NE corner at mouse position:

function mover(event){
    var x = event.clientX;
    var y = event.clientY;    
    var img = document.getElementById('neimage');
    img.style.display = '';
    img.style.position = 'fixed';
    img.style.left = x - img.width + 'px';
    img.style.top = y + 'px';    
    img.style.zIndex = 1000;
    }

(5) create the function mout which will remove the displayed image when the mouse leaves the button:

function mout (event){
    document.getElementById('neimage').style.display = 'none';
}

References

display image position based on mouse click coordinates

addeventlistener

image dimensions

image z index

Related Question