はじめに

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

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

追記 (2018-06-25)

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

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

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

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

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

夜っぽい地図とか

紙っぽい地図とか

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