javascript - leaflet Js custom control button add (text, hover) - Stack Overflow

admin管理员组

文章数量:1195490

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');

        container.style.backgroundColor = 'white';     
        container.style.backgroundImage = "url(:ANd9GcR6FCUMW5bPn8C4PbKak2BJQQsmC-K9-mbYBeFZm1ZM2w2GRy40Ew)";
        container.style.backgroundSize = "30px 30px";
        container.style.width = '30px';
        container.style.height = '30px';

        container.onclick = function(){
          console.log('buttonClicked');
        }

        return container;
      }
    });

    var map;

    var readyState = function(e){
      map = new L.Map('map').setView([48.935, 18.14], 14);
      L.tileLayer('http://{s}.tile.openstreetmap/{z}/{x}/{y}.png').addTo(map);
      map.addControl(new customControl());
    }

    window.addEventListener('DOMContentLoaded', readyState);

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');

        container.style.backgroundColor = 'white';     
        container.style.backgroundImage = "url(http://t1.gstatic.com/images?q=tbn:ANd9GcR6FCUMW5bPn8C4PbKak2BJQQsmC-K9-mbYBeFZm1ZM2w2GRy40Ew)";
        container.style.backgroundSize = "30px 30px";
        container.style.width = '30px';
        container.style.height = '30px';

        container.onclick = function(){
          console.log('buttonClicked');
        }

        return container;
      }
    });

    var map;

    var readyState = function(e){
      map = new L.Map('map').setView([48.935, 18.14], 14);
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
      map.addControl(new customControl());
    }

    window.addEventListener('DOMContentLoaded', readyState);

• javascript
• button
• leaflet

Share Improve this question Follow edited Nov 21, 2016 at 17:43 Kristopher 8581515 silver badges3232 bronze badges asked Aug 10, 2015 at 16:42 Jeremy HuntsJeremy Hunts 36311 gold badge55 silver badges1414 bronze badges 1

• The link seems to be broken. – Jesper Commented Jul 22, 2022 at 9:56

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 22

It seems you more need a Button than a div:

    var container = L.DomUtil.create('input');
    container.type="button";

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(){
     container.style.backgroundColor = 'pink'; 
   }
   container.onmouseout = function(){
     container.style.backgroundColor = 'white'; 
   }
   

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

Full example: http://codepen.io/anon/pen/oXVMvy

本文标签： javascriptleaflet Js custom control button add (texthover)Stack Overflow