GeoJSONをReact地図に組み込むための5つの手順

GeoJSONは、位置情報を扱う現場でよく使われるデータ形式です。点、線、面といった地物を、属性情報と一緒に扱えるため、施設管理、現地調査、施工管理、台帳整備、エリア分析など、さまざまな実務で利用できます。一方で、GeoJSONの使い方を調べている方の中には、データの中身は何となく分かるものの、Reactで作った地図画面にどう組み込めばよいのか、どこでつまずきやすいのかが分からず困っている方も多いはずです。この記事では、GeoJSONをReact地図に組み込む流れを、実務担当者が確認しやすい5つの手順に分けて解説します。

目次

• GeoJSONをReact地図で使う前に役割を整理する

• GeoJSONデータの構造と座標の向きを確認する

• React側でGeoJSONを読み込む設計を決める

• 地図上に点・線・面を表示して見た目を調整する

• 属性情報と操作を組み合わせて実務で使える形にする

• まとめ

GeoJSONをReact地図で使う前に役割を整理する

GeoJSONをReact地図に組み込む最初の手順は、GeoJSONそのものの役割を整理することです。Reactで地図を作る場合、地図の背景、地物データ、操作画面、検索や絞り込み、詳細表示など、複数の要素が組み合わさります。その中でGeoJSONは、主に「地図上に表示したい対象物の位置と属性をまとめたデータ」として扱われます。

GeoJSONは、単に座標だけを並べる形式ではありません。点であれば地点、線であれば道路や配管ルート、面であれば敷地や区域のように、地図上の形を表す情報を持ちます。さらに、その地物に名前、種別、管理番号、状態、調査日、担当者、写真番号などの属性を付けられます。つまりGeoJSONは、図形と台帳情報を一体で扱うための形式だと考えると理解しやすくなります。

React地図に組み込むときは、まず「何を表示したいのか」を明確にします。たとえば、現地調査で取得した点を表示したいのか、道路沿いの点検ルートを表示したいのか、施工範囲や管理区域を面で表示したいのかによって、GeoJSONの作り方も画面設計も変わります。点だけを表示する画面であれば、アイコンやラベル、クリック時の詳細表示が重要になります。線を表示する画面であれば、線の色、太さ、ルートの方向、重なりの見やすさが重要になります。面を表示する画面であれば、塗りの透明度、境界線、隣接する区域との見分けやすさが大切です。

この段階で避けたいのは、GeoJSONを「とりあえず読み込めば地図になる」と考えてしまうことです。GeoJSONには地物の形と属性が入っていますが、背景地図、縮尺、表示順、凡例、クリック操作、検索機能などは別に設計する必要があります。特に実務では、地図上に表示できることよりも、表示したデータを見て判断できることが重要です。現場の担当者が確認したい情報にすぐ到達できるか、図面や台帳と照合しやすいか、誤読しにくいかを考える必要があります。

また、React側の役割も整理しておきます。Reactは画面を部品化して組み立てる考え方に向いています。そのため、地図全体を表示する部品、GeoJSONを読み込む部品、選択中の地物を管理する部品、詳細パネルを表示する部品、絞り込み条件を扱う部品を分けて考えると、後から修正しやすくなります。最初からすべてを一つの画面に詰め込むと、地図表示、データ処理、画面操作が混ざり、少し仕様を変えるだけでも修正範囲が大きくなりがちです。

GeoJSONの使い方を学ぶうえでは、表示対象を「地物」、付随情報を「属性」、画面上の操作を「選択や絞り込み」と分けて考えると整理しやすくなります。たとえば、点検対象のマンホールを点で表示する場合、GeoJSONの座標はマンホール位置を表し、属性には管理番号や点検状態を入れます。React側では、点をクリックしたときに詳細を開く、状態ごとに色を変える、未点検だけを表示する、といった操作を実装します。このように、GeoJSONとReactの責任範囲を分けておくと、実務で必要な画面に近づけやすくなります。

