標準のマップ切替コントローラを透過度設定付きのコントローラにカスタマイズしてみました。
プラグインを読込み、コントローラのクラス名を変えるだけで、透過度設定が可能になります。
透過度設定は、オーバーレイマップ切替のチェックボックスをチェックすると、透過度設定のスライダが表示され、透過度の変更が可能となります。
このサンプルでは、自作プラグインを利用しています。
このページのプラグインをダウンロードすることで、すぐに利用できます。
ただ、Leaflet Ver1.7.1で動作確認を行っています。
Leaflet本体を拡張して作成し、非公開の内部変数も参照しているため、Leafletのバージョンが変わると動作しない可能性があります。
その点だけは、ご注意ください。
leaflet_opacityプラグインを利用する場合、HTMLの<head>タグに、LeafletのJavaScriptのソースファイルとCSSファイルを参照するための指定を行います。 プラグインは、上記リンクからダウンロードできます。 プラグインは、Leafletを拡張していますので、必ず、Leafletの後に指定する必要があります。
<link rel="stylesheet" href="js/leaflet.css" />
<link rel="stylesheet" href="js/leaflet_opacity.css" />
<script src="js/leaflet.js"></script>
<script src="js/leaflet_opacity.js"></script>
Javascriptのデータ定義のソースは、複数の地図の切替表示と同じです。
JavaScriptのソースの「L.control.layers」を「L.control.opacityLayers」に変えるだけです。
L.control.opacityLayers(baseCtl, overCtl, {collapsed:true}).addTo(map); // 透過付マップ切替
leaflet_opacityプラグインは、Control.layersを拡張して作成しました。
Control.layersは、地図切替ボタンを表示するときに、オーバーレイマップに対してチェックボックスを作成しています。
その作成時の処理をオーバーライドして、デフォルト処理を実行後、透過度変更用のスライダを追加する処理を追加しています。
スライダの属性にレイヤIDを格納することにより、スライダ変更時に、どのスライダが変更されたかを調べて、透過度の変更を行っています。
leaflet_opacityプラグインに変更すると、Leafletの地図切替コントローラが生成するソースに、下記のように<input type="range">タグが追加されるようになります。
<label>
<div>
<input type="checkbox" class="leaflet-control-layers-selector">
<span> 地理院最新写真</span>
</div>
<input type="range" min="0" max="100"
class="leaflet-control-layers-opacity" style="display: none;">
</label>
leaflet_opacityプラグインは、スライダを追加すること以外、何もしていません。 ですから、透過率の初期値などは、TileLayerの設定で行った値がそのまま利用されます。 スライダのデザインは、「.leaflet-control-layers-opacity」クラスの値で設定可能となっています。ですから、スライダの長さを変えたい場合には、HTML内で下記の様にスタイル設定すれば、デフォルトのスタイルを上書きし、表示を変更できます。
.leaflet-control-layers-opacity {
width: 150px;
}
leaflet_opacityプラグインは、無料で利用することができます。 ただ、著作権は放棄していませんので、著作権表示は残しておいて下さい。 このソフトの利用は、無サポート無保証となります。 もし、サポートが必要な場合は、仕事としてお受けすることは可能ですので、ASH有限会社までご相談ください。