Leaflet入門|L.tileLayerのattributionをhover表示にする(CondensedAttribution)

Leafletのプラグイン「Leaflet.CondensedAttribution」を使って、L.tileLayerのattribution縮小しhover表示にします。
アイコンにマウスカーソルを当てると、attribution の内容が全て表示されます。

実装すると以下のようになります。

<カスタマイズなし(Demo1)>

 このアイコンをクリックすると、attribution が全て表示されます。
Demo1を表示

<アイコンをカスタマイズ(Demo2)>

アイコンはカスタマイズ可能で、今回は Font Awesome のアイコンを使用して次のように変更しました。


Demo2を表示

<アイコン & attribution をカスタマイズ(Demo3)>

attribution の内容も追加することができます。


Demo3を表示

1.全体のコード(Demo1)

2.解説

地図を描画するまでの解説は、leaflet入門1に記載しています。

2−1.ファイルの配置

Leaflet.CondensedAttribution の本体は GitHubからダウンロードできます。

Leaflet.CondensedAttribution

GitHubから取得したcss・jsファイルを以下のように配置します。

index.html
css/leaflet-control-condended-attribution.css
js/leaflet-control-condended-attribution.js

2−2.プラグインの読み込み

Step1で配置した css・jsファイルを読み込みます。
また、アイコンに「Font Awesome」を使用するため、Font Awesome も読み込みます。

2−3.CondensedAttributionの設定

アイコンや、attributionの内容をカスタマイズしない場合は、css・jsを読み込むと自動的に、attributionの表示が変わるので特別な設定はしなくて大丈夫です。

2−4.アイコンのカスタマイズ

Demo2のようにアイコンをカスタマイズするには、次の設定を行います。

① L.mapオブジェクト生成時に、「condensedAttributionControl」を false に設定。
② L.control.condensedAttribution オブジェクト生成時に オプション「emblem」で使用するアイコンを設定。

htmlの基本的な部分は同じなので、Demo1との差分がある場所は「script」のコードになります。

2−5.attributionのカスタマイズ

タイルレイヤーの「attribution」に表示する内容を追加するには、次の設定を行います。

① L.mapオブジェクト生成時に、「condensedAttributionControl」を false に設定。
② L.control.condensedAttribution オブジェクト生成時に オプション「prefix」で追加する文言を設定。

htmlの基本的な部分は同じなので、Demo1との差分がある場所は「script」のコードになります。

2−6.スタイルのカスタマイズ

cssを使ってスタイルを自由にカスタマイズできます。
今回は次のスタイルをあてました。

これで、Leaflet.CondensedAttribution を使用して、attribution をカスタマイズすることができました。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする