Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

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

追記 (2018-06-25)

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

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

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

ツール

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

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

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

image.png

夜っぽい地図とか
image.png

紙っぽい地図とか
image.png

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away