さらに、データの更新方法も早い段階で決めておくとよいです。GeoJSONを画面に直接埋め込むのか、外部ファイルとして読み込むのか、サーバーから取得するのかによって、運用のしやすさが変わります。試作段階では小さなGeoJSONを直接読み込んでも問題ありませんが、実務で更新頻度がある場合は、データと画面を分けて管理したほうが安全です。地図画面を修正しなくてもGeoJSONを差し替えられる形にしておくと、調査結果の反映や管理台帳の更新にも対応しやすくなります。

GeoJSONデータの構造と座標の向きを確認する

2つ目の手順は、GeoJSONデータの構造と座標の向きを確認することです。GeoJSONをReact地図に組み込む作業では、読み込み処理よりも前に、データそのものが正しく作られているかを確認することが重要です。地図上に表示されない、想定外の場所に飛んでしまう、図形が崩れるといった問題は、React側の実装ではなくGeoJSONの中身が原因になっていることがよくあります。

GeoJSONでは、地物の集まりをまとめる構造、個別の地物を表す構造、形状を表す構造、属性を表す構造が使われます。実務では、複数の点や線や面をまとめて扱うことが多いため、地物の集合として整理されたGeoJSONを用意するのが一般的です。各地物には、形状を示す部分と、名称や種別などの属性を入れる部分があります。この構造を理解しておくと、React側で「座標を使って地図に描く部分」と「クリック時に表示する情報」を分けやすくなります。

特に注意したいのが座標の順番です。GeoJSONでは、座標は原則として経度、緯度の順で記述します。日常的には緯度、経度の順で表記されることも多いため、ここを逆にしてしまうと地物がまったく違う場所に表示されます。たとえば日本国内の地点であれば、経度はおおむね東西方向の値、緯度は南北方向の値になります。この順番を誤ると、地図上で遠く離れた場所に点が出たり、表示範囲外に出てしまったりします。React地図に組み込む前に、サンプルの1点だけでも座標の順番を確認することが大切です。

面データでは、座標配列の入れ子構造にも注意が必要です。単純な点は一組の座標で表せますが、線は複数の座標を順に並べます。面は外周を囲む座標列を持ち、穴のある面では内側の輪郭も持つことがあります。複数の面を一つの地物として扱う場合は、さらに階層が深くなります。この入れ子構造を誤ると、地図側で形状として解釈できなかったり、意図しない線や面として表示されたりします。データを手作業で作る場合は、括弧の数や階層の深さを間違えやすいため、少量のサンプルで確認してから本番データに広げると安全です。

座標系の確認も欠かせません。一般的なWeb地図に重ねるGeoJSONでは、経度・緯度の座標として扱う前提で確認する必要があります。しかし、現場や測量、設計の実務では、平面直角座標系、ローカル座標、図面上の任意座標などが使われる場合があります。これらの座標をそのままGeoJSONとして扱うと、地図上の正しい位置には表示されません。React地図に重ねるためには、背景地図と整合する経度・緯度に変換されているかを確認する必要があります。

実務では、GeoJSONの属性情報もあわせて確認しておきます。属性名に日本語を使える環境もありますが、画面側で処理しやすいように、項目名の付け方を統一しておくと便利です。たとえば、地物の名称、分類、状態、管理番号、更新日などを、毎回違う項目名で持たせると、React側の表示処理が複雑になります。同じ意味の情報は同じ属性名でそろえ、空欄があり得る項目は画面側でどう見せるかも決めておきます。

また、数値と文字列の扱いにも注意が必要です。管理番号のように数字だけで構成されていても、先頭のゼロが必要な場合は文字列として扱うほうが安全です。面積、延長、標高、点検回数のように計算や大小比較に使う値は数値として整理します。React側で色分けや絞り込みを行う場合、属性値の表記ゆれがあると期待通りに動きません。「未点検」「未実施」「未確認」のように似た意味の値が混在していると、条件分岐が増えてしまいます。画面実装の前に、属性値の一覧を確認して表記をそろえることが重要です。

