# 地図チャート

## データ形式

地図チャートでは以下のデータ形式を地図上に表示することができます。

### 緯度・経度

指定された緯度・経度の位置にオブジェクトを描画します。 緯度・経度はそれぞれ数値型のカラムを指定します。 以下の描画タイプで利用できます。

| <p>ピン </p><p><picture><source srcset="https://1959197998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvyRvOrlY46GCAFYEPPGZ%2Fuploads%2Fgit-blob-4dc747964dda8a7810bc0494c3217696b0e81e5b%2Fmap-pin-dark.png?alt=media" media="(prefers-color-scheme: dark)"><img src="https://1959197998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvyRvOrlY46GCAFYEPPGZ%2Fuploads%2Fgit-blob-9bc731572d345ca294a6c75c72dd54c030e17a75%2Fmap-pin-light.png?alt=media" alt="Map Pin"></picture></p>                 | <p>バブル </p><p><picture><source srcset="https://1959197998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvyRvOrlY46GCAFYEPPGZ%2Fuploads%2Fgit-blob-4c90bf12f6420d544c294739ff5497e665b802e0%2Fmap-bubble-dark.png?alt=media" media="(prefers-color-scheme: dark)"><img src="https://1959197998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvyRvOrlY46GCAFYEPPGZ%2Fuploads%2Fgit-blob-1cfbc03082999a036ce14e6096a19d6124ace267%2Fmap-bubble-light.png?alt=media" alt="Map Bubble"></picture></p> |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>ヒートマップ </p><p><picture><source srcset="https://1959197998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvyRvOrlY46GCAFYEPPGZ%2Fuploads%2Fgit-blob-70b8b984a14cded52fa57cd08d778a77961cb54f%2Fmap-heatmap-dark.png?alt=media" media="(prefers-color-scheme: dark)"><img src="https://1959197998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvyRvOrlY46GCAFYEPPGZ%2Fuploads%2Fgit-blob-c2674e6d8ca75753be1fe07b0c89e5c211680b3f%2Fmap-heatmap-light.png?alt=media" alt="Map Heatmap"></picture></p> | <p>フロー\* </p><p><picture><source srcset="https://1959197998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvyRvOrlY46GCAFYEPPGZ%2Fuploads%2Fgit-blob-26648280b5fc054b563eeafa6a59159b18932d68%2Fmap-flow-dark.png?alt=media" media="(prefers-color-scheme: dark)"><img src="https://1959197998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvyRvOrlY46GCAFYEPPGZ%2Fuploads%2Fgit-blob-b8d6d1e9aedb5a965c08794ddaf60278e923ff26%2Fmap-flow-light.png?alt=media" alt="Map Flow"></picture></p>     |

\* フローでは2組（ソースとターゲット）の緯度・経度情報が必要になります。

### ジオハッシュ <a href="#geohash" id="geohash"></a>

