> [!column|flex no-title]
>> [!menu-dark-red|ttl-c] [[Obsidian TTRPG Tutorials]] / [[Plugin Tutorials]] / [[Obsidian Leaflet]]
> [!column|4 no-title]
>> [!menu-green-1|ttl-c] [[Getting Started]]
>
>> [!menu-green-2|ttl-c] [[Plugin Tutorials]]
>
>> [!menu-green-3|ttl-c] [[Community Supported Games]]
>
>> [!menu-green-4|ttl-c] [[Obsidian TTRPG Tutorials/Templates/Templates\|Templates]]
> [!column|3 no-title]
>> [!patreon|ttl-c] [Patreon](https://www.patreon.com/JPlunkett) ([Starter Vault](https://www.patreon.com/posts/obsidian-patreon-96801399))
>
>> [!discord|ttl-c] [Obsidian TTRPG Community Discord](https://discord.gg/CdM9UCJdwU)
>
>> [!discord|ttl-c] [Obsidian Official Discord](https://discord.gg/8AF29UBUCa)
## Obsidian Leaflet
You can add your own maps into [Obsidian Leaflet](obsidian://show-plugin?id=obsidian-leaflet-plugin). From there you can:
- Add pins to your maps.
- Link those pins to notes.
- Measure distance.
- Draw shapes and lines on your map.
- It supports layered maps.
- It supports custom pins.
- Pins can be made visible/invisible at specific zoom levels.
![[Obsidian_Leaflet.gif]]
## Tutorials
> [!example]- Official Plugin Documentation
> [Official Plugin Documentation ](https://plugins.javalent.com/Leaflet)
> [!example]- Encounter Map Tutorial
> 
> [!example]- Regional Map Tutorial
> 
## Obsidian Leaflet Templates
Obsidian Leaflet does require some fairly overwhelming syntax in order to display a map. You should not be typing this out manually though! Instead just copy the following text into a new template.
### Templates
> [!example]+ New - Simpler Template
> This is a simpler template. It's not covered in the videos but you should be able to swap this out for the old template and get up and running quicker. There is a version of this in the Patreon Vault that includes an automatic calculator for determining the field values.
>
> \`\`\`leaflet
id: MapCalcExample \#\#\# Must be unique with no spaces
image: \[\[Map - Regional map of Lampoteuo.png\]\] \#\#\# Link to the map image file
bounds: \[\[0,0], \[1642, 2048\]\] \#\#\# Size of the map in px Width_x, Height_y
height: 850px \#\#\# Size of the leaflet embed in px on your screen
width: 95% \#\#\# Size of the leaflet embed in your note
lat: 1024 \#\#\# To center the map, make this half of the map width.
long: 821 \#\#\# To center the map, make this half of the map height.
minZoom: -1.5 \#\#\# Controls how far away from the map you can zoom out. Hover over the target icon to see the current level.
maxZoom: 1 \#\#\# Controls how far towards the map you can zoom in. Hover over the target icon to see the current level.
defaultZoom: -1 \#\#\# Sets the default zoom level when the map loads. Hover over the target icon to see the current level.
zoomDelta: 0.5 \#\#\# Adjust how much the zoom changes when you zoom in or out.
unit: km \#\#\# The value displayed when measuring so you know what type of unit is being measure.
scale: 0.09328358208955223 \#\#\# Only required if you are using the measurement tool. Real units/px (resolution) of your map
recenter: false
darkmode: false \#\#\# marker
> \`\`\`
> [!tip]- Encounter Map Template - Designed for maps where you don't need to measure distance.
> \`\`\`leaflet
> \#\#\# Tutorial: https://youtu.be/54EyMzJP5DU
> \#\#\# id must be unique
> id: update-me
> image: \[\[MapName.png\]\]
> height: 1000px
> width: 70%
> \#\#\# This sets where the map starts by default. Set it to the middle (half) of your bounds.
> lat: 50
> long: 50
> \#\#\# 0 is no zoom. Negative zoom steps away from the map. Positive zoom steps towards the map.
> minZoom: 0
> \#\#\# Max zoom is 18.
> maxZoom: 18
> \#\#\# Hover mouse over the Reset Zoom icon to see your current zoom level.
> defaultZoom: 15
> \#\#\# How far it zooms in or out with each step. Can be in decimals.
> zoomDelta: 0.5
> \#\#\# This is a string so can be any text. Change it to match your maps measurement scale.
> unit: feet
> scale: 1
> darkMode: false
> \`\`\`
> [!tip]- Regional Map Template - Designed for maps where you want the ability to measure distance
> \`\`\`leaflet
> \#\#\# Tutorial: https://youtu.be/54EyMzJP5DU
> \#\#\# id must be unique
> id: Faerun_Map
> \#\#\# Lock pins so they can't be moved
> lock: true
> \#\#\# If true, view of map will recenter as you zoom out.
> recenter: true
> \#\#\# If true, disables mouse scroll for zomming in and out of a map. Button controls still work.
> noScrollZoom: true
> image: \[\[HighRes (with Saltmarsh) (Orig).jpg\]\]
> \#\#\# Map Pixel Height x 1 / (Pixels between Bar Scale / 100)
> \#\#\# Map Pixel Width x 1 / (Pixels between Bar Scale / 100)
> \#\#\# Note that this formula requires adjustments depending on your map. The idea is to determine the number of units between your bar scale. We divide by 100 here because my bar scale measures in 100 units. If your maps scale bar measures in units of 50 them you should divide by 50 instead. The idea is to calculate how many pixels are equal to 1 unit.
> \#\#\# Bounds is entered as \[Height, Width\]
> bounds: \[\[0,0\], \[1815.07, 2805.48\]\]
> height: 900px
> width: 95%
> \#\#\# This sets where the map starts by default. Set it to the middle (half) of your bounds.
> lat: 907.53
> long: 1402.74
> \#\#\# 0 is no zoom. Negative zoom steps away from the map. Positive zoom steps towards the map.
> minZoom: -1.5
> \#\#\# Max zoom is 18.
> maxZoom: 1.5
> \#\#\# Hover mouse over the Reset Zoom icon to see your current zoom level.
> defaultZoom: -1
> \#\#\# How far it zooms in or out with each step. Can be in decimals.
> zoomDelta: 0.5
> \#\#\# This is a string so can be any text. Change it to match your maps measurement scale.
> unit: miles
> scale: 1
> darkMode: false
> \`\`\`
### Bounds Calculator
This is a Google Sheet that can be used to calculate the bounds for you.
[Bounds Calculator](https://docs.google.com/spreadsheets/d/1yun2Dsm2jufREOeFxeurcoiMybYUi-SVFD9DqoSyQw0/edit?usp=sharing)
> [!NOTE]- Bounds Calculator
> \<iframe
> height = 700
> width = 100%
> padding = 0 0
> margins = 0 0
> src="https://docs.google.com/spreadsheets/d/1yun2Dsm2jufREOeFxeurcoiMybYUi-SVFD9DqoSyQw0/edit?usp=sharing">\<\/iframe\>