DrupalでLeafletを使用して地図を作成する

2025-05-09

以下は、DrupalでLeafletモジュールを使用してインタラクティブな地図を設定する方法を、Markdown形式で説明したステップごとのガイドです。このガイドはDrupal 10（または他の最新バージョン）を対象としており、Drupalの基本操作（モジュールのインストール、コンテンツタイプの管理、Viewsの使用）に一定の理解があることを前提としています。

ステップ1：必要なモジュールをインストールする

Leafletを使用してDrupalで地図を作成するには、以下のモジュールが必要です：

Leaflet: Leaflet JavaScriptライブラリを統合し、インタラクティブな地図を表示します。
Geofield: 地理データ（経緯度、WKT形式など）を保存します。
Geocoder（任意）：住所を地理座標に変換します（OpenRouteServiceなどのAPIサポートが必要）。
Leaflet Views（任意）：Viewsで複数の地点を表示する地図を作成します。
Leaflet More Maps（任意）：Google MapsやStamenなどの追加地図レイヤーを提供します。

インストール方法

Composerを使用してモジュールをインストール（推奨）： bash composer require 'drupal/leaflet:^10.0' composer require 'drupal/geofield:^1.0' composer require 'drupal/geocoder:^3.0' composer require 'drupal/leaflet_more_maps:^2.1'
Leaflet JavaScriptライブラリをダウンロード：
Leaflet公式サイトから最新バージョンをダウンロード。
解凍後、フォルダ名をleafletに変更し、sites/all/libraries/leafletに配置。
leaflet.jsがsites/all/libraries/leaflet/leaflet.jsにあることを確認。
モジュールを有効化：
Drupal管理画面で「管理 > 拡張」に移動。
Leaflet、Geofield、Geocoder（使用する場合）、Leaflet Views（必要に応じて）をチェックして有効化。
ステータスレポートを確認：
「管理 > レポート > ステータスレポート」に移動し、Leafletライブラリが正しくインストールされていることを確認。

ステップ2：コンテンツタイプを作成し、地理フィールドを追加

地図上に位置を表示するには、地理データを保存するコンテンツタイプが必要です。

コンテンツタイプの作成：
「構造 > コンテンツタイプ > コンテンツタイプを追加」に移動。
新しいコンテンツタイプ（例：「地図位置（Map Locations）」）を作成。
フィールドの追加：
新しいコンテンツタイプで「フィールドの管理」 > 「フィールドを追加」をクリック。
以下のフィールドを追加：
- 住所フィールド（任意）：
- フィールドタイプ：Address（Addressモジュールが必要）。
- 通り、都市などの住所情報を入力。
- 地理フィールド：
- フィールドタイプ：Geofield。
- 入力形式（経緯度やWKTなど）を選択。
- 単一値または複数値を設定（必要に応じて）。
Geocoderの設定（住所フィールド使用時）：
「設定 > システム > Geocoder」に移動。
プロバイダ（例：OpenRouteService）を追加し、APIキーを入力（登録して取得）。
Geofieldフィールド設定で「住所フィールドから自動変換」を選択し、対応する住所フィールドを指定。

ステップ3：単一ノードの地図表示を設定

単一ノード（コンテンツ）に地図を表示するには、Geofieldの表示形式を設定します。

表示の管理：
「構造 > コンテンツタイプ > [コンテンツタイプ] > 表示の管理」に移動。
Geofieldフィールドを見つけ、フォーマットをLeafletに設定。
Leafletの設定：
フィールド横の「歯車」アイコンをクリックし、以下を設定：
- 地図の種類：基本地図（OSM MapnikやLeaflet More Mapsの他のオプション）を選択。
- ズームレベル：初期ズームレベルを設定（例：13）。
- マーカーアイコン：デフォルトマーカーまたはカスタムアイコンを選択。
- ポップアップウィンドウ：有効化し、表示内容を設定（Tokenモジュールを使用して動的コンテンツ（例：[node:title]）を挿入可能）。
- 高さ：地図の高さを設定（例：400px）。
設定を保存。
テスト：
新しいノードを作成し、地理データ（経緯度または住所）を入力。
ノードを表示し、地図が正しく表示されることを確認。

