概要

「れきちず x Next.js」はれきちずとNext.jsで作成されたウェブアプリケーションです。

このウェブアプリケーションに、ルートの登録機能を追加しましたので、紹介します。

機能紹介

トップページにアクセスし、「マイルートを管理」ボタンをクリックします。

以下のように、ログインが求められますので、画面右上の「ログイン」ボタンからログインします。

ログイン後、以下のような一覧画面が表示されます。

「ルートをインポート」ボタンを押すと以下のダイアログが表示されます。

「サンプルデータをダウンロード」ボタンを押すと、以下のようなGeoJSON形式のサンプルデータがダウンロードされます。

{}""""]tndfyaee{}{}pmsa,eect"""}"}"""}"}""rutip,gtip,g::irydr"""e""]ydr"""e""]pep"otwtotcp"otwtotc""tse:pehymyo13e:pehymyo13Fi""exepepo35"exepepo35eo::"rtreter9.:"rtreter9.antt"e"r"d.6it"e"r"d.6t"["oi:":y:i78"mi:":y:i78u:Fke:"n60Fpe:"n55reys"":"a79ees"":"a22e"ao""pPt35ar""pPt8Ct-:o{oe09ti:o{oe,ousiis61ua"iislrt{"nn"8rl{,nn"lea,tt:,e-tt:e""t"""p""c,,i,[,a,[tolinao"cn,e"",,",",",

このファイルをアップロードすると、以下のような編集画面が表示されます。

編集ボタン(鉛筆マーク)から、タイトルや説明文の編集、および個々のマーカーの編集が可能です。

以下のエクスポートボタンを押すと、

geojson.ioでの表示画面に遷移します。

エクスポートの他、ローカル環境にダウンロードすることも可能です。

補足

現在は技術検証を目的として単純な機能の提供のみになっていますが、今後、いろいろな機能拡張を進めたいと思います。

まとめ

れきちずやGeoJSONの応用にあたり、参考になりましたら幸いです。