地図チャート

概要

地図チャート（template_type: 'MAP_CHART'）では、緯度経度・ジオハッシュ・ジオコード・GeoJSON のいずれかの形式で指定された位置情報を、地図上に描画できます。render_type により、ピン・バブル・ヒートマップ・エリア・メッシュ・フロー・ポリゴン・ポリラインなどの描画タイプを切り替えられます。

指定可能な描画タイプは次の通りです。指定する位置情報の形式によって利用可能な描画タイプが異なります。

`render_type`	描画タイプ	位置情報の形式	備考
`PIN`	ピン	緯度経度ジオハッシュ	指定された位置にピンを描画
`BUBBLE`	バブル	緯度経度ジオハッシュ	重みに応じたサイズの円を描画
`HEATMAP`	ヒートマップ	緯度経度ジオハッシュ	密度や重みに応じた濃淡で描画
`MESH`	メッシュ	ジオハッシュ	ジオハッシュの領域を塗りつぶして描画
`AREA`	エリア	ジオコード	ジオコードに紐づく行政区画等を塗りつぶして描画
`FLOW`	フロー	緯度経度ジオハッシュ	2点（ソース・ターゲット）間の動きを描画
`POLYGON`	ポリゴン	GeoJSON	GeoJSONの面・点を描画
`POLYLINE`	ポリライン	GeoJSON	GeoJSONの線・点を描画

事前にチャート設定についても確認してください。

位置情報の形式

緯度・経度

数値型の緯度(lat)・経度(lng)のカラムを指定します（フローでは source_lat / source_lng / target_lat / target_lng）。

ジオハッシュ

ジオハッシュの形式の文字列カラムを指定します。PIN / BUBBLE / HEATMAP / FLOW ではジオハッシュの中心点を、MESH ではジオハッシュの領域を塗りつぶして描画します。

主要なジオハッシュの精度と領域サイズ:

ジオハッシュ	精度	位置の例	領域サイズ (約)
`xn`	2文字	東京周辺	630km × 500km
`xn7`	3文字	東京都心部	78km × 78km
`xn76`	4文字	東京駅エリア	20km × 10km
`xn76u`	5文字	東京駅周辺	2.4km × 2.4km
`xn76ur`	6文字	東京駅近辺	610m × 300m
`xn76urx`	7文字	東京駅付近	76m × 76m
`xn76urxk`	8文字	東京駅周辺	19m × 9m

BigQueryでは ST_GEOHASH(ST_GEOGPOINT(lng, lat), <精度>) で緯度経度をジオハッシュに変換できます。

ジオコード

行政区画や郵便番号エリアを示すコード文字列です。AREA 描画タイプで利用します。指定可能な形式は次の通りです。

粒度	ジオコードの形式	例
国	2文字の国コード（ISO3166-1 大文字）	`JP`, `US`
都道府県（日本のみ）	`JP-` + 2桁の都道府県コード（JIS X 0402）	`JP-13`
市区町村（日本のみ）	`JP-` + 5桁の市区町村コード	`JP-13101`
郵便番号の上位2桁（日本のみ）	`JP-POST-` + 郵便番号の上位2桁	`JP-POST-10`
郵便番号の上位3桁（日本のみ）	`JP-POST-` + 郵便番号の上位3桁	`JP-POST-100`

指定可能なジオコードの一覧はジオコード一覧 (CSV) を参照してください。この一覧に含まれないジオコードは描画できません。

GeoJSON

GeoJSON のジオメトリオブジェクトをJSON文字列としたカラムを指定します。POLYGON / POLYLINE 描画タイプで利用します。指定可能なジオメトリ型は次の通りです。

Point
LineString
Polygon
MultiPoint
MultiLineString
MultiPolygon
GeometryCollection

BigQueryでは ST_ASGEOJSON(<geom>) でジオメトリ列をGeoJSON文字列に変換できます。サイズが大きい場合は ST_SIMPLIFY で簡略化することを推奨します（描画のパフォーマンスにも影響します）。

設定例

緯度経度のピン

緯度(station_lat)・経度(station_lng)のリストをピンで地図上に描画する場合、次のように設定します。

:::sql-block
```sql
SELECT
  station_name,
  station_lat,
  station_lng
FROM
  bike_stations
```