GeoJSONを確認するときは、まず小さなデータで試すのが現実的です。点を1件、線を1本、面を1つだけ用意し、React地図に表示できるかを確認します。次に複数件に増やし、表示速度やクリック操作、属性表示を確認します。最初から数千件、数万件のGeoJSONを読み込むと、問題がデータ構造にあるのか、件数にあるのか、画面処理にあるのかを切り分けにくくなります。小さく確認してから本番データへ広げることで、原因調査がしやすくなります。

React側でGeoJSONを読み込む設計を決める

3つ目の手順は、React側でGeoJSONをどのように読み込むかを決めることです。GeoJSONを地図に表示するには、まず画面側でデータを受け取り、状態として保持し、地図描画に渡す必要があります。このとき、読み込み方法を場当たり的に決めるのではなく、データの容量、更新頻度、利用者の操作、今後の拡張を踏まえて設計しておくと、後から困りにくくなります。

最も単純なのは、GeoJSONを画面コードの近くに置き、固定データとして読み込む方法です。試作用の画面や、ほとんど更新されない少量データであれば、この方法でも十分です。地図の表示確認、アイコンや線の見た目の調整、クリック時の詳細表示の検証などを素早く進められます。ただし、運用段階で頻繁にデータを差し替える場合や、担当者が画面コードに触れずにGeoJSONだけ更新したい場合には、固定データとして組み込む方法は扱いにくくなります。

次に考えられるのは、GeoJSONを外部ファイルとして配置し、画面表示時に読み込む方法です。この方法では、画面の仕組みとデータを分離しやすくなります。地物の追加や修正があった場合も、GeoJSONファイルを差し替えることで地図の表示内容を更新できます。実務で使う場合は、ファイル名、配置場所、更新手順、古いデータの扱いを決めておくと、複数人で運用しやすくなります。

さらに、データベースや管理システムからGeoJSON相当のデータを取得する方法もあります。これは、データ件数が多い場合、属性を検索したい場合、利用者ごとに表示範囲を変えたい場合、日々の点検結果を反映したい場合に向いています。この場合、React側は必要な範囲や条件を指定してデータを取得し、受け取ったGeoJSONを地図に描画します。すべてのデータを一度に読み込むのではなく、表示範囲や絞り込み条件に応じて取得する設計にすると、画面の負荷を抑えやすくなります。

React側では、GeoJSONを読み込んだあとの状態管理も重要です。地図に表示する元データ、絞り込み後のデータ、選択中の地物、詳細パネルに表示する属性、表示スタイルの条件などを整理しておかないと、画面の動きが複雑になります。たとえば、元データを直接書き換えて絞り込みを行うと、条件を戻したときに元に戻せなくなることがあります。元のGeoJSONは保持したまま、表示用のデータを別に計算する考え方にすると、安全に操作できます。

読み込み時のエラー処理も実務では大切です。GeoJSONファイルが見つからない、形式が壊れている、座標が不正、属性が想定と違う、データが空である、といった状況は実際に起こり得ます。このとき、画面が真っ白になったり、利用者に何も伝わらなかったりすると、原因の切り分けが難しくなります。React側では、読み込み中、読み込み成功、読み込み失敗、データなしの状態を分けて表示できるようにしておくと、運用時の問い合わせを減らせます。

データ容量への配慮も必要です。GeoJSONは読みやすい形式ですが、座標点が多い線や面を大量に含むとファイルサイズが大きくなります。ブラウザ上で大きなGeoJSONを一度に読み込むと、初期表示が遅くなったり、操作が重くなったりします。表示用途に対して必要以上に細かい座標が含まれている場合は、地図の縮尺や用途に合わせて軽量化を検討します。ただし、軽量化しすぎると形状の精度が落ち、境界線やルートの意味が変わる可能性があります。実務では、見やすさ、速度、精度のバランスを確認しながら調整します。

