JSONマップビューアー：JSONの座標を地図に表示

このビューアーでできること

位置データの多くは、GISファイルとしては届きません。普通のJSONとして届きます。天気APIのレスポンス、店舗検索の店舗一覧、配達アプリの書き出し、開発者から送られてきたファイルなどです。各レコードにはどこかに緯度と経度がありますが、GeoJSONを前提とする地図ツールでは読めず、表計算ソフトで開くと入れ子の構造が失われます。

このビューアーはJSONをそのまま読み込みます。文書全体からレコードの一覧を探し、入れ子のオブジェクトを `location.lat` のようなフィールド名に平らにし、緯度・経度によく使われる名前を見つけます。`[lng, lat]` の配列や `"lat, lng"` の文字列のように、1つのフィールドに両方の値が入っている場合にも対応します。有効な座標を持つレコードはすべて地図に表示されます。サイドバーには、座標がなかったレコードや範囲外の値だったレコードの数が表示され、緯度と経度が入れ替わっているように見える場合は警告が出ます。

誰かからJSONファイルが送られてきて「これはどこ？」と聞かれたときのために作りました。数秒でデータを確認し、好きなフィールドで点を色分けし、点をクリックしてレコード全体を読み、結果をGIS用のGeoJSONや表計算用のCSVでダウンロードできます。ファイルはブラウザ内で読み込まれ、アップロードされることはありません。

ビューアーが理解できるJSONの形

実際のJSONにはさまざまな形があります。次の形は、設定なしで読み込めます。どの場合も見つけたレコードの一覧が表示され、ファイルに複数の一覧があれば別の一覧を選べます。

[{ "name": "Berlin", "lat": 52.52, "lng": 13.405 }]

{ "data": { "cities": [{ "name": "Paris", "latitude": 48.8566, "longitude": 2.3522 }] } }

[{ "name": "Rome", "location": { "lat": 41.9028, "lon": 12.4964 } }]

[{ "id": 7, "coordinates": [2.1686, 41.3874] }]

[{ "stop": "Central", "latlng": "59.3293, 18.0686" }]

{ "BER": { "lat": 52.52, "lng": 13.405 }, "PAR": { "lat": 48.86, "lng": 2.35 } }

{"lat": 38.72, "lng": -9.14}
{"lat": 41.16, "lng": -8.63}

"52.52" のように文字列で保存された数値や、"52,52" のように小数点にカンマを使った数値も読み込めます。タグの一覧のようにレコード内にある配列は、ポップアップと書き出しの中でJSONの文字列として残ります。

認識されるフィールド名

ビューアーは各フィールド名の最後の部分を比べるので、`lat`、`location.lat`、`data.geo.lat` はどれも対象になります。大文字と小文字は区別しません。一致するものがなければ、Coordinatesパネルで自分でフィールドを選びます。

緯度

lat、latitude、lat_dd、y、ycoord、point_y、decimalLatitude、gps_lat、geo_lat などの形。

経度

lng、lon、long、longitude、lon_dd、x、xcoord、point_x、decimalLongitude、gps_lon、geo_lng などの形。

両方を持つ1つのフィールド

coordinates、coords、position、latlng、lnglat、location、geo、point、center、gps で終わる名前で、値が2つの数値の配列か "a, b" の文字列の場合。

候補の選び方

考えられる緯度と経度の組み合わせを、最初の300件のレコードで試します。±90と±180に収まる値が最も多い組が選ばれ、同じ親オブジェクトを持つ組には加点があり、同点のときは x/y より本当のlat/lngの名前が優先されます。

組の順序

lnglat、lonlat、coordinates は経度が先、latlng と latlon は緯度が先を意味します。ほかの名前では、有効な値が多い順序を選びます。どちらでも合う場合、配列は[lng, lat]、文字列は "lat, lng" として読みます。

技術的な詳細

ビューアーが受け付けるものと作り出すものを正確に説明します。

入力

50 MBまでの .json、.jsonl、.ndjson ファイル、またはPaste JSON欄に貼り付けたJSON。

GeoJSONとTopoJSONは対象外

ファイルがすでにGeoJSON（"type": "FeatureCollection"）やTopoJSON（"type": "Topology"）の場合は、このサイトのGeoJSONビューアーまたはTopoJSONビューアーを案内するメッセージが出ます。

レコードの一覧

要素の半分以上がオブジェクトの配列（8階層まで、どの深さでも）と、値がすべてレコードであるオブジェクト。座標を持つ一覧が先に、次に大きい一覧が並びます。