```yaml {.chart}
chartSettings:
  template_type: MAP_CHART
  component_settings:
    render_type: PIN
    location_type: LATLNG
    lat:
      - field: station_lat
    lng:
      - field: station_lng
    label:
      - field: station_name
```
:::

データソースのSQLの実行結果として出力されるカラムを、チャート設定内で参照します
- 以降の設定例では、データソースの定義は省略し、chartSettings の中身のみを記述しますが、チャート設定からは必ずデータソースのカラムを参照する必要があります
render_type: PIN を指定
location_type: LATLNG を指定し、lat / lng に緯度・経度のディメンション（各1つのみ）を指定
label にホバー時のラベルとして表示するカラム（任意）を指定
group_by を指定すると、その値ごとにピンの色を変えて描画できます

緯度経度のバブル

店舗(shop_id)ごとの位置(shop_lat / shop_lng)と売上(sales_amount)を、売上に応じたサイズのバブルで描画する場合、次のように設定します。

yaml

template_type: MAP_CHART
component_settings:
  render_type: BUBBLE
  location_type: LATLNG
  lat:
    - field: shop_lat
  lng:
    - field: shop_lng
  weight:
    - field: sales_amount
      aggregator: SUM
  label:
    - field: shop_id

render_type: BUBBLE を指定
weight にバブルサイズを決定するメトリクス（1つのみ・必須）を指定
バブルサイズの計算方法・範囲・不透明度は display_settings.bubble でカスタマイズ可能です（後述）

ジオハッシュのメッシュ

ジオハッシュ(location_geohash)ごとのイベント発生数(event_count)を、ジオハッシュ領域の濃淡で描画する場合、次のように設定します。

yaml

template_type: MAP_CHART
component_settings:
  render_type: MESH
  geohash:
    - field: location_geohash
  weight:
    - field: event_count
      aggregator: SUM

render_type: MESH を指定
geohash にジオハッシュのディメンション（1つのみ・必須）を指定
weight を指定すると、領域の塗りつぶし色がその値に応じて変化します

ジオコードのエリア

都道府県コード(prefecture_code 例: JP-13)ごとの人口(population)を、都道府県の領域に塗りつぶして描画する場合、次のように設定します。

yaml

template_type: MAP_CHART
component_settings:
  render_type: AREA
  geocode:
    - field: prefecture_code
  weight:
    - field: population
      aggregator: SUM

render_type: AREA を指定
geocode にジオコードのディメンション（1つのみ・必須）を指定
値に応じて領域の濃淡が変化します

緯度経度のフロー

出発地(from_lat / from_lng)と到着地(to_lat / to_lng)の間の移動回数(trip_count)を、フロー（線・曲線）で描画する場合、次のように設定します。

yaml

template_type: MAP_CHART
component_settings:
  render_type: FLOW
  location_type: LATLNG
  source_lat:
    - field: from_lat
  source_lng:
    - field: from_lng
  target_lat:
    - field: to_lat
  target_lng:
    - field: to_lng
  weight:
    - field: trip_count
      aggregator: SUM

render_type: FLOW を指定
location_type: LATLNG の場合、source_lat / source_lng / target_lat / target_lng をすべて指定
location_type: GEOHASH の場合、source_geohash / target_geohash を指定
パスタイプ（直線/曲線）や幅の範囲は display_settings.flow でカスタマイズ可能です（後述）

GeoJSONのポリゴン

GeoJSON 文字列(area_geojson)で指定された領域に、人口(population)に応じた濃淡でポリゴンを描画する場合、次のように設定します。

yaml

template_type: MAP_CHART
component_settings:
  render_type: POLYGON
  geojson:
    - field: area_geojson
  weight:
    - field: population
      aggregator: SUM

render_type: POLYGON（または POLYLINE）を指定
geojson にGeoJSON文字列のディメンション（1つのみ・必須）を指定
weight を指定すると、ポリゴン/ポリラインの塗りつぶし色や太さがその値に応じて変化します

データ加工オプション

描画対象の件数制限

limit により、描画対象のデータの件数を制限できます。詳細はデータの件数制限を参照してください。

ソート

order_by_custom で描画順を指定できます。詳細はデータのソートを参照してください。

表示のカスタマイズ

ベースマップの設定

