IgcGeographicMapComponent – 背景地図を薄く表示する

IgcGeographicMapComponent で OpenStreetMap を背景に可視化を行うと、地図がカラフルなためにヒートマップやバブル、マーカーが背景に埋もれてしまうことがあります。下図はヒートマップを適用した例です。

本記事は、CSS のみを使って背景地図を薄く表示し、視認性を向上させる方法をご紹介します。

canvas に CSS フィルターを適用する

IgcGeographicMapComponentは内部的に 複数の<canvas>要素を重ねて描画しています。構成は基本的に以下のようになっています

• 先頭の canvas：背景地図（OpenStreetMap のタイル）
• 後続の canvas：シリーズ描画（ヒートマップ、バブル、マーカーなど）
• 最前面の canvas：操作・ヒットテスト用

この構造を利用することで、最初の canvas（背景地図）にのみスタイルを適用し、シリーズ描画には影響を与えない制御が可能です。

以下は、背景地図の色味を落とし、明るさを上げつつコントラストを抑えることで、ヒートマップやバブルを強調するための CSS の例です。

igc-geographic-map canvas:first-of-type {
  filter:
    grayscale(100%)
    brightness(1.2)
    contrast(0.7);
}

実行結果

上記 CSS を適用すると、背景地図は情報を保持したまま控えめに表示され、ヒートマップの可視化要素がより強調されます。