# Map Chart

## Data Formats

Map charts can display the following data formats on a map.

### Latitude/Longitude

Draws objects at the specified latitude and longitude coordinates. Latitude and longitude should be specified as numeric columns. Available for the following render types:

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

\* Flow requires two sets (source and target) of latitude/longitude information.

### Geohash <a href="#geohash" id="geohash"></a>

Draws objects at positions specified in [Geohash](https://en.wikipedia.org/wiki/Geohash) format.

For the following render types, objects are drawn at the center of the specified geohash:

* Pin
* Bubble
* Heatmap
* Flow

For the following render type, the area of the specified geohash is filled and drawn: (The size of the filled area varies depending on the precision of the specified geohash)

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

#### Geohash Examples

Below are examples of geohashes at different precision levels.

| Geohash  | Precision    | Example Location       | Area Size (approx.) |
| -------- | ------------ | ---------------------- | ------------------- |
| xn       | 2 characters | Tokyo area             | 630km × 500km       |
| xn7      | 3 characters | Central Tokyo          | 78km × 78km         |
| xn76     | 4 characters | Tokyo Station area     | 20km × 10km         |
| xn76u    | 5 characters | Around Tokyo Station   | 2.4km × 2.4km       |
| xn76ur   | 6 characters | Near Tokyo Station     | 610m × 300m         |
| xn76urx  | 7 characters | Tokyo Station vicinity | 76m × 76m           |
| xn76urxk | 8 characters | Around Tokyo Station   | 19m × 9m            |

#### BigQuery Usage Example

In BigQuery, you can use the `ST_GEOHASH` function to convert latitude and longitude data into geohashes. By converting to geohashes, you can efficiently aggregate and group data by area, rather than handling latitude and longitude individually.

Below is an example of using BigQuery's `ST_GEOHASH` function to convert latitude and longitude data into geohashes.

```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
```

### Geocode <a href="#geocode" id="geocode"></a>

Fills and draws the area associated with a geocode. Available for the following render type:

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

Geocodes should be specified as strings in the following format:

| Granularity                                | Geocode Format                                                                                                                                                                                         | Geocode Example |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- |
| Country                                    | <p>2-letter country code<br>(<a href="https://en.wikipedia.org/wiki/ISO_3166-1">ISO3166-1</a>, uppercase)</p>                                                                                          | US              |
| Prefecture (Japan only)                    | <p>"JP-"+2-digit prefecture code<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           |
| Municipality (Japan only)                  | <p>"JP-"+5-digit municipality code<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        |
| First 2 digits of postal code (Japan only) | "JP-POST-"+first 2 digits of postal code                                                                                                                                                               | JP-POST-10      |
| First 3 digits of postal code (Japan only) | "JP-POST-"+first 3 digits of postal code                                                                                                                                                               | JP-POST-100     |

The geospatial data used for filling is a lightweight version processed from the following data:

* Global country border data: [Natural Earth](https://www.naturalearthdata.com/)
* Japanese administrative boundary data: ["National Land Numerical Information (Administrative Area Data)" (Ministry of Land, Infrastructure, Transport and Tourism)](https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03-2025.html)
* Postal code boundary data: [Postal Code Boundary Data (Map Geography Sandbox)](https://hanishina.net/maps/yubindata.html)

Note that even if a geocode format is valid, geocodes not included in the above data cannot be drawn.

#### Geocode Samples

The following are sample geocodes. For a list of available geocodes, please refer to the [Geocode List CSV file](https://static.cdm.test/public/geojson/codes.csv).

| Geocode     | Name                       |
| ----------- | -------------------------- |
| US          | United States              |
| JP          | Japan                      |
| JP-01       | Hokkaido                   |
| JP-02       | Aomori Prefecture          |
| JP-03       | Iwate Prefecture           |
| JP-01100    | Sapporo City               |
| JP-01101    | Sapporo City, Chuo Ward    |
| JP-01102    | Sapporo City, Kita Ward    |
| JP-01103    | Sapporo City, Higashi Ward |
| JP-01202    | Hakodate City              |
| JP-01203    | Otaru City                 |
| JP-01204    | Asahikawa City             |
| JP-POST-10  | 〒10X-XXXX                  |
| JP-POST-100 | 〒100-XXXX                  |

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

Draws GeoJSON-formatted geometry data on a map. Available for the following render types:

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

Specify JSON of the following geometry types as string type:

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

#### GeoJSON Sample

```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 Usage Example

In BigQuery, you can use the `ST_ASGEOJSON` function to convert geometry data to GeoJSON format. The following example converts the `county_geom` column from the `bigquery-public-data.geo_us_boundaries.counties` table to GeoJSON format.

```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
```

If the size of the geometry data to be drawn is large, it may exceed the query result size limit and cause an error. In such cases, you can use the `ST_SIMPLIFY` function to simplify the geometry data and reduce its size. (We recommend simplifying large geometry data to the minimum necessary size, as it can also affect rendering performance)

```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
```

## Usage Limitations

Since map charts use WebGL to render maps, the following limitations apply:

* Cannot be rendered in browsers that do not support WebGL
* Due to WebGL context number limitations, when attempting to render many map charts simultaneously, previously rendered charts may be discarded
  * They can be re-displayed by re-rendering, but please be careful not to have too many map charts per page
