GBFSデータ+MapLibre GL JSでシェアサイクルマップを作成する

はじめに

この記事は シェアモビリティの標準的なデータフォーマット GBFS Advent Calendar 2023 12日目の記事です。

ドコモ・バイクシェアから日本全国のポートのデータがオープンデータ（CC BY 4.0）として公開されたので、ハローサイクリングのポートのデータとあわせて、MapLibre GL JS+GBFSデータでシェアサイクルマップを作成してみました。

デモサイト

データの取得

• pythonで下記の公共交通オープンデータセンターよりGBFSデータ（station_information.json）を取得します。
  ドコモ・バイクシェア
  URL: https://api-public.odpt.org/api/v4/gbfs/docomo-cycle/station_information.json
  HELLOCYCLING
  URL: https://api-public.odpt.org/api/v4/gbfs/hellocycling/station_information.json

gbfs_station_dl.py

import json
import requests
import pandas as pd
from io import StringIO

# URLへアクセスしてデータを取得
url = requests.get("https://api-public.odpt.org/api/v4/gbfs/hellocycling/station_information.json")
# url = requests.get("https://api-public.odpt.org/api/v4/gbfs/docomo-cycle/station_information.json")

text = url.text

# 変換したいJSONファイルを読み込む
df = pd.read_json(StringIO(text))
print(df.head())

# ネスト（入れ子）構造になっている"data"という項目を展開する
df_json = pd.json_normalize(df['data'][0])

# JSONをCSVへ変換して文字コードをutf8で出力
df_json.to_csv(r"D:\交通データ\公共交通オープンデータセンター\シェアサイクルデータ\csv\hellocycling\hellocycling_station.csv",
               encoding='utf8', index=False)
'''
df_json.to_csv(r"D:\交通データ\公共交通オープンデータセンター\シェアサイクルデータ\csv\docomo-cycle\docomo-cycle_station.csv",
               encoding='utf8', index=False)  
'''
print('処理終了')

取得結果

• ドコモ・バイクシェア
  https://github.com/shi-works/bikeshare-map/blob/main/data/docomo-cycle_station.csv
• HELLOCYCLING
  https://github.com/shi-works/bikeshare-map/blob/main/data/hellocycling_station.csv

CSVからGeoJSONへの変換（QGIS）

• CSVからGeoJSONへの変換にはQGISを使用します。
• ドコモ・バイクシェア
  https://github.com/shi-works/bikeshare-map/blob/main/data/docomo-cycle_station.geojson
• HELLOCYCLING
  https://github.com/shi-works/bikeshare-map/blob/main/data/hellocycling_station.geojson

GeoJSONをMapLibre GL JSで表示する

• 上記の方法で生成したGeoJSONとMapLibre GL JSで作成したデモサイトとソースコードを下記のGitHubにて公開しています。

コードの解説

GeoJSONの読み込み

• map.addSourceでgeojsonを読み込みます。

javascript

            // ドコモ・バイクシェアソース
            map.addSource('docomo-cycle', {
                'type': 'geojson',
                'data': './data/docomo-cycle_station.geojson',
                attribution: '<a href="https://ckan.odpt.org/dataset/c_bikeshare_gbfs-d-nationwide-bikeshare">株式会社ドコモ・バイクシェア / 公共交通オープンデータ協議会</a>'
            });

            // （中略）
            
            // HELLOCYCLINGソース
            map.addSource('hellocycling', {
                'type': 'geojson',
                'data': './data/hellocycling_station.geojson',
                attribution: '<a href="https://ckan.odpt.org/dataset/c_bikeshare_gbfs-openstreet">OpenStreet株式会社 / 公共交通オープンデータ協議会</a>'
            });

レイヤの表示（ポイント）

• map.addLayerでシェアサイクルのポイントデータをレイヤとして表示します。
• ポイントデータのレイヤは、ズームレベル9.5～23の間で表示されます。
• グロー(発光)エフェクトを適用するために、レイヤーを3つ重ねています。

「グロー(発光)エフェクト」とは、John M. Nelson氏が開発したカートグラフィー(地図製作)の手法のひとつで、マッピングしたデータを発光しているかのように表現するテクニックです。（引用元：Mapbox Japanの公式note）

javascript

            // HELLOCYCLINGポイントレイヤ
            map.addLayer({
                'id': 'hellocycling-points-1',
                'type': 'circle',
                'source': 'hellocycling',
                'minzoom': 9.5,
                'maxzoom': 23,
                'paint': {
                    'circle-color': 'rgba(249, 202, 34, 1)',
                    'circle-radius': 18,
                    'circle-blur': 2.5,
                    'circle-opacity': 0.6
                }
            });

            // HELLOCYCLINGポイントレイヤ
            map.addLayer({
                'id': 'hellocycling-points-2',
                'type': 'circle',
                'source': 'hellocycling',
                'minzoom': 9.5,
                'maxzoom': 23,
                'paint': {
                    'circle-color': 'rgba(249, 202, 34, 1)',
                    'circle-radius': 9,
                    'circle-blur': 1.5,
                    'circle-opacity': 0.8
                }
            });

            // HELLOCYCLINGポイントレイヤ
            map.addLayer({
                'id': 'hellocycling-points-3',
                'type': 'circle',
                'source': 'hellocycling',
                'minzoom': 9.5,
                'maxzoom': 23,
                'paint': {
                    'circle-color': 'rgba(255, 255, 255, 1)',
                    'circle-radius': 1,
                    'circle-blur': 0,
                    'circle-opacity': 1
                }
            });

レイヤの表示（ヒートマップ）

• map.addLayerでシェアサイクルのポイントデータをヒートマップレイヤとして表示します。
• ヒートマップレイヤは、ズームレベル0～9.5の間で表示されます。

javascript

            // HELLOCYCLINGヒートマップレイヤ
            map.addLayer({
                "id": "hellocycling-heatmap",
                "type": "heatmap",
                'source': 'hellocycling',
                'minzoom': 0,
                'maxzoom': 9.5,
                "paint": {
                    "heatmap-color": [
                        "interpolate",
                        [
                            "linear"
                        ],
                        [
                            "heatmap-density"
                        ],
                        0,
                        "rgba(255, 255, 255, 0)",
                        1,
                        "rgba(249, 202, 34, 0.5)"
                    ],
                    "heatmap-radius": [
                        "interpolate",
                        [
                            "exponential",
                            2
                        ],
                        [
                            "zoom"
                        ],
                        2,
                        8,
                        9,
                        20
                    ]
                }
            });

おわりに

MapLibre GL JS+GBFSデータでシェアサイクルマップを作成する方法についてご紹介しました。最後に、MapLibre GL JS+GBFSデータを用いたWebマップの事例をいくつかご紹介します。

シェアサイクルと傾斜量図・シームレス標高タイル（3D地形）をMapLibre GL JSで表示するデモサイト

傾斜量図とは：地表面の傾きの量を算出し、その大きさを白黒の濃淡で表現したものです。白いほど傾斜が緩やか、黒いほど急峻であることを意味します。
出典）https://www.gsi.go.jp/bousaichiri/slopemap.html

シェアサイクル満空情報マップ

貸出可能台数の割合は下記で算出していますが、これが満空情報を示すための正しい指標なのか定かではありません（有識者のご意見を伺いたい）。
貸出可能台数の割合=レンタル可能な自転車の数（num_bikes_available）÷（レンタル可能な自転車の数(num_bikes_available）+返却可能な自転車の数（num_docks_available））