display_settings.base_map で、地図の背景となるベースマップをカスタマイズできます。

type BaseMapSettings =
  | {
      base_map_type: 'MAP_PROVIDER';
      theme_type?: 'MONOCHROME' | 'COLORFUL';            // デフォルトは 'MONOCHROME'
      google_map_type_id_default?: 'roadmap' | 'terrain' | 'hybrid' | 'satellite';
                                                          // デフォルトは 'roadmap'
    }
  | {
      base_map_type: 'BLANK_MAP';
      blank_map_key?: 'WORLD' | 'JP';   // 白地図の種類。デフォルトは 'WORLD'
    };

base_map_type: 'MAP_PROVIDER' で外部の地図プロバイダの地図を、'BLANK_MAP' で白地図を背景にします（デフォルトは 'MAP_PROVIDER'）

コントロールの設定

display_settings.controls で、地図の初期表示位置・ズームレベルを指定できます。

type ControlsSettings = {
  default_zoom?: number;     // デフォルトズームレベル(0〜20)。デフォルトは 8
                             // 範囲を持たない単一データ表示時に適用される
                             // 範囲があるデータ・複数データの場合は自動調整
  initial_center?: string;   // 初期表示位置を「緯度,経度」形式で指定（例: "35.681,139.766"）
                             // 未指定の場合は、描画データから動的に算出
                             // 指定した場合は default_zoom も適用される
};

描画タイプごとの設定

render_type ごとに、専用の表示設定があります。

ピン

render_type: PIN の場合、display_settings.pin でピンサイズをカスタマイズできます。

type MapPinSettings = {
  pin_size?: number;  // ピンサイズ(px) 16〜64 で指定。デフォルトは 32
};

バブル

render_type: BUBBLE の場合、display_settings.bubble でバブルの見た目をカスタマイズできます。

type MapBubbleDisplaySettings = {
  bubble_size_calc_type?: 'LINEAR' | 'SQRT' | 'LOG';  // サイズ計算方法。デフォルトは 'SQRT'
  bubble_size_range?: {
    start: number;  // 最小サイズ(px) 1〜64 で指定。デフォルトは 4
    end: number;    // 最大サイズ(px) 1〜64 で指定。デフォルトは 32
  };
  opacity?: number;  // 不透明度 0.0〜1.0 で指定。デフォルトは 0.6
};

ヒートマップ

render_type: HEATMAP の場合、display_settings.heatmap で半径・不透明度をカスタマイズできます。

type MapHeatmapSettings = {
  radius_pixels?: number;  // 半径(px) 16〜64 で指定。デフォルトは 32
  opacity?: number;        // 不透明度 0.0〜1.0 で指定。デフォルトは 0.6
};

エリア

render_type: AREA の場合、display_settings.area でエリアの見た目をカスタマイズできます。

type MapAreaSettings = {
  opacity?: number;        // 不透明度 0.0〜1.0 で指定。デフォルトは 0.6
  hide_border?: boolean;   // 境界線を非表示にする場合は true を指定
};

メッシュ

render_type: MESH の場合、display_settings.mesh でメッシュの不透明度をカスタマイズできます。

type MapMeshSettings = {
  opacity?: number;  // 不透明度 0.0〜1.0 で指定。デフォルトは 0.6
};

フロー

render_type: FLOW の場合、display_settings.flow でフローのパスタイプ・幅・不透明度をカスタマイズできます。

type MapFlowSettings = {
  path_type?: 'ARC' | 'LINE';  // パスタイプ。デフォルトは 'LINE'
                               // 'LINE': 直線、'ARC': 曲線（弧）
  path_width?: {
    start: number;  // 最小幅(px) 1〜32 で指定。デフォルトは 4
    end: number;    // 最大幅(px) 1〜32 で指定。デフォルトは 16
  };
  opacity?: number;  // 不透明度 0.0〜1.0 で指定。デフォルトは 0.6
};

ポリゴン

render_type: POLYGON の場合、display_settings.polygon でポリゴンの見た目をカスタマイズできます。

type MapPolygonSettings = {
  opacity?: number;        // 不透明度 0.0〜1.0 で指定。デフォルトは 0.6
  hide_border?: boolean;   // 境界線を非表示にする場合は true を指定
  point_radius?: number;   // GeoJSON の Point 型を描画する際の点の半径(px)。デフォルトは 3
};

