CSS
leaflet

CSS Filter と Leaflet で赤色立体地図を〇色立体地図にしてみる

はじめに

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

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

ツール

Leaflet で赤色立体地図を表示、背景地図に対して CSS Filter を適用するツールをつくりました。

image.png

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

ギャラリー

緑色立体図

hue-rotation で赤→緑に。

image.png

青色立体図

hue-rotation で赤→青に。

image.png

黄色立体図

hue-rotation で赤→黄に。

image.png

紫色立体図

hue-rotation で赤→紫に。

image.png

コントラストを調整した事例

contrast を 200% に。グロさが強調されたような気がします。

image.png

いろいろやりすぎた事例

invert, hue-rotate, contrast, saturate などを複合的に掛けています。内臓系というよりは脳・神経系のグロさを得たような気がします。

image.png

まとめ

CSS Filter で赤色立体地図をいじってみました。

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

image.png

夜っぽい地図とか
image.png

紙っぽい地図とか
image.png

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