インストール
composer require 'drupal/leaflet:^10.3'
概要
LeafletモジュールはLeaflet JavaScriptライブラリとの包括的な連携を提供し、Drupalでインタラクティブなウェブマッピング機能を実現します。コンテンツ編集者は直感的なマップインターフェースを通じて地理データの作成、編集、表示が可能です。
このモジュールは描画ツール付きのGeofieldウィジェット（Leaflet-Geoman搭載）、マップ上に位置を表示するフォーマッター、マップベースのコンテンツ一覧を作成するための完全なViews連携を提供します。複数のタイルレイヤープロバイダー、マーカークラスタリング、ツールチップ、ポップアップ、ジオコーディング検索、TokenやHookによる広範なカスタマイズをサポートしています。
機能には、MapLibre GL JSによるベクタータイルサポート、精密な描画のためのGeoJSONオーバーレイ連携、フルスクリーンモード、ユーザー位置検出、パフォーマンス最適化のための遅延読み込みが含まれます。
Features
- Point、LineString、Polygon、Circle、Rectangleの作成・編集用Leaflet-Geoman描画ツール付きインタラクティブLeafletマップウィジェット
- カスタマイズ可能なマーカー、ポップアップ、ツールチップでGeofieldデータをインタラクティブマップとして表示するLeafletマップフィールドフォーマッター
- オーバーレイとレイヤーコントロール付きで任意のViewをインタラクティブマップとして表示するLeaflet Mapスタイルプラグインによる完全なViews連携
- OpenStreetMap、Stadia Maps、Google Maps、MapTiler、カスタムプロバイダーを含む複数のベースタイルレイヤーサポート
- 高性能マップレンダリングのためのMapLibre GL JS連携によるベクタータイルサポート
- 大量のマーカーを処理するためのLeaflet Markerclusterサブモジュールによるマーカークラスタリング機能
- スナッピングによる精密描画のための参照レイヤーとして外部・内部ソースを許可するGeoJSONオーバーレイ連携
- Tokenベースのカスタマイズによるカスタム画像、SVG、HTML DivIcon、Circle Markerをサポートする動的マーカーアイコン
- Token、エンティティフィールド、またはレンダリングされたビューモードを使用した設定可能なコンテンツ付きLeafletツールチップとポップアップ
- オートコンプリート連携による住所検索ジオコーディング（Geocoderモジュールが必要）
- Leaflet.Locateプラグインによるユーザー位置検出
- Leaflet.Control.FullScreenプラグインによるフルスクリーンマップコントロール
- 初期マップ位置に戻るためのReset Map Viewコントロール
- 距離スケールを表示するMap Scaleコントロール
- タッチデバイス操作改善のためのジェスチャーハンドリング
- パフォーマンス最適化のためのIntersectionObserver APIを使用した遅延読み込み
- すべてのマップコンポーネント設定でのTokenと置換パターンサポート
- マップ定義、機能、レンダリングをカスタマイズするための広範なHookシステム
- マップ上にインデックス化されたコンテンツを表示するためのSearch API Views連携
- エンティティビューモードでのパフォーマンス向上のためのAJAXポップアップ読み込み
- レイヤーコントロール管理のためのViewsフィールドグルーピングによるオーバーレイグルーピング
Use Cases
店舗検索マップ
Geofield付きの店舗位置用コンテンツタイプを作成。Leaflet Viewsを使用してすべての店舗をインタラクティブマップ上に表示し、密集エリアではクラスタリングを使用。ポップアップで店舗詳細を表示し、ユーザーが住所で検索できるようジオコーダーを使用。
イベント場所エディター
Leafletウィジェット付きのGeofieldをイベントコンテンツタイプに追加。正確な位置マーキングのための描画ツールを有効化。会場境界を含む別フィールドからのGeoJSONオーバーレイを使用し、事前定義された位置へのスナッピングで精密な描画を実現。
不動産物件マップ
Leafletマップビューに表示される物件位置を持つ不動産サイトを構築。Tokenベースのアイコンを使用して物件タイプごとに異なるマーカーを表示。数千の物件でもパフォーマンスを維持するためマーカークラスタリングとAJAXポップアップを有効化。
マルチレイヤー地理ダッシュボード
カテゴリフィールドでグルーピングしたViewを作成し、異なるタイプの位置を個別のオーバーレイレイヤーとして表示。ユーザーはレイヤーコントロールを使用してレイヤーのオン/オフを切り替え可能。追加データレイヤーのためにLeaflet attachment displayと組み合わせ。
トレイル/ルートマッピング
Leafletウィジェットを使用してハイキングトレイルや配送ルートのLineString/Polygonジオメトリを描画。視覚的な差別化のためにパススタイリングオプションを設定。難易度Tokenに基づくカスタムパスカラーでフォーマッターを使用してマップ上にルートを表示。
インタラクティブデータビジュアライゼーション
データリッチなマップビジュアライゼーションのために複数タイルレイヤーサポートとMapLibre GL JSによるベクタータイルを活用。Hookを通じた高度なインタラクティビティのためにカスタムデータをJavaScriptに渡すfeature追加プロパティを使用。
Tips
- hook_leaflet_map_info()を使用して、ウィジェット/フォーマッター設定で選択可能な異なるタイルプロバイダーを持つカスタムマッププリセットを定義
- Token置換はフィールド値、エンティティプロパティ、サイトTokenをサポート - 利用可能なオプションを探索するにはTokenブラウザを使用
- 多くのマーカーでより良いパフォーマンスを得るには、マーカークラスタリングを有効にし、エンティティビューモードにはAJAXポップアップ読み込みを検討
- ウィジェットのGeoJSONオーバーレイはスナッピングをサポート - 建物アウトラインなどの参照ジオメトリ上に正確にポイントを描画するのに最適
- MapLibre GL JSによるベクタータイルは、ベクターフォーマットをサポートする現代的なベースマップでよりスムーズなズームと回転を提供
- Hookを通じた高度なインタラクティビティのためにカスタムデータをJavaScriptに渡すにはfeature_properties JSONフィールドを使用
- 遅延読み込みオプションは、マップが折り返し線より下にある場合の初期ページ読み込みを改善 - スクロールしてビューに入った時にマップが初期化
- Viewsのオーバーレイグルーピングにより、ユーザーはレイヤーコントロールを使用してfeatureカテゴリのオン/オフを切り替え可能 - グルーピングにはタクソノミーまたはリストフィールドを使用
- マーカーのカスタムCSSクラス（Tokenサポート付き）により、エンティティデータに基づいて異なるスタイルのマーカーを実現
Technical Details
権限 1
Hooks 10
hook_leaflet_map_info
タイルレイヤー、設定、デフォルト構成を含むカスタムマップ定義を定義
hook_leaflet_map_info_alter
既存のマップ定義を変更してタイルレイヤー、設定を修正、またはカスタムアイコンを追加
hook_leaflet_default_widget_alter
レンダリング前にLeaflet Map Widget設定を変更
hook_leaflet_formatter_feature_alter
レンダリング前にフォーマッター内の個別Leaflet feature/マーカーを変更
hook_leaflet_default_map_formatter_alter
Leaflet Map Formatter全体の設定とfeatureを変更
hook_leaflet_map_view_geofield_value_alter
処理前にViews内のgeofield値を変更
hook_leaflet_views_feature_alter
Leaflet Views内の個別feature/マーカーを変更
hook_leaflet_views_features_alter
レンダリング前にLeaflet Views内のすべてのfeature配列を変更
hook_leaflet_views_features_group_alter
Leaflet Views内のfeatureグループ（オーバーレイ）を変更
hook_leaflet_map_view_style_alter
Leaflet Map View Style全体の設定を変更
Troubleshooting 6
ブラウザコンソールでJavaScriptエラーを確認。Leafletライブラリが正しくインストールされていることを確認（/admin/reports/statusでステータスレポートを確認）。マップコンテナに高さが定義されていることを確認。Drupalキャッシュをクリア。
アイコンURLパスがアクセス可能で絶対パスであることを確認。アイコンサイズが指定されていることを確認（URLが有効な場合、モジュールは画像から自動検出可能）。ファイル権限がアイコン画像へのWebアクセスを許可していることを確認。
Geocoderモジュールがインストールされ、少なくとも1つのプロバイダーで設定されていることを確認。ユーザーが「access geocoder api endpoints」権限を持っていることを確認。必要な場合はプロバイダーAPIキーが設定されていることを確認。
少なくとも1つのGeofieldがViewフィールドに追加され、Leaflet Mapスタイル設定でData Sourceとして選択されていることを確認。Geofieldに有効なWKTデータが含まれていることを確認。Viewが結果を返していることを確認。
Tokenパターンが正しいことを確認（Tokenブラウザを使用）。エンティティが参照されたフィールドの値を持っていることを確認。Viewsでは、置換フィールドがViewフィールドに追加されていることを確認。
Leaflet Markerclusterサブモジュールを有効化。フォーマッター/View設定でクラスタリングが有効になっていることを確認。クラスタリングをトリガーするのに十分な近接マーカーがあることを確認。
Security Notes 4
- 「configure leaflet」権限はモジュール管理警告の表示へのアクセスを制御 - 適切に割り当て
- Geocoder機能は不正なAPI使用を防ぐために「access geocoder api endpoints」権限が必要
- ポップアップ/ツールチップのToken置換は適切なサニタイズを使用するが、XSSリスクについてカスタムコンテンツを確認
- 外部タイルプロバイダーはユーザーIPアドレスをログに記録する可能性がある - 選択したマッププロバイダーのプライバシーへの影響を確認