leaflet-mapping

Obsidian Leaflet マッピング

概要

Obsidian Leaflet プラグインを使うと、JavaScript を書かずに LeafletJS のインタラクティブマップを利用できます。マップは YAML パラメーターを含むコードブロックで定義し、実在する場所（OpenStreetMap）、カスタム画像（ファンタジーマップ、フロアプラン）、またはそれらを重ね合わせて表示できます。 基本原則： マップは Markdown のコードブロックで宣言的に定義します。JavaScript の処理はプラグインが行うため、パラメーターを設定するだけで使えます。 プラグイン： https://github.com/javalent/obsidian-leaflet

前提条件

必須：

• Obsidian Leaflet プラグイン（コミュニティプラグイン → 「Leaflet」を検索） 任意（高度な機能を有効にします）：
• Dataview プラグイン - markerTag、filterTag、linksTo、linksFrom 機能に必須です
• コードブロックで使う YAML 構文の基本的な理解
• 実世界のマップの場合：Google Maps、OpenStreetMap、または GPS デバイスから取得した座標
• 画像マップの場合：Vault 内の画像ファイル、縮尺用の既知の基準寸法

クイックスタート：動作する完全な例

目標： #visited タグが付いたすべてのノートを表示するマップを作成します ステップ 1：プラグインをインストールする

1. 設定 → コミュニティプラグイン → 閲覧
2. 「Leaflet」を検索 → インストール → 有効化
3. 「Dataview」を検索 → インストール → 有効化（タグベースのマーカーに必須）
4. Obsidian を再起動します（プラグインのインストール後に推奨） ステップ 2：テスト用ノートを作成する New York.md を作成します：

---
location: [40.7128, -74.0060]
---
# New York
My trip notes...

ステップ 3：マップを作成する Travel Map.md を作成します：

```leaflet
id: my-travels
markerTag: #visited
height: 500px
```

期待される結果： マップにマーカーが 1 つ表示されます。マーカーをクリックすると、New York ノートが開きます。 マーカーが表示されない場合： 下記のトラブルシューティングチェックリストを参照してください。

使用する場面

このスキルを使う場面：

• Vault 内に場所ベースのナビゲーションを作成する場合（世界地図、都市地図、建物の間取り図）
• ノートの地理データ（フロントマターに場所情報があるノート）を可視化する場合
• マーカー付きのカスタム画像マップを表示する場合（RPG キャンペーン、物語の舞台）
• GPX ファイルや GeoJSON を使ってルートを追跡する場合
• 空間データを使ったインタラクティブなダッシュボードを構築する場合 使用しない場面：
• 単純な画像表示（標準の Markdown を使用してください）
• 複雑な GIS 分析（専用の GIS ツールを使用してください）
• リアルタイムのマップ編集（マーカーはプラグインデータに保存されます）

クイックリファレンス

基本的なマップ構造

