「れきちず x Next.js」サイトにルートの登録機能を追加しました。

概要

「れきちず x Next.js」サイトにルートの登録機能を追加しました。以下が表示例です。

参考

「れきちず x Next.js」サイトについては、以下で紹介しています。

この「れきちず」を使ってルートを表示する先行事例として、以下が挙げられます。

https://codh.rois.ac.jp/edomi/route/

今回は上記の事例を参考に、ルートを作成する機能を追加しました。

使い方

サイトにアクセスします。

https://rekichizu-next.vercel.app/ja/

「マイルートを管理」をクリックします。

ログインが求められますので、画面右上のボタンからログインします。

「新しいルートを作成」から、ルートを作成します。

以下が編集画面です。

編集アイコンをクリックすると、ルートのタイトルおよび説明を編集できます。

モードを「追加」に設定すると、地図上でクリックした箇所にピンが立ちます。ドラッグ&ドロップで移動させることも可能です。

マーカーはドラッグ＆ドロップで順序変更することができます。

インポートとエクスポート

エクスポート

ルートの一覧画面と編集画面にダウンロードボタンを設置しています。以下のようなJSONファイルがダウンロードされます。

これをgeojson.ioに貼り付けると、以下のように表示されます。

インポート

以下の記事で作成したgeojsonをインポートしてみます。

具体的には以下です。

https://nakamura196.github.io/peripleo/data/VisitPlus-UK.lp.json

このJSONファイルには、LineStringタイプのデータがなく、またメタデータ項目も対応がとれないため、不十分な結果にはなりますが、Pointタイプのマーカーを取り込めていることが確認できます。

今後の課題

メタデータスキーマの設定

メタデータの記録項目はプロジェクトによってさまざまであるため、ルートごとに使用するメタデータスキーマを変更できるようにします。

CSVファイルによるインポート機能

大量のデータを一括登録する際には、CSVやExcelのような表計算ソフトウェアでデータを作成することが多いと考えられます。geojson.ioの表形式による視覚化を参考に、以下のようなフォーマットが考えられます。

まとめ

随時変更される可能性があるアプリケーションですが、参考になりましたら幸いです。