ポリライン

render_type: POLYLINE の場合、display_settings.polyline でポリラインの見た目をカスタマイズできます。

type MapPolylineSettings = {
  line_width?: number;        // 線の幅(px) 1〜32 で指定。デフォルトは 3
                              // (weight 未指定時に利用)
  line_width_range?: {        // weight 指定時の幅の範囲(px)
    start: number;            // 最小幅。デフォルトは 3
    end: number;              // 最大幅。デフォルトは 12
  };
  point_radius?: number;      // GeoJSON の Point 型を描画する際の点の半径(px)。デフォルトは 3
};

凡例の設定

display_settings.legend で凡例の表示をカスタマイズできます。設定可能な項目はその他のチャート設定を参照してください。

その他の設定

次のカスタマイズについてはその他のチャート設定を参照してください
- テキスト設定(display_settings.text)

利用上の制限

地図チャートはWebGLを利用して地図を描画しているため、以下の制限があります。

WebGLが利用できないブラウザでは描画できません
WebGLのコンテキスト数の制限により、多数の地図チャートを同時に描画しようとすると、先に描画したチャートの表示が破棄される場合があります
- 再描画を行えば再表示されますが、1ページあたりの地図チャートの数が増えすぎないように注意してください

型定義

render_type により、描画タイプを指定します。render_type ごとに、指定可能な位置情報（location_type 等）と表示設定が異なります
以下の型については、該当ドキュメントを参照してください
共通の表示設定の型定義は対応するセクションを参照してください
- BaseMapSettings: ベースマップの設定
- ControlsSettings: コントロールの設定

共通の型定義

type DisplaySettingsCommon = {
  base_map?: BaseMapSettings;
  controls?: ControlsSettings;
  legend?: LegendSettings;
  text?: TextSettings;
};

描画タイプ：ピン

type ChartSettings = {
  template_type: 'MAP_CHART';
  component_settings: ComponentSettingsCommon & {
    render_type: 'PIN';
    label?: [AttributeField] | [];
    group_by?: DimensionField[];
    order_by_custom?: SqlOrderBy[];
    limit?: number;
  } & (
    | {
        location_type: 'LATLNG';
        lat: [DimensionField];
        lng: [DimensionField];
      }
    | {
        location_type: 'GEOHASH';
        geohash: [DimensionField];
      }
  );
  display_settings?: DisplaySettingsCommon & {
    pin?: MapPinSettings;  // for PIN -> 「ピン」セクションを参照
  };
};

描画タイプ：バブル

type ChartSettings = {
  template_type: 'MAP_CHART';
  component_settings: ComponentSettingsCommon & {
    render_type: 'BUBBLE';
    weight: [MetricsField];   // 必須
    label?: [AttributeField] | [];
    group_by?: DimensionField[];
    order_by_custom?: SqlOrderBy[];
    limit?: number;
  } & (
    | {
        location_type: 'LATLNG';
        lat: [DimensionField];
        lng: [DimensionField];
      }
    | {
        location_type: 'GEOHASH';
        geohash: [DimensionField];
      }
  );
  display_settings?: DisplaySettingsCommon & {
    bubble?: MapBubbleDisplaySettings;  // 「バブル」セクションを参照
  };
};

描画タイプ：ヒートマップ

type ChartSettings = {
  template_type: 'MAP_CHART';
  component_settings: ComponentSettingsCommon & {
    render_type: 'HEATMAP';
    weight?: [MetricsField] | [];   // 任意
    order_by_custom?: SqlOrderBy[];
    limit?: number;
  } & (
    | {
        location_type: 'LATLNG';
        lat: [DimensionField];
        lng: [DimensionField];
      }
    | {
        location_type: 'GEOHASH';
        geohash: [DimensionField];
      }
  );
  display_settings?: DisplaySettingsCommon & {
    heatmap?: MapHeatmapSettings;  // 「ヒートマップ」セクションを参照
  };
};

描画タイプ：エリア

type ChartSettings = {
  template_type: 'MAP_CHART';
  component_settings: ComponentSettingsCommon & {
    render_type: 'AREA';
    geocode: [DimensionField];
    weight?: [MetricsField] | [];   // 任意
    group_by?: DimensionField[];
    order_by_custom?: SqlOrderBy[];
    limit?: number;
  };
  display_settings?: DisplaySettingsCommon & {
    area?: MapAreaSettings;  // 「エリア」セクションを参照
  };
};

