web-dev-qa-db-ja.com

リーフレットJsカスタムコントロールボタン追加（テキスト、ホバー）

私は このcontrol-button-leafletチュートリアル に従いました、そしてそれは私のために働きました。今私はしたい：

  1. ボタンにカーソルを合わせるとテキストが表示されます（ズームボタンのように）
  2. ボタンにカーソルを合わせると、ボタンの色が変わります
  3. 画像の代わりにボタンの中にテキストを書くことができます。

コードは次のとおりです。

    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);
javascriptbuttonleaflet
11
Jeremy Hunts

Divよりもボタンが必要なようです：

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

  1. 次に、マウスオーバーテキストを簡単に設定できます。

    container.title="No cat";

  2. そして、画像の代わりにいくつかのテキスト：

    container.value = "42";

  3. また、マウスイベントを使用してボタンのスタイルを設定できます。

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

（もちろん、この最後の部分はcssで行うことができますが、よりエレガントかもしれません）

完全な例： http://codepen.io/anon/pen/oXVMvy

16
Krxldfx