コンテンツにスキップ

ダイアログ

マップビュー

緯度・経度フィールドの値を使って、レコードを地図上にピン(マーカー)で表示するカスタムビューです。Leaflet + OpenStreetMap をベースに、Mapbox GL JS(トークン設定時)にも対応します。

パラメータ説明
カスタムビュービュー選択カスタムビュー(必須)
タイトルフィールドフィールド選択マーカーポップアップのタイトル(必須)
緯度フィールドフィールド選択緯度を格納するフィールド(必須)
経度フィールドフィールド選択経度を格納するフィールド(必須)
カードに表示するフィールド複数フィールド選択ポップアップ・サイドパネルに追加表示するフィールド
クラスタリングチェック近接マーカーをまとめて表示(デフォルト: 有効)
MapboxトークンテキストMapbox GL JS のアクセストークン(空の場合はLeaflet + OSMを使用)
デフォルト中心選択初期表示の中心位置(自動 / 手動指定)

マップビュー

  • マーカー表示: 各レコードの緯度・経度にマーカーを配置、クリックでポップアップ表示
  • クラスタリング: 近接マーカーをグループ化し、ズームインで個別マーカーに展開
  • サイドパネル: 地点一覧をカード形式で表示。カードクリックで地図がその地点に移動
  • 検索フィルタ: 地点名で部分一致検索。マーカーとサイドパネルを連動フィルタ
  • エリア分析: 表示範囲内のマーカー件数をステータスバーに表示
  • ルート表示: Mapboxトークン設定時にルート表示が可能。サイドパネルでD&D並替
  • CSV出力: 表示中の地点をCSVでダウンロード
  • 印刷: 地図をそのまま印刷
  • レスポンシブ: 768px以下でサイドパネルが下部に移動、480px以下でコンパクト表示

一覧表示(app.record.index.show