「react-leaflet-draw」ライブラリで地図上に追加した図形描画ボタンにマウスを乗せた際に表示される説明文を日本語化したので、手順についてまとめ。
なお、一緒に地図の拡大/縮小ボタンの説明文も日本語化しました。
実装の際に参考にさせていただいた記事はこちら。
How to change toolbar button title? · Issue #66 · alex3165/react-leaflet-draw · GitHub
https://github.com/alex3165/react-leaflet-draw/issues/66
サンプルコードは下記のとおりです。
import { MapContainer, TileLayer, FeatureGroup, ZoomControl } from 'react-leaflet';
import { EditControl } from "react-leaflet-draw";
import L from 'leaflet';
class Map extends Component {
constructor(props) {
super(props);
this.state = {
latlng: [34.797345395117546, 137.5804696201213],
zoom: 10,
}
L.drawLocal.draw.toolbar.buttons.polyline="直線を描画"
L.drawLocal.draw.toolbar.buttons.marker="地図ピンを描画"
......
}
render() {
return (
<MapContainer
id='map'
center={this.state.latlng}
zoom={this.state.zoom}
zoomControl={false}>
<ZoomControl zoomInTitle='拡大する' zoomOutTitle='縮小する'/>
<TileLayer
attribution='<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院タイル</a>'
url="https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png"/>
<FeatureGroup>
<EditControl
position="topleft" />
</FeatureGroup>
</MapContainer>
)
}
}
12行目からの L.drawLocal.draw.toolbar.buttons.polyline などの行で、図形描画ボタンの各種説明文を日本語化しています。
変更可能な項目については、下記の Leaflet.draw の 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
こちらを追加することで、説明文を任意の文に変更することができます。
また、拡大/縮小ボタンについては、1行目で ZoomControl をインポートし、こちらを 23行目に追加して、拡大・縮小ボタンの説明文を設定しています。
なお、ZoomControl を追加する際は、MapContainer に zoomControl={false} を追加することをお忘れなく。
私が実際にやったのですが、上記を設定しないと、拡大/縮小ボタンが2つ表示されてしまいます。
日本語化については以上です!
最初は、Leaflet.draw.locales を使って日本語化するつもりだったのですが、こちらは日本語には対応しておらず…このような方法で日本語化することになりました。
いちいち説明文を書くのは面倒でしたが、結果として違和感なく日本語化はできたので良しとします!
以上、「react-leaflet-draw」ライブラリの各種ボタンの説明文を日本語化する方法についてでした。
ご参考になれば幸いです。