ステップ4：Viewsを使用して複数の地点の地図を表示

複数の地点（例：すべての「地図位置」ノード）を表示するには、Leaflet Viewsモジュールを使用します。

Viewsの作成：
「構造 > Views > ビューを追加」に移動。
設定：
- ビュー名：例：「地図ビュー」。
- 表示：ページまたはブロックを選択。
- コンテンツタイプ：「地図位置」を選択。
- フォーマット：「Leaflet Map」を選択。
フィールドの追加：
Geofieldフィールド（地理データを保存）を追加。
任意：ポップアップウィンドウ用のタイトルフィールドや説明フィールドを追加。
Leaflet Mapフォーマットの設定：
「フォーマット > Leaflet Map > 設定」をクリック：
- データソース：Geofieldフィールドを選択。
- タイトルフィールド：ポップアップウィンドウに表示するタイトルフィールド（例：タイトル）を選択。
- 説明コンテンツ：説明フィールドを選択またはビュー形式（例：Teaser）を指定。
- 地図の種類：基本地図を選択。
- マーカークラスタリング：Leaflet MarkerClusterを有効化（対応するサブモジュールが必要）。
- 地図の高さ：地図の高さを設定（例：600px）。
設定を保存。
ページまたはブロックの設定：
ビューのパス（例：/map）を設定、またはブロックを指定エリアに配置。
ビューを保存し、プレビューしてすべての地点が地図に表示されることを確認。

ステップ5：高度なカスタマイズ（任意）

地図レイヤーのカスタマイズ

Leaflet More Mapsモジュールをインストールし、追加の地図スタイル（Stamen、Esriなど）を有効化。
「設定 > システム > Leaflet More Maps」に移動し、必要なAPIキー（必要な場合）を入力してレイヤーを選択。

マーカーのカスタマイズ

Leaflet More Markersモジュールをインストールし、絵文字やフォントアイコンをサポート。
GeofieldまたはViewsの設定でカスタムマーカーを選択し、サイズやアニメーション効果を指定。

住所検索の追加

Geocoderモジュールを使用して住所のオートコンプリートを有効化。
「設定 > システム > Geocoder」に移動し、プロバイダを設定してオートコンプリート機能を有効化。

APIを使用したカスタマイズ

hook_leaflet_map_infoフックを実装して地図の動作（レイヤー、ズームオプションなど）を完全に制御。
サンプルコードはleaflet.api.phpを参照。

ステップ6：テストと最適化

地図のテスト：
デスクトップおよびモバイルデバイスで地図が正しく表示されることを確認。
マーカー、ポップアップウィンドウ、ズーム機能が正常に動作するかチェック。
最適化：
地図の高さがレスポンシブになるよう設定（パーセンテージまたはCSSを使用）。
大量のデータのパフォーマンスを向上させるため、マーカークラスタリングを有効化。
外部API（例：OpenRouteService）の依存関係を確認し、APIクォータが十分であることを確認。

よくある問題と解決策

地図が表示されない：
Leafletライブラリが正しくインストールされているか確認（sites/all/libraries/leaflet）。
有効な地理データがあるか確認。
ブラウザのコンソールでJavaScriptエラーを確認。
住所が座標に変換されない：
Geocoderモジュールが正しく設定され、有効なAPIキーがあるか確認。
住所フィールドのフォーマットが正しいか確認。
ズームコントロールのスタイルが小さすぎる：
CSSでズームコントロールをカスタマイズ、またはLeaflet Zoomsliderプラグインをインストールし、テーマにJS/CSSを追加。

参考資料

以上のステップに従うことで、DrupalでLeafletを使用して機能豊富なインタラクティブな地図を簡単に作成できます。さらにサポートが必要な場合は、Drupalコミュニティまたは専門の開発者に連絡してください。