\`\`\`leaflet
id: unique-map-id              # REQUIRED - any unique string
image: [[ImageFile.jpg]]       # Image map (omit for real-world map)
lat: 50                        # Initial latitude (center point)
long: 50                       # Initial longitude (center point)
height: 500px                  # Map container height
width: 100%                    # Map container width
minZoom: 1                     # Minimum zoom level
maxZoom: 10                    # Maximum zoom level
defaultZoom: 5                 # Initial zoom level
\`\`\`

マップの種類

種類	パラメーター	使用例
実世界のマップ	image パラメーターを省略	OpenStreetMap、都市地図、GPS データ
画像マップ	image: [[File.jpg]]	ファンタジーマップ、フロアプラン、カスタムアートワーク
複数レイヤーの画像	image: [[[Layer1]], [[Layer2]]]	切り替え可能なオーバーレイ付きマップ
カスタムタイルサーバー	tileServer: <url>|<alias>	別のマップスタイル（ダーク、衛星）

マーカーを作成する

方法	構文	編集可能	使用例
マップを右クリック	インタラクティブ UI	はい	手動でマーカーを配置する
コードブロック	marker: type,lat,long,link,desc	いいえ	ドキュメント内に固定マーカーを配置する
ノートのフロントマターから	markerFile: [[Note]]	いいえ	1 つのノートをマーカーとして表示する
フォルダーから	markerFolder: Path/To/Folder	いいえ	フォルダー内のすべてのノート
タグから	markerTag: #location	いいえ	タグが付いたすべてのノート（Dataview が必要）
リンクから	linksTo: [[Note]]	いいえ	ノートへのリンク元またはリンク先のノート（Dataview が必要）

実世界のマップ

デフォルトのタイルサーバーは OpenStreetMap です。スタイルを変更するには、カスタムタイルサーバーを追加します：

\`\`\`leaflet
id: city-map
tileServer: https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png|Dark
tileServer: https://tiles.wmflabs.org/hillshading/{z}/{x}/{y}.png|Hills
osmLayer: false                # Turn off default OpenStreetMap layer
\`\`\`

タイルオーバーレイ（レイヤー全体の置き換えではなく使用）：

tileOverlay: https://tiles.example.com/{z}/{x}/{y}.png|Overlay Name|on

末尾に |on を追加すると、オーバーレイがデフォルトで有効になります。

画像マップ

最初に必ず行うこと：範囲を設定する

マーカーを追加する前に、座標の混乱を防ぐために範囲を定義してください：

\`\`\`leaflet
id: fantasy-map
image: [[WorldMap.jpg]]
bounds:
  - [0, 0]           # Top-left corner
  - [100, 100]       # Bottom-right corner
\`\`\`

範囲を設定しないと、画像は任意の座標に合わせて引き伸ばされます。範囲を設定すると、緯度・経度を画像のピクセルに対応させられます。 一般的な範囲の設定方法：

• [0,0] to [100,100] - パーセントベース（緯度・経度はパーセント）
• [0,0] to [width,height] - ピクセルベース（画像の寸法に合わせる）
• 元資料に合わせたカスタム座標系

複数レイヤーの画像マップ

個別のマーカーセットを持つ複数の画像を重ねます：

\`\`\`leaflet
id: layered-map
image:
  - [[BaseMap.jpg|Base Layer]]
  - [[Roads.png|Roads]]
  - [[Buildings.png|Buildings]]
\`\`\`

右上のレイヤーコントロールボックスでレイヤーを切り替えます。マーカーはレイヤーごとに保存されます。

画像マップのズームレベル

直感に反する動作： maxZoom の値を大きくすると、マップの初期表示がより遠くなります。 理由： 画像は [0,0] に配置され、表示に合わせて引き伸ばされます。ズームレベルが制御するのは、画像のスケールではなく、基盤となるマップです。 解決策： まず境界を設定してから、好みに合わせてズームを調整します。

bounds: [[0,0], [100,100]]
minZoom: 1
maxZoom: 6
defaultZoom: 3
zoomDelta: 0.5          # Finer zoom control

ノートからマーカーを作成

マーカーの動作： リンクされたマーカーをクリックするとノートが開きます（新しいペインで開く場合は Ctrl/Cmd を押しながらクリック）。フロントマターから作成されたマーカーは、自動的に元のノートにリンクされます。

座標の確認

実世界のマップ：

• Google Maps：場所を右クリック → 1 行目に座標が表示されます
• OpenStreetMap：共有ボタン → 「Geo URI」に座標が含まれています
• GPS デバイス：ウェイポイントの座標をエクスポートします 画像マップ：
• パーセント方式には bounds: [[0,0], [100,100]] を使用します
• 境界を設定した後でマップを右クリックすると、クリックした地点の座標が表示されます
• 試行錯誤：マーカーを配置し、フロントマターの座標を調整します

ノートのフロントマター形式

---
location: [lat, long]           # REQUIRED for automatic markers (array format only)
mapmarker: custom-icon          # Optional: marker type from settings
mapzoom: [minZoom, maxZoom]     # Optional: visibility breakpoints
mapmarkers:                     # Optional: additional markers
  - [type, [lat, long], "Description", minZoom, maxZoom]
  - [type, [lat, long], "Another marker"]
---

座標形式： 配列 [lat, long] である必要があります。"40.7128, -74.0060" のような文字列は機能しません。

マーカーの設定方法

単一のノート：

markerFile: [[LocationNote]]

フォルダー（すべてのノート）：

markerFolder: Locations/Cities
markerFolder: Locations/Cities/    # Limit to top-level only (one slash)

タグによる指定（⚠️ DATAVIEW プラグインが必要）：

markerTag: #location               # Notes with this tag
markerTag: [#city, #visited]       # Notes with BOTH tags
markerTag:
  - #location                      # Notes with #location OR
  - [#city, #capital]              # Notes with both #city AND #capital

OR 条件の場合： markerTag 行を分けて指定します。AND 条件の場合：配列 [#tag1, #tag2] を使用します。 結果の絞り込み：

markerFolder: Locations
filterTag: #important              # Only show important locations

リンク関係による指定（⚠️ DATAVIEW プラグインが必要）：

linksTo: [[MainCity]]              # All notes linking to MainCity
linksFrom: [[TravelLog]]           # All notes linked from TravelLog

複数のファイル：linksTo: [[[File1]], [[File2]]]

カスタムマーカータイプ

プラグインの設定または同じディレクトリの markers.json で定義します：

[
  {
    "type": "city",
    "icon": "building",
    "color": "#FF0000",
    "layer": true
  },
  {
    "type": "dungeon",
    "icon": "dungeon",
    "color": "#8B4513",
    "layer": true
  }
]

次に、フロントマターで使用します：mapmarker: city

オーバーレイ

効果範囲や領域などを示す円形のオーバーレイです。

インタラクティブな作成

Shift + 右クリック → ドラッグ → クリックして半径を設定

コードブロックでの定義

overlay: [color, [lat, long], radius unit, "description"]

例：

overlay: [blue, [32, -89], 25 mi, 'Capital region']
overlay:
  - ['rgb(255,0,0)', [50, 50], 10 km, 'Danger zone']
  - ['#00FF00', [60, 60], 500 ft, 'Safe area']

注： オーバーレイは指定された順序で描画されます。大きなオーバーレイの背後にある小さなオーバーレイは、操作できなくなります。

ノートのフロントマターからオーバーレイを作成

---
location: [50, 50]
mapoverlay: [blue, [50, 50], 25 km, "Influence zone"]
---

または、距離タグから自動生成します：

\`\`\`leaflet
overlayTag: influence
overlayColor: rgba(0,100,255,0.3)
\`\`\`

ノートのフロントマター：influence: 50 km

GeoJSON と GPX

GeoJSON

geojson: [[File.geojson]]|Optional Alias
geojson:
  - [[Routes.geojson]]
  - [[Regions.geojson]]|Regions|[[LinkedNote]]
geojsonColor: #FF0000            # Default color

GeoJSON のフィーチャーには、次の情報を含められます：

• title、description、または name → ツールチップ
• MapBox SimpleStyle プロパティ → スタイル設定
• 指定された順序で描画されます（レイヤーの順序が重要です）

GPX（GPS トラック）

gpx: [[Track.gpx]]
gpx:
  - [[Hike1.gpx]]
  - [[Hike2.gpx]]
gpxColor: #00FF00
gpxMarkers:
  start: start-marker-type       # From plugin settings
  waypoint: waypoint-type

GPX ファイルには次の情報が表示されます：

• ルートライン（データがある場合は、速度／標高／心拍数に応じて色分け）
• オプションの開始／終了／ウェイポイントマーカー
• インタラクティブなデータポイント表示（トラックをクリック）

よくあるパターン

場所ノートを使ったキャンペーンマップ

\`\`\`leaflet
id: campaign-world
image: [[WorldMap.jpg]]
bounds: [[0,0], [100,100]]
markerFolder: Locations/Cities
markerFolder: Locations/Dungeons
markerTag: #location
filterTag: #visited
defaultZoom: 3
\`\`\`

GPX を使った旅行ダッシュボード

\`\`\`leaflet
id: travel-routes
lat: 40
long: -100
gpxFolder: Travel/2024
gpxColor: #FF6600
gpxMarkers:
  start: trip-start
  waypoint: stop
\`\`\`

複数レイヤーのファンタジーマップ

\`\`\`leaflet
id: kingdom-map
image:
  - [[Base.jpg|Terrain]]
  - [[Political.png|Borders]]
  - [[Trade.png|Routes]]
bounds: [[0,0], [1000,1000]]
markerTag: #city
overlayTag: territory
overlayColor: rgba(100,100,255,0.2)
\`\`\`

よくある間違い

問題：画像マップ上のマーカーが間違った場所に表示される

原因： 境界が定義されていません。境界がない場合、Leaflet は任意の座標空間を使用するため、画像が予測できない形で引き伸ばされます。 理由： 画像マップは、Leaflet のデフォルトの座標系に画像を重ねます。境界が明示的に指定されていないと、プラグインは座標（例：[50, 50]）を画像上の特定のピクセルに対応付けられません。 修正方法：

1. マーカーを配置する前に、必ず境界を設定します：

bounds: [[0,0], [100,100]]

2. 既存のマーカーを削除します（間違った座標系で配置されています）
3. マーカーをもう一度配置します。クリックした場所に表示されるようになります 画像上で正しい座標を確認する方法： 境界を設定した後、マップを Shift + クリックして座標を確認し、フロントマターで使用します。

問題：十分にズームインできない／マップの初期表示が遠すぎる

原因： 画像マップでは、ズームが制御するのは画像のスケールではなく、基盤となるマップです 修正方法：

1. 座標系に合うように境界を設定します
2. maxZoom を調整します（値を小さくすると、初期表示が近くなります）
3. より細かく調整するには zoomDelta: 0.5 を使用します

問題：ノートのマーカーが表示されない

簡単な診断：

1. 位置情報があるノートを開き、フロントマターに location: [40.7128, -74.0060] と表示されていますか？（配列形式）
2. markerTag／filterTag／linksTo／linksFrom を使用していますか？ → Dataview プラグインはインストールされ、有効になっていますか？
3. Obsidian を再起動してみてください（プラグインを有効にするには再起動が必要な場合があります）。 詳細なチェックリスト：

• ノートのフロントマターに location: [lat, long] がある（正確な形式は配列のみで、文字列ではありません）
• YAML（tags: visited）とインライン（ノート本文の #visited）の両方でタグが機能する
• 座標が地図の範囲内にある（緯度／経度の最小値・最大値を確認）
• markerTag、filterTag、linksTo、linksFrom のいずれかを使用していますか？ Dataview プラグインのインストールと有効化が必須です（必須依存関係）
• Dataview が機能することを確認する：dataview コードブロックを含むノートを作成し、プラグインが有効か確認します
• filterTag を使用していますか？ ノートに必要なタグがすべてあるか確認します
• マーカーのズーム切り替えポイント（mapzoom）が地図の minZoom／maxZoom の範囲内にある
• 現実世界の地図の場合：緯度／経度が有効な値である（緯度：-90～90、経度：-180～180）
• 画像地図の場合：座標が使用している境界システムと一致している
• 地図で lat／long／defaultZoom を指定していない場合：デフォルトでは［世界地図の50％］を中心に表示します。すべてのマーカーに自動で表示範囲を合わせるには、showAllMarkers: true を追加します。

問題：GeoJSON／GPX ファイルが読み込まれない

原因：

• ファイルパスが正しくない（ウィキリンク [[file.geojson]] または相対パスを使用）
• ファイルが大きく、描画に時間がかかる（コンソールでエラーを確認）
• GeoJSON の JSON 構文エラー 解決方法： https://geojsonlint.com/ で GeoJSON を検証します

問題：オーバーレイを操作できない／マーカーがオーバーレイの下に隠れる

原因： 描画順が重要です。後から描画されたオーバーレイやマーカーが上に表示されます。 解決方法：

• オーバーレイが別のオーバーレイを隠している場合：コードブロック内の順序を変更します（大きなオーバーレイを最後にします）
• オーバーレイがマーカーを隠している場合：半透明色 rgba(255,0,0,0.3) を使用するか、オーバーレイの半径を小さくします
• マーカーがオーバーレイの下にある場合：コードブロック内では、markerTag／markerFolder によるマーカーがオーバーレイの後に描画されます

問題：カスタムタイルサーバーが動作しない

チェックリスト：

• URL に {z}、{x}、{y} のプレースホルダーが含まれている
• サーバーがパブリックアクセスを許可している（API キー不要）
• ベースマップに重ねる場合は tileServer ではなく tileOverlay を使用している
• ブラウザーのコンソールで CORS または 404 エラーを確認する

距離と計測

2地点間の距離を表示する：

• Shift／Alt キーを押しながら地点1をクリックします
• Shift／Alt キーを押しながら地点2をクリックします
• 距離が左下のコントロールボックスに表示されます 縮尺と単位：

unit: miles               # Display unit
scale: 1.5               # Scale factor for image maps

画像地図の場合、画像上の既知の距離を測定し、縮尺を計算します： scale = real_distance / measured_pixel_distance

高度な機能

ノートから初期表示を設定

coordinates: [[CityNote]]        # Note with location frontmatter
zoomTag: viewDistance           # Read zoom from note's frontmatter

CityNote のフロントマター：

location: [40, -100]
viewDistance: 50 miles

マーカーのズーム切り替えポイント

ズームレベルに応じてマーカーを表示／非表示にします（表示の混雑を防止）：

mapzoom: [3, 7]          # Only visible between zoom 3-7

または、コードブロック内でマーカーごとに設定します：

marker: city,40,-100,[[Note]],"Description",3,7

描画モード

draw: true               # Enable drawing tools
drawColor: #FF0000       # Default shape color

描画した図形を右クリックすると、編集／削除できます。図形はマップインスタンスに保存されます。

ダークモード

darkMode: true           # CSS filter inversion

.leaflet-container .dark-mode を対象とする CSS スニペットでカスタマイズします

実際の活用例

コミュニティでの活用例：

• TTRPG キャンペーン： 100件以上の位置情報ノートを使った世界地図。プレイヤーが地域を発見すると自動更新されます
• 研究： GeoJSON データセットを、リンクされた分析ノートとともに可視化します
• 旅行記： Apple Health の GPX トラックと、マーカーとして表示する日記エントリー
• 都市計画： 各階の画像オーバーレイを使った建物のレイアウト
• 物語の執筆： プロットの時系列に沿ったキャラクターの位置追跡 パフォーマンスに関する注意：
• マーカー50個以上：影響は最小限です
• マーカー200個以上：読み込み時間が目立つようになります
• 大きな GeoJSON／GPX：ファイルの分割を検討してください
• 1つのノートに複数の地図：問題なく動作し、それぞれ独立したインスタンスとして扱われます