Leafletで図に凡例を付ける

　Leafletをいじり始めてから長らく凡例（はんれい）　legend作りがおろそかになっていたが、予め用意した（された）凡例画像ファイルの取り込みであれば、割とシンプルだった。

　前記事のダム貯水率プロットを例にとれば、

var legend = L.control({position: 'bottomright'});
legend.onAdd = function(map) {
        var img = L.DomUtil.create('img');
        img.src = "https://aginfo.cgk.affrc.go.jp/data/kml/damsr-legend_j.gif";
        return img;
};
legend.addTo(map);

の追加でＯＫ。

　position: 'bottomright'で右下に表示。

　一方、スタイルシートを使って一からデザインする場合、やや煩雑で手間がかかる。

　Ｒ言語のleafletRパッケージを使って生成したHTMLから必要な部分を抜粋して、
　　※　leafletRパッケージについては『Ｒ言語　＋　Leafletでコロプレス』のページ

　例えば先月の九州豪雨の記事の降水量プロットに凡例を付けるには、

　１．　<style>　</style>内でスタイル設定

.legend {
        padding: 6px 8px;
        font: 14px/16px Arial, Helvetica, sans-serif;
        background: white;
        background: rgba(255,255,255,0.8);
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
        border-radius: 5px;
        line-height: 17px;
        color: #555;
}
.legend i {
        width: 17px;
        height: 17px;
        float: left;
        margin-right: 8px;
}

　２．　階級分けの関数

function getValue1(x) {
	return x >= 100 ? "red" :
	       x >= 50 ? "orange" :
	       x >= 10 ? "blue" :
	       x >= 0 ? "skyblue" :
	       "#808080";
}

　３．　上記１と２を用いて凡例作り

var legend = L.control({position: 'bottomright'});
legend.onAdd = function(map) {
	var div = L.DomUtil.create('div', 'legend');
	var grades1 = [0, 10, 50, 100];
	div.innerHTML += '1時間降水量（最大）<br>'
	div.innerHTML += '<i style="background:' + getValue1(grades1[3]) + '"></i> ' + '≧' + grades1[3] + '<br>'
	for (var i = 0; i < grades1.length-1; i++) { 
	div.innerHTML += '<i style="background:' + getValue1(grades1[2-i]) + '"></i> ' + grades1[2-i] + '&ndash;' + grades1[2-i + 1] + '<br>';
	}
	return div;
};
legend.addTo(map);

といった具合。

　pngなどの画像ファイルにして使い回すのであれば、

var legend = L.control({position: 'bottomright'});
legend.onAdd = function(map) {
        var img = L.DomUtil.create('img');
・
・
・

のソースコードで置き換えられる。

　これまで凡例作りがおろそかだった理由は面倒……
というより、オーバーレイ　overlayを利用する際、うまく切り替えられず、つまずいていたから。
　レイヤーグループ化しても連動しなかった。

　幸い

map.on('overlayadd',function(e){
if(e.name == "1時間降水量（最大）"){
this.removeControl(legend2);
legend1.addTo(this);
}
else{
this.removeControl(legend1);
legend2.addTo(this);
}
});

の追加で切り替えられるようになった。

　参考にしたページは、