Jeremy Hunts Jeremy Hunts - 1 year ago 391
Javascript Question

leaflet Js custom control button add (text, hover)

I followed this control-button-leaflet tutorial and it worked for me. Now I want to:

  1. show some text when i hover over the button (like with the zoom buttons)

  2. Change the color of the button when i hover over it

  3. be able to write text inside the button instead of an image.

Here's the code:

var customControl = L.Control.extend({
options: {
position: 'topleft'

onAdd: function (map) {
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom'); = 'white'; = "url("; = "30px 30px"; = '30px'; = '30px';

container.onclick = function(){

return container;

var map;

var readyState = function(e){
map = new L.Map('map').setView([48.935, 18.14], 14);
map.addControl(new customControl());

window.addEventListener('DOMContentLoaded', readyState);

Answer Source

It seems you more need a Button than a div:

    var container = L.DomUtil.create('input');
  1. Then you can easily set a mouseover text:

    container.title="No cat";
  2. And some Text instead of an image:

    container.value = "42";
  3. And you can use the mouse events to style the button:

    container.onmouseover = function(){ = 'pink'; 
    container.onmouseout = function(){ = 'white'; 

(you could of course do this last part with css, might be more elegant)

Full example:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download