「れきちず x Next.js」サイトにルートの登録機能を追加しました。
概要
「れきちず x Next.js」サイトにルートの登録機能を追加しました。以下が表示例です。
参考
「れきちず x Next.js」サイトについては、以下で紹介しています。
この「れきちず」を使ってルートを表示する先行事例として、以下が挙げられます。
今回は上記の事例を参考に、ルートを作成する機能を追加しました。
使い方
サイトにアクセスします。
「マイルートを管理」をクリックします。
ログインが求められますので、画面右上のボタンからログインします。
「新しいルートを作成」から、ルートを作成します。
以下が編集画面です。
編集アイコンをクリックすると、ルートのタイトルおよび説明を編集できます。
モードを「追加」に設定すると、地図上でクリックした箇所にピンが立ちます。ドラッグ&ドロップで移動させることも可能です。
マーカーはドラッグ＆ドロップで順序変更することができます。
インポートとエクスポート
エクスポート
ルートの一覧画面と編集画面にダウンロードボタンを設置しています。以下のようなJSONファイルがダウンロードされます。
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"id": "1744639551563",
"text": "湯島天神",
"where": "神社",
"type": "point"
},
"geometry": {
"type": "Point",
"coordinates": [
139.76809921470056,
35.707702013817155
]
}
},
{
"type": "Feature",
"properties": {
"id": "1744639379903",
"text": "不忍池",
"where": "池",
"type": "point"
},
"geometry": {
"type": "Point",
"coordinates": [
139.77050681034103,
35.71210499496915
]
}
},
{
"type": "Feature",
"properties": {
"id": "1744639551563-1744639379903",
"path": "[1744639551563] -> [1744639379903]",
"type": "line"
},
"geometry": {
"type": "LineString",
"coordinates": [
[
139.76809921470056,
35.707702013817155
],
[
139.77050681034103,
35.71210499496915
]
]
}
}
]
}
これをgeojson.ioに貼り付けると、以下のように表示されます。
インポート
以下の記事で作成したgeojsonをインポートしてみます。
具体的には以下です。
このJSONファイルには、LineStringタイプのデータがなく、またメタデータ項目も対応がとれないため、不十分な結果にはなりますが、Pointタイプのマーカーを取り込めていることが確認できます。
今後の課題
メタデータスキーマの設定
メタデータの記録項目はプロジェクトによってさまざまであるため、ルートごとに使用するメタデータスキーマを変更できるようにします。
CSVファイルによるインポート機能
大量のデータを一括登録する際には、CSVやExcelのような表計算ソフトウェアでデータを作成することが多いと考えられます。geojson.ioの表形式による視覚化を参考に、以下のようなフォーマットが考えられます。
| type | id | text | path | lon | lat |
|---|---|---|---|---|---|
| point | 1744620922831 | 1つ目の場所 | 139.7605443111184 | 35.71117071568838 | |
| point | 1744620970060 | 2つ目の場所 | 139.7810541342319 | 35.707200583304 | |
| line | 1744620922831-1744620970060 | [1744620922831] -> [1744620970060] |
まとめ
随時変更される可能性があるアプリケーションですが、参考になりましたら幸いです。
Discussion