Reactの画面構成としては、地図表示を担う部分と、GeoJSONの取得を担う部分と、操作パネルを担う部分を分けると管理しやすくなります。地図表示部分は、渡されたGeoJSONを描画することに集中させます。データ取得部分は、どこからデータを読み込むか、読み込み状態をどう扱うかを担当します。操作パネルは、分類や状態による絞り込み、表示切り替え、選択中地物の情報表示などを担当します。このように役割を分けることで、後から表示方法を変えたり、データ取得方法を変更したりしやすくなります。

また、初期表示位置の決め方も考えておく必要があります。GeoJSONを読み込んでも、地図の中心や縮尺が適切でなければ、利用者は地物を見つけられません。GeoJSON内の全地物の範囲を計算して、その範囲が画面に収まるように表示する方法があります。あるいは、現場や事業区域が決まっている場合は、初期中心と縮尺を固定しておく方法もあります。どちらがよいかは、画面の目的によって変わります。複数の地域を扱う画面ではデータ範囲に合わせる方法が便利で、特定現場の管理画面では固定表示のほうが分かりやすい場合があります。

地図上に点・線・面を表示して見た目を調整する

4つ目の手順は、GeoJSONの点、線、面を地図上に表示し、実務で見やすい見た目に調整することです。GeoJSONを読み込めるようになったら、次は地物の種類ごとにどのように表示するかを決めます。ここで重要なのは、単に表示されるかどうかではなく、利用者が地図上で意味を読み取れるかどうかです。

点データは、現場で扱いやすい表示対象の一つです。施設、設備、調査地点、撮影位置、不具合箇所、測点などを表せます。点を表示するときは、地物の分類や状態によって記号や色を変えると、地図上で状況を把握しやすくなります。ただし、色や形を増やしすぎると、かえって読み取りにくくなります。実務画面では、重要な区分を優先し、凡例なしでもある程度意味が伝わるように整理することが大切です。

線データは、道路、河川、配管、電線、点検ルート、施工ラインなどを表すときに使います。線を表示する場合は、色、太さ、透明度、破線の有無などを調整します。複数の線が重なる場合は、太さや表示順を工夫しないと、下にある線が見えなくなります。状態ごとに線の見た目を変える場合も、未確認、確認済み、要対応など、利用者が判断に使う区分に絞ると分かりやすくなります。

面データは、区域、敷地、工区、危険範囲、管理範囲、調査済み範囲などを表すときに使います。面を表示するときは、塗りつぶしの透明度が重要です。塗りが濃すぎると背景地図や他の地物が見えにくくなり、薄すぎると範囲が分かりにくくなります。境界線を適度に表示し、面の内側は控えめに塗ると、地図全体の情報を残しながら範囲を示しやすくなります。

点、線、面が混在する場合は、表示順を決めます。面を一番上に描いてしまうと、点や線が隠れることがあります。一般的には、面を背景に近い層として表示し、その上に線、さらに上に点を表示すると見やすくなります。ただし、用途によっては、警告範囲のような面を目立たせたい場合もあります。その場合でも、点や線が完全に見えなくならないように透明度や表示切り替えを用意すると安全です。

見た目の調整では、属性に応じた条件分岐がよく使われます。たとえば、属性の状態が「対応済み」であれば落ち着いた色、「要確認」であれば目立つ色、「対象外」であれば薄く表示する、といった考え方です。ただし、画面上の色だけに意味を持たせると、利用環境や利用者によっては判別しにくい場合があります。色に加えて、ラベル、線種、アイコン形状、詳細表示の文言などを組み合わせると、誤読を減らせます。

ラベル表示も慎重に扱う必要があります。すべての地物に常時ラベルを出すと、地図が文字で埋まり、かえって見づらくなることがあります。管理番号や名称を表示したい場合は、一定の縮尺以上になったときだけ表示する、選択した地物だけ表示する、地図の横に一覧として表示するなどの方法があります。実務では、地図上にすべてを載せるよりも、地図と詳細パネルを分けて情報を見せるほうが使いやすい場合が多いです。