有効な座標

緯度は−90〜90、経度は−180〜180の十進法の度（WGS84）。範囲外のレコードは数えられ、地図には描かれません。

入れ替わりの警告

範囲外のレコードが、緯度と経度を入れ替えれば有効になる場合、ビューアーはその数を数え、Swapボタンを表示します。

フィールドで色分け

異なる値が10種類までのフィールドなら、凡例と値ごとの件数付きで点を色分けできます。

性能

点はcanvasに描くので、普通のノートパソコンでも数万件のレコードがなめらかに動きます。

書き出し

すべてのフィールドをプロパティに持つGeoJSON、または最初の2列が latitude と longitude で、その後に平らにしたフィールドが続くCSV。

プライバシー

ファイルはブラウザ内で読み込まれます。インターネットから読み込むのはベースマップのタイルだけです。

JSONを地図に表示する手順

組み込みのサンプルで全体の流れを示します。APIのレスポンスのような入れ子の中に、ヨーロッパの25都市があります。座標は `location` オブジェクトにあり、位置のないレコードが1件あります。

1

ステップ1: ビューアーを開く

地図は道路のベースマップ付きで開きます。Upload、Paste JSONを使うか、ファイルを地図にドラッグします。ここではSample Dataをクリックしました。

2

ステップ2: 見つかった内容を確認する

Recordsパネルには、選ばれた一覧（`data.cities`）、地図に表示されたレコード数、座標がなかったレコード数が表示されます。サンプルでは1件が `"location": null` なので、25件中24件が表示されます。

3

ステップ3: 座標のフィールドを確認する

Coordinatesパネルには検出されたフィールド、ここでは `location.lat` と `location.lng` が表示されます。`[lng, lat]` や `"lat, lng"` の1つのフィールドを持つデータでは「One field」に切り替え、点の位置がおかしい場合はSwapを使います。

4

ステップ4: フィールドで点を色分けする

「Color by field」でフィールドを選びます。ここでは `capital` で首都とそれ以外の都市を分け、値ごとに凡例と件数を表示しています。

5

ステップ5: レコードを読む

点をクリックすると、正確な座標と、入れ子の値や配列を含むレコードのすべてのフィールドが表示されます。

6

ステップ6: 書き出す

点を、QGIS、ArcGIS、Web地図用のGeoJSON、またはExcelやGoogleスプレッドシート用のCSVでダウンロードします。

JSONデータを地図にするほかの方法

このビューアーはJSONファイルを見る最も速い方法です。同じ作業を処理の流れの中で行うときは、次のツールを使います。

同じ作業をコードで

3つの例はどれも上で使ったサンプルファイルを読み込み、位置のないレコードを飛ばし、ほかのフィールドを残します。

# Python: pandas flattens nested JSON, GeoPandas builds the points
import json
import pandas as pd
import geopandas as gpd

with open("cities.json") as f:
    data = json.load(f)

df = pd.json_normalize(data["data"]["cities"])   # columns: location.lat, location.lng
df = df.dropna(subset=["location.lat", "location.lng"])
gdf = gpd.GeoDataFrame(
    df, geometry=gpd.points_from_xy(df["location.lng"], df["location.lat"]), crs="EPSG:4326"
)
gdf.to_file("cities.geojson", driver="GeoJSON")

# jq on the command line: JSON records to a GeoJSON FeatureCollection
jq '{type: "FeatureCollection", features: [
      .data.cities[] | select(.location != null) | {
        type: "Feature",
        properties: del(.location),
        geometry: { type: "Point", coordinates: [.location.lng, .location.lat] }
      }]}' cities.json > cities.geojson

// JavaScript + Leaflet: note the order, Leaflet wants [lat, lng]
const res = await fetch("cities.json");
const json = await res.json();
for (const c of json.data.cities) {
  if (!c.location) continue;
  L.marker([c.location.lat, c.location.lng]).bindPopup(c.name).addTo(map);
}

私の考えでは、新しいJSONファイルの構造を理解し、座標を確認するのにこのビューアーを使うのがよいです。構造がわかれば、Pythonやjqの数行で、データが変わるたびにGeoJSONに変換できます。

ビューアーの仕組み

ファイルをドロップしてから点が表示されるまでの流れです。すべてのステップはブラウザ内で動きます。

