鉄道を強調した背景地図

はじめに

鉄道をテーマとした地図に使えるように、鉄道を強調した背景地図のスタイルを作成してみました。

Mapbox gl js/Maplibre gl js に対応したスタイルです。

デモサイト

• 2D
• 3D 風

レポジトリ

※紹介記事はこちら

コンセプト

鉄道を強調した地図としては、国土地理院からも「鉄道路線図」のサンプルスタイルが公開されています。これは、鉄道関連の地物のみを表示したスタイルとなっています。

一方、今回は別のアイデアとして、 表示する地物はベースとなるものから大きくは変えず、レイヤ順・色の変更で鉄道を強調しています。

工夫としては以下の通りです。

• 地図全体の色は、淡い色とする。
  • 色相はなるべく統一する。
• 鉄道（強調した地物）のみ、濃い色とする。
  • 他の地物との違いがはっきりするような色を選ぶ。
  • 色相を対比できると見やすいが、背景地図として使うことを考えると、彩度を落としたり、色相をまとめたりした方が使いやすいかもしれない。
• 鉄道の表示順を他の地物（道路等）よりも高くする。
  • 注記や 3D の地物（fill-extrusion タイプのレイヤ）よりも高くすると見た目に問題が生じるので注意。

これを、自作のモノクロ風の地図と比較してみると、情報量を落とさずに鉄道が分かりやすくなっているのがお分かりいただけるかと思います。

• 鉄道を強調
  
• 単なるモノクロ風
  

また、自治体等の境界も色を濃くして強調しています。鉄道の地図を見るときは、どの自治体を通っているのかを同時に把握したくなる場面が多いです。

色の調整方法

ロジックは、convert.js に追加しています。例として、色決定に関するロジックを以下に抜粋します。駅のラインデータや、駅名の注記も色調整しても良いかもしれません。

if(mode == "railway"){
  // 全体の色調整（青基調の淡色へ）
  h = 200;
  // モノクロ「風」なので、彩度を少し残す
  if( s > 0 ) s = 10;
  if( s > 0 && info["prop-name"].match("text-color") ) s = 30;
  // 注記以外の明度を上げて淡い色する
  if( l < 50 && l > 0 && !info["prop-name"].match("text-color")) l = l + (50 - l);
  if( l < 100 && l > 0 && !info["prop-name"].match("text-color")) l = l + (100 - l) * 0.5;
  // 鉄道の色調整
  if(info && info.colorInfo 
     && info.colorInfo.match(/-railway-(.+)-main-/)){
     h = 230; s = 50; l = 25;
  }
  // 水部の色調整
  if(info && info.colorInfo 
     && info.colorInfo.match(/-water-main-(vivid|main)-/)){
     h = 210; s = 100; l = 85;
  }
  // 自治体等の境界線の色調整
  if(info && info.colorInfo 
     && info.colorInfo.match(/-border-muni-main-/)){
     h = 230; s = 0; l = 25;
  }
  // 決定した色を返す
  return(["hsla", h, s + "%", l + "%", a]);
}

過去の実装との比較

実は、色を際立たせることで特定の地物（鉄道）を強調するアイデアは、以前も地理院地図Vector で実装していますが、今回は最適化ベクトルタイルで実装しています。

また、前回は、背景地図として使うことを考えなかったので、鉄道を青、その他を黄色、と分かりやすい色相を採用していました（下記画像）。駅名等も強調表示しています。「鉄道路線図」として利用する場合はこれくらいやった方が断然わかりやすいかと思いますが、背景地図としては少し主張が激しすぎる気もしますので、今回は落ち着かせています。

なお、上記のコードを変更することで、このくらい強く強調したスタイルにもできるかと思います。

使用例

背景地図としての使用感として、前回の記事で紹介した鉄道駅の災害リスクの目安を示す地図に今回のスタイルを採用してみましたので、ご紹介します。

※国土地理院最適化ベクトルタイル(標準地図風スタイル) 、 国土数値情報 鉄道データ（令和4年度）、重ねるハザードマップを利用

おわりに

今回の方法は、鉄道以外にも使えると思いますので、デザインの幅を広げていきたいです。