リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: カスタムマッピング
ピン間のルート距離・所要時間表示機能の追加
## 1. 目的
地図上の複数ピンを順番に選んで「ルート」を作成し、ピン間の直線距離の合計と、徒歩・自転車・車の概算所要時間を表示できるようにする。現地調査ルートの計画や、複数拠点の巡回順序の検討に役立てる。外部APIは使わずLeafletのPolylineと座標間Haversine距離計算のみで完結させる。
## 2. 具体的な仕様
### 2-1. UIの追加
- 地図右上の既存ツールバーに「ルート計測」ボタン(アイコン: 折れ線+定規)を追加する。
- ボタンを押すと「ルート計測モード」がONになり、ボタンが強調表示される。再押しでOFF(ルートをリセット)。
### 2-2. ルート計測モードの動作
- モードON中に地図上の既存ピンをクリックすると、そのピンがルートに順番追加される。
- 追加されたピンは通常マーカーとは別に「①②③…」の番号付きミニアイコンで重ねて表示する(既存ピン表示は変えない)。
- ピン間をLeaflet Polyline(青色点線)で結ぶ。
- ピンを追加するたびに、地図下部または左下に固定表示されるパネルをリアルタイム更新する。
### 2-3. 結果パネルの表示内容
```
【ルート計測】
ピン数: 3
総直線距離: 4.2 km
---
🚶 徒歩 (4km/h): 約 63 分
🚲 自転車 (15km/h): 約 17 分
🚗 車 (40km/h): 約 6 分
---
[最後のピンを削除] [ルートをリセット]
```
- 距離はHaversine公式をJS側で計算(サーバー通信なし)。
- 速度は固定値(徒歩4km/h・自転車15km/h・車40km/h)でシンプルに算出。
- 「最後のピンを削除」ボタンで1つ戻せる。
### 2-4. ルートの保存(オプション・軽量実装)
- パネル下部に「このルートをメモとして保存」ボタンを設置。
- 押すとDBの新テーブル `routes`(id, name, pin_ids_json, total_distance_m, created_at)に保存する。
- 保存済みルートは既存の「フィルター・管理」サイドバー内に「保存ルート」セクションとして一覧表示し、クリックで再描画・削除できる。
- ルート名は保存時にプロンプトで入力(デフォルト: 「ルート YYYY-MM-DD HH:MM」)。
## 3. 既存機能との整合
- 既存のピンデータ・カテゴリ・タグ・フィルター・エクスポート機能には一切手を加えない。
- ルート計測モードOFF時は通常のピンクリック動作(詳細ポップアップ表示)に戻る。
- LeafletはすでにロードされているためPolylineは追加ライブラリ不要。
- `routes`テーブルはなければCREATE TABLE IF NOT EXISTSで初回自動生成し、既存DBに影響しない。
- スマホ対応: パネルは画面下部に固定・横スクロールなし・タップでピン追加が動作するようにする。
地図上の複数ピンを順番に選んで「ルート」を作成し、ピン間の直線距離の合計と、徒歩・自転車・車の概算所要時間を表示できるようにする。現地調査ルートの計画や、複数拠点の巡回順序の検討に役立てる。外部APIは使わずLeafletのPolylineと座標間Haversine距離計算のみで完結させる。
## 2. 具体的な仕様
### 2-1. UIの追加
- 地図右上の既存ツールバーに「ルート計測」ボタン(アイコン: 折れ線+定規)を追加する。
- ボタンを押すと「ルート計測モード」がONになり、ボタンが強調表示される。再押しでOFF(ルートをリセット)。
### 2-2. ルート計測モードの動作
- モードON中に地図上の既存ピンをクリックすると、そのピンがルートに順番追加される。
- 追加されたピンは通常マーカーとは別に「①②③…」の番号付きミニアイコンで重ねて表示する(既存ピン表示は変えない)。
- ピン間をLeaflet Polyline(青色点線)で結ぶ。
- ピンを追加するたびに、地図下部または左下に固定表示されるパネルをリアルタイム更新する。
### 2-3. 結果パネルの表示内容
```
【ルート計測】
ピン数: 3
総直線距離: 4.2 km
---
🚶 徒歩 (4km/h): 約 63 分
🚲 自転車 (15km/h): 約 17 分
🚗 車 (40km/h): 約 6 分
---
[最後のピンを削除] [ルートをリセット]
```
- 距離はHaversine公式をJS側で計算(サーバー通信なし)。
- 速度は固定値(徒歩4km/h・自転車15km/h・車40km/h)でシンプルに算出。
- 「最後のピンを削除」ボタンで1つ戻せる。
### 2-4. ルートの保存(オプション・軽量実装)
- パネル下部に「このルートをメモとして保存」ボタンを設置。
- 押すとDBの新テーブル `routes`(id, name, pin_ids_json, total_distance_m, created_at)に保存する。
- 保存済みルートは既存の「フィルター・管理」サイドバー内に「保存ルート」セクションとして一覧表示し、クリックで再描画・削除できる。
- ルート名は保存時にプロンプトで入力(デフォルト: 「ルート YYYY-MM-DD HH:MM」)。
## 3. 既存機能との整合
- 既存のピンデータ・カテゴリ・タグ・フィルター・エクスポート機能には一切手を加えない。
- ルート計測モードOFF時は通常のピンクリック動作(詳細ポップアップ表示)に戻る。
- LeafletはすでにロードされているためPolylineは追加ライブラリ不要。
- `routes`テーブルはなければCREATE TABLE IF NOT EXISTSで初回自動生成し、既存DBに影響しない。
- スマホ対応: パネルは画面下部に固定・横スクロールなし・タップでピン追加が動作するようにする。
💬 返信 (3)
🛠 開発を開始しました (機能追加 (custom-mapping))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「カスタムマッピング」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=custom-mapping
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/custom-mapping/
ご利用ありがとうございます!
ご要望いただいた「カスタムマッピング」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=custom-mapping
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/custom-mapping/
ご利用ありがとうございます!
Echo
Iris