地図の操作性も見た目と同じくらい重要です。点をクリックしやすい大きさにする、線や面を選択しやすくする、重なった地物をどう選ぶかを考える、といった調整が必要です。特に現場で使う画面では、画面サイズが限られる場合があります。細い線や小さな点は、机上では問題なくても、屋外や小型画面では操作しにくくなることがあります。実際の利用環境を想定して、表示サイズやクリック判定に余裕を持たせるとよいです。

また、GeoJSONの件数が増えると、見た目だけでなく描画負荷も問題になります。点が数百件程度であれば問題が目立たない場合でも、数千件、数万件になると、表示や操作が重くなることがあります。線や面は座標点数が多いほど負荷が増えます。必要に応じて、表示範囲内の地物だけ描画する、縮尺に応じて簡略化したデータを使う、分類ごとに表示を切り替える、といった工夫を検討します。利用者が必要な情報に集中できるように、最初から全データを一度に見せない設計も有効です。

見た目を調整するときは、凡例や説明文も忘れないようにします。地図上の色や記号に意味を持たせる場合、その意味を画面内で確認できるようにしておくと、初めて使う人でも理解しやすくなります。凡例は大きく作りすぎると地図の邪魔になりますが、必要な区分だけを簡潔に表示すると効果的です。実務画面では、見た目の美しさだけでなく、判断の迷いを減らすことが重要です。

属性情報と操作を組み合わせて実務で使える形にする

5つ目の手順は、GeoJSONの属性情報とReact側の操作を組み合わせ、実務で使える地図画面に仕上げることです。GeoJSONを地図に表示できるだけでは、まだ業務画面としては十分とは言えません。利用者が地物を探し、状態を確認し、必要な判断を行い、次の作業につなげられるようにする必要があります。

まず重要なのは、クリックや選択に応じて属性情報を表示する仕組みです。点、線、面のいずれであっても、地図上の地物を選んだときに、その名称、管理番号、種別、状態、更新日、備考などを確認できるようにします。このとき、GeoJSONに含まれる属性をすべてそのまま表示すればよいわけではありません。実務で見るべき項目を優先し、重要度の低い項目は折りたたむ、または詳細画面に回すなど、情報量を調整することが大切です。

属性表示では、項目名の見せ方も考えます。GeoJSONの内部では処理しやすい短い項目名を使っていても、画面上では利用者が理解しやすい名称に変換したほうが親切です。たとえば、内部の項目名が短い英字や略語になっている場合、そのまま表示すると意味が伝わりにくいことがあります。React側で表示用の名称を用意しておくと、データ管理と画面表示を両立できます。

次に、検索や絞り込みを組み合わせます。GeoJSONの件数が少ない場合は地図を見れば確認できますが、件数が増えると、目的の地物を探すだけで時間がかかります。管理番号、名称、分類、状態、担当区域などで絞り込めるようにすると、実務で使いやすくなります。絞り込みを行う場合は、地図上の表示だけでなく、件数表示や一覧表示も合わせると、利用者が現在どの条件で見ているのかを把握しやすくなります。

一覧と地図を連動させる方法も効果的です。地図上の地物をクリックすると一覧側でも選択状態になる、一覧から項目を選ぶと地図がその位置へ移動する、といった動きがあると、台帳確認と位置確認を行き来しやすくなります。GeoJSONは属性を持てるため、一覧表示との相性が良い形式です。地図だけでは見落としやすい情報も、一覧と組み合わせることで確認しやすくなります。

実務では、選択中の地物に対して次の作業につなげる導線も重要です。たとえば、詳細記録を開く、写真を確認する、点検結果を入力する、関連資料を表示する、報告書用の情報をコピーする、といった操作が考えられます。GeoJSON自体は表示用データとして使い、実際の更新や記録は別の仕組みで行うこともあります。この場合、GeoJSONの属性に管理番号や識別子を入れておくと、他の情報と結び付けやすくなります。

