【JavaScript】Leaflet Drawプラグインのボタンを日本語化する

先日、Leaflet で描画した地図に、円や矩形などを描画できるプラグイン「Leaflet Draw」について紹介しましたが、今回は Leaflet Draw プラグインで表示したボタン等を日本語化する方法についてです。
日本語化、というより任意の説明文に変更する方法、と言った方が近いです。

変更方法はいたって簡単です。
サンプルコードはこちら。

const map = L.map('map', {
  center: [34.797345395117546, 137.5804696201213],
  zoom: 13,
  drawControl: false,
});
const tiles = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
  attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
}).addTo(map);

// 図形描画ボタンをマップに追加
let drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
let drawControl = new L.Control.Draw({
    draw: {
       polygon: false,
    },
    edit: {
        featureGroup: drawnItems
    }
});
L.drawLocal.draw.toolbar.buttons.polyline = '直線を描画';
L.drawLocal.draw.toolbar.buttons.circle = '円を描画';
L.drawLocal.draw.toolbar.buttons.rectangle = '矩形を描画';
L.drawLocal.draw.toolbar.buttons.marker = '地図ピンを描画';
L.drawLocal.draw.toolbar.undo.title = '最終地点を削除します';
L.drawLocal.draw.toolbar.undo.text = '戻す';
L.drawLocal.draw.toolbar.finish.title = '図形の描画を終了します';
L.drawLocal.draw.toolbar.finish.text = '終了';

map.addControl(drawControl);

20 行目までは、先日紹介したコードとほぼ同じです。
追加したのは 21～28 行目です。
map.addControl(drawControl) の前にこちらを追加すると、ボタン上にマウスカーソルを乗せたときに表示される説明文を変更できます。

上記コードを追加して実行すると、下のスクリーンショットのように、説明文が変更されます。

なお、他の変更可能な項目につきましては、下記の Leaflet.draw.js のソースコードをご確認ください。

Leaflet.draw/Leaflet.draw.js at master · Leaflet/Leaflet.draw · GitHub
https://github.com/Leaflet/Leaflet.draw/blob/master/src/Leaflet.draw.js

ちなみに、「leaflet-draw-locales」というライブラリもあり、npm が使える環境ならこちらを使った方が簡単だと思います。

以上、Leaflet Draw プラグインのボタンを日本語化する方法についてでした。
ご参考になれば幸いです。