지도는 [[베이스 소개|베이스]]에서 사용할 수 있는 [[보기|뷰]]의 한 종류예요. [Maps 플러그인](obsidian://show-plugin?id=maps)을 설치해야 해요. 뷰 메뉴에서 ![[lucide-map.svg#icon]] **지도(Map)**를 선택하면 파일을 인터랙티브 지도로 표시할 수 있으며, 각 파일에 대한 마커와 해당 파일의 속성을 보여주는 미리보기가 함께 표시돼요. ![[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` | 좌표는 `위도, 경도` 형식으로 저장돼요. 지도에서 위치를 우클릭하고 **좌표 복사(Copy coordinates)**를 선택하면 좌표를 얻을 수 있어요. | | `icon` | `landmark` | [Lucide 라이브러리](https://lucide.dev/)의 아이콘 이름이에요. | | `color` | `red` | 유효한 CSS 값: hex, RGB, 이름이 지정된 색상 등. | | `tags` | `places` | 베이스에서 지도 마커를 찾는 데 사용할 태그예요. | 이제 `places` 태그에 대한 필터가 포함된 지도 뷰를 만들고, 위에 나열된 속성을 사용하여 마커 좌표, 아이콘, 색상을 설정하세요. 이 [예시 파일](https://github.com/obsidianmd/obsidian-maps/tree/master/examples)을 Obsidian에서 열어 마커, 아이콘, 색상이 이미 설정된 작동하는 지도 뷰를 확인할 수도 있어요. ## 설정 지도 뷰 설정은 [[보기#뷰 설정|뷰 설정]]에서 구성할 수 있어요. - 임베디드 높이 - 중심 좌표 - 확대 제한 - 마커 좌표, 색상, 아이콘 - 배경 ### 마커 #### 좌표 지도에 핀을 표시하려면 [[보기#뷰 설정|뷰 설정]]에서 **마커 좌표(marker coordinates)** 속성을 선택하세요. 속성에는 위도와 경도 좌표가 포함되어야 해요. 다음 형식이 지원돼요: ```yaml # 텍스트 속성 coordinates: "lat, lng" # 목록 속성 coordinates: - "lat" - "lng" ``` 좌표를 별도의 `latitude`와 `longitude` 속성으로 저장하는 경우, [[베이스 구문#수식|수식]] 속성을 사용하여 다음 수식으로 좌표 배열을 정의해 결합할 수 있어요: `[latitude, longitude]`. #### 아이콘 **마커 아이콘(marker icons)** 속성을 정의하여 마커에 아이콘을 추가하세요. 예를 들어 노트에 `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`, 또는 `var(--color-blue)` 같은 CSS 변수를 값으로 사용할 수 있어요. 위의 아이콘 예시처럼 수식 속성을 사용하여 색상을 동적으로 정의할 수도 있어요. ### 배경 #### 지도 타일 지도 타일은 디지털 지도를 표시하는 표준 방법이에요. 고유한 스타일, 색상, 폰트로 지도를 사용자 지정할 수 있는 여러 서비스가 있어요. Maps는 래스터 및 벡터 타일을 모두 지원하며, TileJSON URL을 포함한 대부분의 타일 URL을 사용할 수 있어요. [OpenFreeMap](https://openfreemap.org/)은 무료로 사용할 수 있는 몇 가지 스타일을 제공해요. **지도 타일(Map tiles)** 설정에서 다음 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)은 오픈 소스예요. 버그 리포트, 기능 요청, 풀 리퀘스트로 기여할 수 있어요.