マップは[[Basesの紹介|Bases]]で使用できる[[ビュー]]の一種です。[Mapsプラグイン](obsidian://show-plugin?id=maps)のインストールが必要です。 ビューメニューから ![[lucide-map.svg#icon]] **マップ** を選択すると、各ファイルのマーカーが付いたインタラクティブなマップとしてファイルを表示し、そのファイルのプロパティを表示するプレビューが表示されます。 ![[bases-map-places.png#interface]] ## Mapsプラグインのインストール マップビューにはObsidian 1.10が必要です。[Mapsプラグイン](obsidian://show-plugin?id=maps)は別途ダウンロードできる公式[[コミュニティプラグイン]]です。 1. [[コミュニティプラグイン#コミュニティプラグインのインストール]]の手順に従います 2. リストから[Maps](obsidian://show-plugin?id=maps)をダウンロードして有効化します ## 例 まず、**Eiffel Tower** というノートを作成し、以下のプロパティをコピーしてみてください： ```yaml --- coordinates: - "48.85837" - "2.294481" icon: "landmark" color: "red" tags: - places --- ``` 上記のコードの意味は以下の通りです： | プロパティ | 値 | | | ------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | `coordinates` | `48.85837`<br>`2.294481` | 座標は`緯度, 経度`として保存されます。座標はマップ上の場所を右クリックして**座標をコピー**を選択することで取得できます。 | | `icon` | `landmark` | [Lucideライブラリ](https://lucide.dev/)のアイコン名。 | | `color` | `red` | 有効なCSS値：16進数、RGB、名前付きカラーなど。 | | `tags` | `places` | ベースでマップマーカーを見つけるために使用するタグ。 | 次に、タグ`places`のフィルターを使ってマップビューを作成し、上記のプロパティを使用してマーカーの座標、アイコン、色を設定します。 また、これらの[サンプルファイル](https://github.com/obsidianmd/obsidian-maps/tree/master/examples)をObsidianで開くと、マーカー、アイコン、色がすでに設定された動作するマップビューを確認できます。 ## 設定 マップビューの設定は[[ビュー#ビュー設定|ビュー設定]]で設定できます。 - 埋め込みの高さ - 中心座標 - ズーム制約 - マーカーの座標、色、アイコン - 背景 ### マーカー #### 座標 マップにピンを表示するには、[[ビュー#ビュー設定|ビュー設定]]で**マーカー座標**プロパティを選択します。プロパティには緯度と経度の座標が含まれている必要があります。以下の形式が使用できます： ```yaml # テキストプロパティ coordinates: "lat, lng" # リストプロパティ coordinates: - "lat" - "lng" ``` 座標を別々の`latitude`と`longitude`プロパティとして保存している場合は、[[Bases構文#数式|数式]]プロパティで以下の数式を使用して座標の配列として定義することで組み合わせることができます：`[latitude, longitude]`。 #### アイコン **マーカーアイコン**プロパティを定義してマーカーにアイコンを追加します。例えば、ノートに`icon`というプロパティを追加し、Obsidian組み込みの[Lucideライブラリ](https://lucide.dev/icons/)から`landmark`や`utensils`などの値を設定できます。 ##### 数式を使ってアイコンを定義する すべてのレストランにマップ上で同じアイコンを表示したい場合： 1. **Restaurants** というノートを作成し、`icon`プロパティに`utensils`という値を追加します。 2. レストランのノートに`type`というプロパティを追加し、`[[Restaurants]]`ノートへのリンクを設定します。 3. ベースに`Type icon`という数式プロパティを追加し、以下のコードを入力します： ```js list(type)[0].asFile().properties.icon ``` 4. ビュー設定でマーカーアイコンとして`Type icon`を選択します。 これで完成です！マップには場所自体ではなく、場所の*タイプ*からアイコンが表示されるようになります。 #### 色 マーカーの色を設定します。RGB `rgb(0,0,0)`、HEX `#000`、またはCSS変数 `var(--color-blue)` として値を受け付けます。上記のアイコンの例と同様に、数式プロパティを使って色を動的に定義できます。 ### 背景 #### マップタイル マップタイルはデジタルマップを表示する標準的な方法です。独自のスタイル、色、フォントでマップをカスタマイズするために使用できるサービスがいくつかあります。Mapsはラスタータイルとベクタータイルの両方をサポートしており、TileJSON URLを含むほとんどのタイルURLを受け付けます。 [OpenFreeMap](https://openfreemap.org/)では、無料で使用できるいくつかのスタイルが提供されています。**マップタイル**設定で以下のURLのいずれかを試してみてください： | 名前 | URL | | -------- | ------------------------------------------------ | | Dark | `https://tiles.openfreemap.org/styles/dark` | | Positron | `https://tiles.openfreemap.org/styles/positron` | | Liberty | ``https://tiles.openfreemap.org/styles/liberty`` | #### 便利なリンク - [Maputnik](https://maputnik.github.io/) - マップタイルのカスタマイズ用。 - [Protomaps](https://protomaps.com/) - マップタイルのセルフホスティング用。 - 無料枠のあるその他のホスティングサービスには[MapTiler](https://www.maptiler.com/)や[Mapbox](https://www.mapbox.com/)があります。 ## ヒント [[数式]]を使って一般的なマッピングサービスへのリンクを作成できます。例えば、以下の数式を使ってピンにGoogle Mapsへのリンクを表示できます： ```js link("https://www.google.com/maps/search/" + file.name.replace(" ","+"),"Google Maps") ``` ## トラブルシューティング Mapsプラグインを最初にロードしたときにマップが空白で表示される場合は、[[Obsidianのアップデート|Obsidianインストーラーバージョンのアップデート]]を試してください。 [Mapsプラグイン](https://github.com/obsidianmd/obsidian-maps)はオープンソースです。バグレポート、機能リクエスト、プルリクエストで貢献できます。