描画タイプ：メッシュ

type ChartSettings = {
  template_type: 'MAP_CHART';
  component_settings: ComponentSettingsCommon & {
    render_type: 'MESH';
    geohash: [DimensionField];
    weight?: [MetricsField] | [];   // 任意
    label?: [AttributeField] | [];
    group_by?: DimensionField[];
    order_by_custom?: SqlOrderBy[];
    limit?: number;
  };
  display_settings?: DisplaySettingsCommon & {
    mesh?: MapMeshSettings;  // 「メッシュ」セクションを参照
  };
};

描画タイプ：フロー

type ChartSettings = {
  template_type: 'MAP_CHART';
  component_settings: ComponentSettingsCommon & {
    render_type: 'FLOW';
    weight?: [MetricsField] | [];   // 任意
    label?: [AttributeField] | [];
    group_by?: DimensionField[];
    order_by_custom?: SqlOrderBy[];
    limit?: number;
  } & (
    | {
        location_type: 'LATLNG';
        source_lat: [DimensionField];
        source_lng: [DimensionField];
        target_lat: [DimensionField];
        target_lng: [DimensionField];
      }
    | {
        location_type: 'GEOHASH';
        source_geohash: [DimensionField];
        target_geohash: [DimensionField];
      }
  );
  display_settings?: DisplaySettingsCommon & {
    flow?: MapFlowSettings;  // 「フロー」セクションを参照
  };
};

描画タイプ：ポリゴン・ポリライン

type ChartSettings = {
  template_type: 'MAP_CHART';
  component_settings: ComponentSettingsCommon & {
    render_type: 'POLYGON' | 'POLYLINE';
    geojson: [DimensionField];
    weight?: [MetricsField] | [];   // 任意
    label?: [AttributeField] | [];
    group_by?: DimensionField[];
    order_by_custom?: SqlOrderBy[];
    limit?: number;
  };
  display_settings?: DisplaySettingsCommon & {
    polygon?: MapPolygonSettings;     // for POLYGON
    polyline?: MapPolylineSettings;   // for POLYLINE
  };
};

地図チャート ​

概要 ​

位置情報の形式 ​

緯度・経度 ​

ジオハッシュ ​

ジオコード ​

GeoJSON ​

設定例 ​

緯度経度のピン ​

緯度経度のバブル ​

ジオハッシュのメッシュ ​

ジオコードのエリア ​

緯度経度のフロー ​

GeoJSONのポリゴン ​

データ加工オプション ​

描画対象の件数制限 ​

ソート ​

表示のカスタマイズ ​

ベースマップの設定 ​

コントロールの設定 ​

描画タイプごとの設定 ​

ピン ​

バブル ​

ヒートマップ ​

エリア ​

メッシュ ​

フロー ​

ポリゴン ​

ポリライン ​

凡例の設定 ​

その他の設定 ​

利用上の制限 ​

型定義 ​

共通の型定義 ​

描画タイプ：ピン ​

描画タイプ：バブル ​

描画タイプ：ヒートマップ ​

描画タイプ：エリア ​

描画タイプ：メッシュ ​

描画タイプ：フロー ​

描画タイプ：ポリゴン・ポリライン ​

地図チャート

概要

位置情報の形式

緯度・経度

ジオハッシュ

ジオコード

GeoJSON

設定例

緯度経度のピン

緯度経度のバブル

ジオハッシュのメッシュ

ジオコードのエリア

緯度経度のフロー

GeoJSONのポリゴン

データ加工オプション

描画対象の件数制限

ソート

表示のカスタマイズ

ベースマップの設定

コントロールの設定

描画タイプごとの設定

ピン

バブル

ヒートマップ

エリア

メッシュ

フロー

ポリゴン

ポリライン

凡例の設定

その他の設定

利用上の制限

型定義

共通の型定義

描画タイプ：ピン

描画タイプ：バブル

描画タイプ：ヒートマップ

描画タイプ：エリア

描画タイプ：メッシュ

描画タイプ：フロー

描画タイプ：ポリゴン・ポリライン