CSS
leaflet

CSS Filter と Leaflet で地理院タイルにエフェクトをかけてみる

はじめに

地理院地図で日本全国の赤色立体地図の提供がはじまりました。

しかし 反響 を見てみるとグロさが気になって正視できない方々も一定数いるようです。 地図表示用ライブラリ Leaflet を使って地理院タイルを表示、これに CSS Filter を適用して地図の色味を変えてみましょう。

追記 (2018-06-25)

国土地理院コンテンツ利用規約 (2018-06-25 閲覧) によると

赤色立体地図はアジア航測株式会社の特許(第3670274号等)を使用して作成したものです。赤色立体地図を利用される場合は、アジア航測株式会社の 許諾条件 を確認してご利用ください。

とされており、リンク先の許諾条件に抵触しないように利用する必要があります。この記事が許諾条件に抵触するかどうかは判断つきかねるので、この記事の画像およびデモ、ソースコードから赤色立体図を使用するものを自主規制しました。

ツール

Leaflet で地理院タイルを表示、背景地図に対して CSS Filter を適用するツールをつくりました。

左側のスライダーを動かすとさまざまな CSS Filter Effect をかけることができます。

実用的な事例としてはこんな地理院の標準地図を

image.png

夜っぽい地図とか
image.png

紙っぽい地図とか
image.png

好みの色調に調整して使うのがよいのではないかと思います。