概要

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

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

機能紹介

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

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

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

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

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

{
  "type": "FeatureCollection",
  "name": "東京観光サンプルルート",
  "description": "東京駅から皇居への観光ルートのサンプルです",
  "features": [
    {
      "type": "Feature",
      "id": "tokyo-station",
      "properties": {
        "text": "東京駅",
        "where": "東京都千代田区丸の内一丁目にある、東日本旅客鉄道・東海旅客鉄道・東京地下鉄の駅",
        "type": "point"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.7673068,
          35.6809591
        ]
      }
    },
    {
      "type": "Feature",
      "id": "imperial-palace",
      "properties": {
        "text": "皇居",
        "where": "日本の天皇及び皇族の居所",
        "type": "point"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.7528,
          35.6852
        ]
      }
    }
  ]
}

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

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

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

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

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

補足

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

まとめ

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