1. テキストを解析する. テキストをJSONとして解析します。失敗し、ファイルが複数行ある場合は、各行をJSON Linesとして解析します。先頭のバイト順マークは取り除きます。
2. 専用のビューアーがあるファイルを断る. GeoJSONとTopoJSONは type で見分け、このサイトの対応するビューアーへ案内します。これらにはすでに本当のジオメトリが入っているからです。
3. レコードの一覧を探す. 文書を8階層までたどり、要素の大部分がオブジェクトである配列と、値がすべてレコードであるオブジェクトを集めます。各レコードはドット付きのパスに平らにします。
4. 座標を見つける. フィールド名を上の一覧と比べます。候補の組を最大300件のレコードで試し、有効な値が最も多い組を選びます。合う組がなければ、2つの数値を持つ単独のフィールドを試します。
5. 点を作る. 選んだフィールドで各レコードを読みます。文字列の数値は変換し、±90 / ±180を外れた値は数えて飛ばし、入れ替えれば合うレコードは別に数えます。
6. 描画、色分け、書き出し. 点をcanvasのレイヤーに描き、地図をそこにズームします。フィールド、順序、色を変えると、地図はすぐに描き直されます。書き出しには、画面に見えているレコードがそのまま使われます。

自動検出は最初の提案にすぎません。どの選択もサイドバーで変えられ、変えるとすぐ地図が更新されるので、提案が間違っていてもクリック1回で直せます。

座標の確認：範囲、入れ替わり、精度

緯度と経度の組は、2つの数値にすぎません。次の3つの確認で、その数値が妥当かどうかがわかります。

有効  ⇔  −90 ≤ 緯度 ≤ 90   かつ   −180 ≤ 経度 ≤ 180

緯度 91.2、経度 10.5   →  無効（緯度が大きすぎる）

保存値:   緯度 = 151.21,  経度 = −33.87   →  無効
入れ替え: 緯度 = −33.87,  経度 = 151.21   →  有効（シドニー）

緯度1° ≈ 111 320 m
経度1° ≈ 111 320 m · cos(緯度)

桁数   緯度のステップ   ベルリン（52.52°）での経度のステップ
1      11.1 km          6.8 km
2      1.1 km           680 m
3      111 m            68 m
4      11.1 m           6.8 m
5      1.1 m            0.68 m
6      0.11 m           0.07 m

このビューアーが役立つ場面

私がJSONマップビューアーを使うのは、次のような場面です。

1. APIのレスポンスを確認する. 天気、交通、店舗検索のAPIのレスポンスを貼り付ければ、地図のコードを書く前に、位置が妥当かどうかをすぐに確認できます。
2. アプリやデータベースの書き出しを確認する. 配達アプリ、CRM、IoTプラットフォームはよくJSONを書き出します。書き出したデータを地図に表示して、座標が欠けている、または間違っているレコードを見つけます。
3. JSONをGeoJSONやCSVに変換する. スクリプトを書かずに、QGISやArcGIS用のGeoJSONファイル、またはExcel用のCSVを手に入れられます。
4. 入れ替わった座標を見つける. 警告と地図のおかげで、処理のどこかで緯度と経度が入れ替わるというよくあるバグに簡単に気づけます。
5. オープンデータのポータルを調べる. 多くのオープンデータのポータルは、CSVと並べてJSONを提供しています。JSONにはCSVでは失われる入れ子の詳細が残っていることが多く、そのまま地図にできます。
6. フィールドで点をグループ分けする. 状態、カテゴリ、種類で色分けすると、オフラインの観測所や日曜日に営業する店舗などの傾向が見えてきます。
7. 地図のコードをデバッグする. 自分の地図で点が違う場所に出たら、同じJSONをここで読み込みます。ここで正しく表示されるなら、バグは自分のコードにあり、多くは [lat, lng] と [lng, lat] の取り違えです。
8. JSONと座標を教える. 学生は小さなJSONの例を貼り付けて、入れ子、フィールド名、座標の順序が地図上の結果をどう変えるかを確かめられます。

よくある質問

ライブラリとクレジット

JSONの読み込みと座標の検出は、このサイトのために書いたものです。地図はオープンソースソフトウェアの上に作られています。

• Leaflet 1.9 · BSD-2-Clause · Volodymyr Agafonkin and contributors
  インタラクティブな地図、canvasの点レイヤー、ポップアップを描きます。
• OpenStreetMap, Protomaps (hosted by KONAKTIVE), CARTO, Esri World Imagery · ODbLと提供元の利用規約 · OpenStreetMap contributors, Protomaps, KONAKTIVE, CARTO, Esri
  ベースマップのタイルと画像。

関連ツール