一方で、GeoJSONを画面上で編集する場合は注意が必要です。地物の位置を動かす、線を引き直す、面の頂点を修正する、といった操作を許可する場合、誤操作への対策が必要になります。編集前後の差分確認、保存前の確認、元に戻す操作、更新履歴の管理などを考えておかないと、重要な位置情報が意図せず変わってしまう可能性があります。閲覧用の地図と編集用の地図は、権限や画面構成を分けたほうが安全な場合があります。

属性情報を扱うときは、空欄や不整合への対応も必要です。すべての地物に同じ項目が入っているとは限りません。過去に作成したデータ、別の担当者が作成したデータ、外部から受け取ったデータを統合すると、属性の抜けや表記ゆれが発生しやすくなります。画面側では、空欄の項目をどう表示するか、必須項目がない場合に警告するか、絞り込み条件から除外するかを決めておきます。実務では、データの不備を隠すよりも、確認が必要な状態として見える化したほうが安全です。

地図画面を公開または共有する場合は、データの範囲と内容にも注意します。GeoJSONには位置情報と属性が含まれるため、管理対象や現場情報がそのまま外部に見える可能性があります。公開範囲に応じて、不要な属性を削除する、詳細すぎる位置情報を公開しない、閲覧権限を分けるなどの対応が必要です。React地図に組み込む前に、そのGeoJSONを誰が見るのか、どこまで共有してよいのかを確認しておくと安心です。

操作性の面では、利用者が迷わない画面にすることが重要です。地図、一覧、詳細、絞り込み、凡例、表示切り替えがすべて同時に並ぶと、情報量が多すぎて使いにくくなることがあります。最初に必要な操作を絞り、よく使う機能を目立たせ、補助的な機能は必要なときに開けるようにします。GeoJSONをReact地図に組み込む目的は、技術的に表示することではなく、位置情報を使って業務判断をしやすくすることです。

最後に、確認作業の流れを決めておきます。GeoJSONを更新したら、地図に表示されるか、座標がずれていないか、属性が正しく表示されるか、絞り込みが効くか、クリック操作ができるか、初期表示範囲が適切かを確認します。実務で使う画面では、一度作って終わりではなく、データ更新や業務変更に合わせて調整が続きます。確認項目を決めておくことで、更新のたびに同じ品質でチェックしやすくなります。

まとめ

GeoJSONをReact地図に組み込むためには、GeoJSONを読み込んで表示するだけでなく、データ構造、座標の向き、読み込み設計、見た目の調整、属性情報の活用までを順番に整理することが大切です。最初にGeoJSONの役割を確認し、点、線、面のどの地物をどのような目的で表示するのかを明確にします。次に、座標が経度、緯度の順になっているか、背景地図と合う座標になっているか、属性名や属性値がそろっているかを確認します。

React側では、GeoJSONをどこから読み込むのか、読み込み中やエラー時にどう表示するのか、元データと表示用データをどう分けるのかを設計します。地図上に表示する段階では、点、線、面それぞれの見せ方を調整し、色、太さ、透明度、表示順、凡例を整えます。そして、属性情報をクリック表示、検索、絞り込み、一覧連動などに活用することで、単なる地図表示から実務で使える確認画面へ近づけられます。

GeoJSONの使い方でつまずきやすいのは、技術的な読み込み処理だけではありません。座標の順番が逆になっている、座標系が合っていない、属性の表記がばらついている、件数が多くて重い、地図上で意味が読み取りにくいといった問題も起こり得ます。これらは、画面実装の前にデータを確認し、実務での使い方を想定して設計することで減らせます。

現場調査や施工管理、施設管理などでは、位置情報をどのように取得し、どのように整理し、どのように地図で確認するかが重要になります。GeoJSONをReact地図に組み込む流れを理解しておくと、取得した位置情報を画面上で活用しやすくなります。スマートフォンや測量機器、既存台帳などから得た位置情報を扱う場合も、座標、属性、表示目的を整理してからReact地図へ反映することで、確認しやすく運用しやすい地図画面に近づけられます。