CSS filter を使って背景地図タイルをグレースケール化する

1 Kudo

地図アプリを開発していると、背景の地図タイルの色を変えたい！ということありませんか？

たとえば、上の画像のようにグレースケール化することで、主題となるレイヤーの色味を認識しやすくすることは、データを重ねて可視化する際にはよくある手法です。

最近ですと、ベクタータイルと言われる新しい背景地図タイルの配信方式を採用することで、クライアント側で動的に道路や建物などの色を変更することができます。

しかし、今回ご紹介するのは画像形式で配信される従来の背景地図タイルに対して、グレースケール化する方法です！

画像なのにどうやって色を…

「そうか、CSS filter か」とお気づきになられたあなたは鋭い。

「Canvas か」と思ったあなた、さすがです。

が、今回は CSS です。

CSS には画像に効果を加えるための filter プロパティが用意されており、スマートフォンのアプリでよくある写真にエフェクトを加えるアレに近いことができます。

背景地図タイルも 1 枚 1 枚は <img> タグでレンダリングされた画像なので、CSS filter を使って加工することができます。

ベクタータイルのように道路、建物…などの要素ごとに色を細かく指定することはできませんが、全体の色味を変えることはできます。

CSS filter

CSS filter には色のフィルター効果だけでなく、ぼかしや明度、コントラストなどの一般的な画像加工の機能を利用することができます。

さて、今回は画像をグレースケール化してみます。

グレースケール化には

filter: grayscale(100%);

を使います。たったこれだけ。

上記のように引数が 100% で完全にグレースケール化されます。

ちなみに、Google Chrome では -webkit- プレフィックスが必要なようです。

各ブラウザーでのサポート状況は Can I use... をご覧ください。

Internet Explorer はサポートしていないようですね。残念。

さて、わかりやすいサンプルとして同じ画像を 2 枚ならべて、片方に CSS filter を使ってグレースケール化してみました。

たったこれだけ CSS を記述すれば、画像がグレースケール化されます。

背景タイルをグレースケール化

では、少し応用して、背景地図のタイル画像をグレースケール化してみましょう。

ArcGIS API for JavaScript にてデフォルトで表示可能な Esri の背景地図を使います。

背景地図のタイル画像１枚１枚は <img> タグによってレンダリングされており、.esri-bitmap というクラス名があてられています。

よって、このクラスに対して CSS で先述したものと同じ filter を指定してあげるだけで、背景地図タイルをグレースケール化することができます。

以下が実際のコードと動作結果です。

おまけですが、JSFiddle は更新したコードをその場で実行できるので、CSS セクションの grayscale の部分を invert に書き換えてみてください。

書き換えたら、左上の [Run] をクリックすると、下の画像のように暗めのイメージになります。

invert は「反転」を意味しており、元の色調を反転させていくとこのような色合いになるようです。

JavaScript や HTML にはグレースケール化するためのコーディングは一切行っていません。

CSS だけで背景地図の色を変更しています。

JavaScript を組み合わせることで、ユーザー操作によって動的にグレースケール化するといった機能の実装も可能だと思います。

地図ライブラリでは、あまり CSS は触らないという方も多いかもしれませんが、CSS でできることは意外と多いです。

CSS でできることはライブラリに依存せず応用できることもあり、１つのテクニックとして採用する価値はあるかもしれません。

よい題材があればまた地図ライブラリにおける CSS テクニックを書いてみたいと思います。

関連リンク