[ジオハッシュ](https://ja.wikipedia.org/wiki/%E3%82%B8%E3%82%AA%E3%83%8F%E3%83%83%E3%82%B7%E3%83%A5)の形式で指定された位置にオブジェクトを描画します。

以下の描画タイプ（緯度・経度と同様）では、指定されたジオハッシュの中心点にオブジェクトを描画します。

* ピン
* バブル
* ヒートマップ
* フロー

以下の描画タイプでは、指定されたジオハッシュの領域を塗りつぶして描画します。 （指定するジオハッシュの精度によって、塗りつぶす領域の大きさが変化します）

| <p>メッシュ </p><p><picture><source srcset="https://1959197998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvyRvOrlY46GCAFYEPPGZ%2Fuploads%2Fgit-blob-ab055f97cfce67862ec05f7a018aa4f223accd05%2Fmap-mesh-dark.png?alt=media" media="(prefers-color-scheme: dark)"><img src="https://1959197998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvyRvOrlY46GCAFYEPPGZ%2Fuploads%2Fgit-blob-b2b977b8b1fa8625b951840180477bd32a813358%2Fmap-mesh-light.png?alt=media" alt="Map Mesh"></picture></p> |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

#### ジオハッシュサンプル

以下にジオハッシュのサンプルを示します。

| ジオハッシュ   | 精度  | 位置の例   | 領域サイズ (約)     |
| -------- | --- | ------ | ------------- |
| 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 の使用例

BigQuery では `ST_GEOHASH` 関数を使用して、緯度・経度のデータをジオハッシュに変換できます。 ジオハッシュに変換することで、緯度・経度を個別に扱うよりも効率的にエリア単位での集計やグルーピングが可能になります。

以下は、BigQuery の `ST_GEOHASH` 関数を使用して、緯度・経度のデータをジオハッシュに変換する例です。

```sql
SELECT
  ST_GEOHASH(ST_GEOGPOINT(longitude, latitude), 6) AS geohash,
  COUNT(*) AS station_count
FROM
  `bigquery-public-data.new_york_citibike.citibike_stations`
GROUP BY
  geohash
ORDER BY
  station_count DESC
```

### ジオコード <a href="#geocode" id="geocode"></a>

ジオコードに紐づく領域を塗りつぶして描画します。 以下の描画タイプで利用できます。

| <p>エリア </p><p><picture><source srcset="https://1959197998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvyRvOrlY46GCAFYEPPGZ%2Fuploads%2Fgit-blob-674c4f27fd9eea40dbd4eadab6c8348be7bafade%2Fmap-area-dark.png?alt=media" media="(prefers-color-scheme: dark)"><img src="https://1959197998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvyRvOrlY46GCAFYEPPGZ%2Fuploads%2Fgit-blob-4e544f02cbd037e808f5e027ccea603bda31e50a%2Fmap-area-light.png?alt=media" alt="Map Area"></picture></p> |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

ジオコードは、以下の形式の文字列で指定してください。

| 粒度              | ジオコードの形式                                                                                                                                                                                | ジオコードの例     |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| 国               | <p>2文字の国コード<br>(<a href="https://ja.wikipedia.org/wiki/ISO_3166-1">ISO3166-1</a>,大文字)</p>                                                                                               | JP          |
| 都道府県(日本のみ)      | <p>"JP-"+2桁の都道府県コード<br>(<a href="https://ja.wikipedia.org/wiki/%E5%85%A8%E5%9B%BD%E5%9C%B0%E6%96%B9%E5%85%AC%E5%85%B1%E5%9B%A3%E4%BD%93%E3%82%B3%E3%83%BC%E3%83%89">JIS X 0402</a>)</p> | JP-13       |
| 市区町村(日本のみ)      | <p>"JP-"+5桁の市区町村コード<br>(<a href="https://ja.wikipedia.org/wiki/%E5%85%A8%E5%9B%BD%E5%9C%B0%E6%96%B9%E5%85%AC%E5%85%B1%E5%9B%A3%E4%BD%93%E3%82%B3%E3%83%BC%E3%83%89">JIS X 0402</a>)</p> | JP-13101    |
| 郵便番号の上位2桁(日本のみ) | "JP-POST-"+郵便番号の上位2桁                                                                                                                                                                    | JP-POST-10  |
| 郵便番号の上位3桁(日本のみ) | "JP-POST-"+郵便番号の上位3桁                                                                                                                                                                    | JP-POST-100 |

塗りつぶしに使う地理空間データは、以下のデータを加工して軽量化したものです。

* 全世界の国境データ: [Natural Earth](https://www.naturalearthdata.com/)
* 日本国内の境界データ: [「国土数値情報（行政区画データ）」（国土交通省）](https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03-2025.html)
* 郵便番号の境界データ: [郵便番号境界データ（地図地理Sandbox）](https://hanishina.net/maps/yubindata.html)

なお、ジオコードの形式として有効であっても、上記データに含まれないジオコードは描画できません。

#### ジオコードサンプル

以下にジオコードのサンプルを示します。 指定可能なジオコードの一覧は[ジオコード一覧のCSVファイル](https://static.cdm.test/public/geojson/codes.csv)を参照してください。

| ジオコード       | 名称        |
| ----------- | --------- |
| US          | アメリカ合衆国   |
| JP          | 日本        |
| JP-01       | 北海道       |
| JP-02       | 青森県       |
| JP-03       | 岩手県       |
| JP-01100    | 札幌市       |
| JP-01101    | 札幌市中央区    |
| JP-01102    | 札幌市北区     |
| JP-01103    | 札幌市東区     |
| JP-01202    | 函館市       |
| JP-01203    | 小樽市       |
| JP-01204    | 旭川市       |
| JP-POST-10  | 〒10X-XXXX |
| JP-POST-100 | 〒100-XXXX |

### GeoJSON <a href="#geojson" id="geojson"></a>

GeoJSON形式で指定されたジオメトリデータを地図上に描画します。 以下の描画タイプで利用できます。

| <p>ポリゴン </p><p><picture><source srcset="https://1959197998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvyRvOrlY46GCAFYEPPGZ%2Fuploads%2Fgit-blob-c9df25d2789791ba310475bd4208c9ff31f0b663%2Fmap-polygon-dark.png?alt=media" media="(prefers-color-scheme: dark)"><img src="https://1959197998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvyRvOrlY46GCAFYEPPGZ%2Fuploads%2Fgit-blob-65c3fee1d181522c2d1dfc450d9c90a77ccaca97%2Fmap-polygon-light.png?alt=media" alt="Map Polygon"></picture></p> | <p>ポリライン </p><p><picture><source srcset="https://1959197998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvyRvOrlY46GCAFYEPPGZ%2Fuploads%2Fgit-blob-8ecd2e5d239dec20f77e6f9dda870fd3f6867690%2Fmap-polyline-dark.png?alt=media" media="(prefers-color-scheme: dark)"><img src="https://1959197998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvyRvOrlY46GCAFYEPPGZ%2Fuploads%2Fgit-blob-9ffc8e62f8f96160f7cecd9b2e7cb41f6f987a81%2Fmap-polyline-light.png?alt=media" alt="Map Polyline"></picture></p> |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

以下のジオメトリ型のJSONを文字列型で指定してください。

* `Point`
* `LineString`
* `Polygon`
* `MultiPoint`
* `MultiLineString`
* `MultiPolygon`
* `GeometryCollection`

#### GeoJSONのサンプル

```json
{
  "type": "Polygon",
  "coordinates": [
    [
      [-73.9812, 40.7681],
      [-73.9581, 40.7681],
      [-73.9581, 40.8007],
      [-73.9812, 40.8007],
      [-73.9812, 40.7681]
    ]
  ]
}
```

#### BigQuery の使用例

BigQuery では `ST_ASGEOJSON` 関数を使用して、ジオメトリデータを GeoJSON 形式に変換できます。 以下は、`bigquery-public-data.geo_us_boundaries.counties` テーブルの `county_geom` カラムを GeoJSON 形式に変換する例です。

```sql
SELECT
  * EXCEPT (county_geom),
  ST_ASGEOJSON(county_geom) AS county_geom
FROM
  `bigquery-public-data.geo_us_boundaries.counties`
WHERE
  state_fips_code = '36'  -- New York
```

描画対象のジオメトリデータのサイズが大きい場合、クエリ実行結果のサイズ制限に抵触し、エラーになる場合があります。 その場合、`ST_SIMPLIFY` 関数を使用して、ジオメトリデータを簡略化してサイズを減らすことができます。 （巨大なジオメトリデータは、描画のパフォーマンスにも影響を与えるため、必要最低限のサイズに簡略化することをお勧めします）

```sql
SELECT
  * EXCEPT (county_geom),
  ST_ASGEOJSON(ST_SIMPLIFY(county_geom, 1000)) AS county_geom
FROM
  `bigquery-public-data.geo_us_boundaries.counties`
WHERE
  state_fips_code = '36'  -- New York
```

## 利用上の制限

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

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