# Obsidian - Working with Regional Maps ![[images/Obsidian-Working-with-Regional-Maps.webp]] [Watch on YouTube](https://www.youtube.com/watch?v=G_Fw5mau-tA) · 34:36 · Josh Plunkett · 2023-03-26 > Written from the video's English automatic captions (fetched with youtube-transcript-api after yt-dlp's subtitle request hit a 429), with the creator's chapter list as section anchors. The description now points viewers to his newer **TTRPG Tools: Maps** approach as the easier option. ## Outline ### 00:00 Intro - A second maps video, this time on **regional maps**: overland, continent, and world maps that cover a lot of distance. His previous video covered **encounter maps** (dungeons, and maybe towns and cities). - This one is "all about distance". Hold **Alt** and click, then click again (or drag), and Leaflet measures the distance between two points. His example: travelling from one town to a bridge is "approximately 39 miles". - This is how his Dataview-powered notes work out travel time: Leaflet gives the distance in miles, and a bit of calculation converts it to days and hours of travel. ### 01:46 Installation - Settings → **Community plugins** (restricted mode off) → Browse → search **obsidian.leaflet** → Install → Enable. - Another plugin by **Jeremy Valentine**, and "the best map plugin that we've found" for the TTRPG community, at about 49,000 downloads. Read the README before diving in. ### 02:35 Example - A tour of a finished map: zoom in and out, full screen, show everything, re-center, and filter pin types on and off. - Pins appear by zoom level: zoomed out you only see cities and regions, and zooming in reveals towns and areas of interest. "I find that quite useful." - You can also lock the map, layer maps (maybe an Underdark under an above-ground map), and draw shapes. The encounter-maps video covers those in detail. - On a Mac the measure shortcut may differ (possibly Control rather than Alt), so check what's configured on your system. ### 04:00 Configure New Map #### Know your map's scale - Not every map has a scale. His example has a scale bar from 0 to 500, which tells you the unit of measurement. If your map lacks one, add one and decide what it represents: "the tool's not going to work that out for you." - His regional map has a scale bar in miles from 0 to 25. #### Paste the map and insert the template - He pastes the image with **Ctrl+V**. An **attachment folder** (right-click a folder and set it as the attachment folder) keeps pasted images sorted in one place. He renames the file "Map - Regional map of Lampoteuo", a map he made a few years ago for the **ProFantasy Community Atlas**, a project where people make maps that join together. - At this point it's only an image. To make it a Leaflet map he presses **Alt+T** (insert template), types "map", and picks **Insert Regional Map (Leaflet)**. - Templates setup: Settings → Core plugins → **Templates** → template folder location set to his `z_Templates` folder. The template lives in `z_Templates/4_Markdown`. He'll share it on Patreon. ![[images/Obsidian-Working-with-Regional-Maps-t0750.webp]] *His Insert Regional Map (Leaflet) template: a leaflet code block with `###` comment lines explaining each option (id must be unique, lock pins so they can't be moved, noScrollZoom, image, pixel-height and pixel-width bounds formula, height 900px, width 95%, lat/long as half the bounds, min and max zoom, defaultZoom, zoomDelta 0.5, unit miles, scale 1, darkMode false), then a "Use this to calculate the bounds and then delete" section with an iframe.* - The `###` lines are comments, not code. He wrote them while learning Leaflet so he "only had to remember how to do this stuff once." - Under the code block is an **iframe** embedding a Google Sheet he uses to calculate the bounds. It's temporary: use it, then delete it. #### Image and id - Copy the pasted image's file name (with `.png`) into the `image:` line, replacing the placeholder. - Change the `id` to something unique, here `map_lampoteuo`. Pins are saved against this id in `.obsidian/plugins/obsidian-leaflet-plugin/data.json`. Every pin you add with a right-click is stored there, so "do not ever delete it." #### Basic options - `lock: true` means pins can't be dragged around. `recenter: true` is a basic default. - `noScrollZoom: true` disables mouse-wheel zoom, though the buttons still work. With it set to false, scrolling down the note stops at the map and starts zooming, which is why he keeps it true. - **Height and width**: he tries 100 for both, then settles on 700 high and 90 to 95% wide. Not going to 100% leaves a margin you can scroll past the map in. The embedded iframe captures the scroll the same way. #### Calculating the bounds - The **bounds** are "super important". They aren't difficult but take some fiddling the first time, hence his calculator. - Get the image's pixel size: Show in system explorer → Open with **GIMP** ("a free Paint Shop Pro alternative") → Image → **Canvas Size**. ![[images/Obsidian-Working-with-Regional-Maps-t1525.webp]] *GIMP's Set Image Canvas Size dialog for "Map - Regional map of Lampoteuo.png": width 2048 and height 1642 pixels at 300 ppi, with the map open behind it.* - Measure the scale bar: with GIMP's **Measure** tool, click and drag from 0 to 25 on the scale bar and read the pixel count in the status bar. Here it's **268 px**. - Enter width, height, measure, and units into the calculator. ![[images/Obsidian-Working-with-Regional-Maps-t1720.webp]] *His Google Sheet "Obsidian Leaflet Bounds Calc": "Open your map in an image tool (GIMP) and find the pixel width", width 2048 px and height 1642 px, bounds 191.04 and 153.17, centre spot 95.52 and 76.59, and the distance between measurement units (measure 268 px, units 25).* - In the code block, the confusing part is that width comes last. The bounds become `[[0,0], [191.04, 153.17]]`, and you can ignore the zeros on the left. #### Zoom, starting point, units - Rendered, the map is tiny at first. Leaflet's defaults are min zoom 0 and max zoom 18, which is as high as it goes. Hovering the reset-zoom icon shows your current zoom level. - "Always do your max zoom first." He zooms in until it's close enough (3.5) and sets `maxZoom: 3.5`, then zooms out until it fills most of the screen (2) and sets `minZoom: 2`. The default zoom falls back to the minimum anyway, but he sets it to 2. - He keeps the range tight: "I don't want to spend hours clicking in and clicking out on my maps." - `lat` and `long` set where the map starts, here the sheet's centre spot. On a big map you could start in the corner where the party is. - `zoomDelta: 0.5` makes each button click a half step, so you get a few more clicks. - `unit` is just a text label that should match your map's scale. As a joke he changes it to **snails**, and the measure tool reports distances in snails. Then it goes back to miles. `scale` stays at 1. ![[images/Obsidian-Working-with-Regional-Maps-t2305.webp]] *The finished Lampoteuo regional map with the unit temporarily set to snails: an Alt-click measure line from Lampoteuo City reads "34.7 snails", with coordinates [85.1758, 127.7648], among places such as Creepers Cave, Hunter's Hut, The Screaming Tree, and Lampoteuo Quarry.* - The check: Alt-click across the 0 to 25 scale bar and you should get "pretty damn close to 25 miles". Not exact, since it's based on pixels, but he doesn't waste time chasing perfection. #### How the calculator works - Width and height in pixels come from Image → Canvas Size (switch the unit to px if needed). Measure is the scale bar's length in pixels, and Units is the number on the scale. - Pixels per unit = 268 ÷ 25 = **10.72**. Each bound is the image dimension divided by that: 2048 ÷ 10.72 = 191.04 and 1642 ÷ 10.72 = 153.17. The centre spot is each bound divided by 2. - Once the map is configured, delete the calculator section and the original pasted image from the note. You now have a working regional map: right-click to add pins and link them to notes. #### Pins that appear at zoom levels - His pattern: capitals and regional pins when zoomed out, then towns, encounter areas, and points of interest as you zoom into the area the party is playing in. - Settings → Community plugins → Obsidian Leaflet → options → **Additional map markers** → **+**: give the marker a name, an icon, and optionally min and max zoom. ![[images/Obsidian-Working-with-Regional-Maps-t2835.webp]] *Obsidian Leaflet's new-marker dialog: Marker Name, Icon Name (a Font Awesome name such as map-marker), Use Image for Icon, Layer Icon and Marker Color pickers, Min Zoom ("only display when zooming in below this zoom"), Max Zoom, and Associate Tags.* - He creates a **car** marker with a red layer icon and leaves the zoom fields empty at first. After saving, leave the map note and reopen it. Otherwise a newly added car pin doesn't show, which seems to be a bug. - He drags the car to The Screaming Tree. Right-click → edit marker lets you link it to a note or add a description that shows on hover. - To hide it until zoomed in, he notes the level he wants (3), sets the car marker's **Min Zoom** to 3 in settings, and reopens the map. The car is gone at 2 and 2.5 and appears at 3. - His warning: setting a marker's zoom once works, but going back to edit it, or setting both min and max, caused him a lot of grief. He's raised it with the plugin's developer (javalent on GitHub). The easiest fix is to delete the marker type and recreate it. ### 33:31 Outro - The two big takeaways for regional maps: **bounds**, which make measurement work, and pins that show at **different zoom levels**. Pins can also link to notes. - His Patreon Discord is now open to the public, with a private channel kept for patrons. It was "too good a resource" to keep behind a paywall. Links are in the description. ## Things mentioned ### Obsidian plugins and features - **Obsidian Leaflet** (community plugin by Jeremy Valentine, about 49k downloads at the time): Alt-click measurement, bounds, min/max/default zoom, zoomDelta, lat/long start point, unit and scale, lock, recenter, noScrollZoom, layered maps, drawing shapes, filters, and additional map markers with min/max zoom and associated tags - Leaflet's pin storage file: `.obsidian/plugins/obsidian-leaflet-plugin/data.json` - **Templates** core plugin (Alt+T insert template, templates folder `z_Templates`) - Attachment folder setting for pasted images - **iframe** embeds of live web pages in notes - **Dataview** (his travel-time calculations from map distances) - **TTRPG Tools: Maps** (the newer, easier option his description now recommends) ### Tools and resources - **GIMP** (free image editor: Image → Canvas Size and the Measure tool) - **Google Sheets**: his "Obsidian Leaflet Bounds Calc" spreadsheet - **Font Awesome** icon names for markers - **ProFantasy Community Atlas** (collaborative map project his Lampoteuo map was made for) ### Maps and places shown - A Faerûn / Sword Coast world map with a 0 to 500 mile scale bar ("to Chult" arrow), with `Faerun_Map` as the template's example id - His regional map of **Lampoteuo** (0 to 25 mile scale): Lampoteuo City, Lampoteuo Quarry, Creepers Cave, Hunter's Hut, The Screaming Tree, Stacia's Spike, The Stone That Stands, The Mounds, Zulds Roz, Hallas Hut, Hopes Lost, Camp Ceyx, Rolling Thunder, The Wound ### Links - [TTRPG Tools: Maps tutorial](https://obsidianttrpgtutorials.com/Obsidian+TTRPG+Tutorials/Plugin+Tutorials/Community+Plugins/Banners/TTRPG+Tools+-+Maps) - [Regional map template on Patreon](https://www.patreon.com/posts/80562578) - [Obsidian](https://obsidian.md/) - [Official Obsidian Discord](https://discord.gg/obsidianmd) - [Obsidian TTRPG Users Facebook group](https://www.facebook.com/groups/obsidianttrpgusers) - [Josh's Patreon](https://www.patreon.com/JPlunkett) ### Free vs paid (quick) - Free: Obsidian, Obsidian Leaflet, GIMP, Google Sheets, the now-public Discord - Paid: Josh's Patreon (the template post, tutorial files, private patron channel, training vault) ## Bios - **Josh Plunkett**: Australian GM and educator behind Obsidian TTRPG Tutorials (YouTube, Patreon, Discord). Here he documents his own commented Leaflet template and bounds calculator so regional maps can measure travel distances. - **Jeremy Valentine**: Developer (javalent on GitHub) of Obsidian Leaflet, along with Fantasy Statblocks, Fantasy Calendar, and other TTRPG plugins. Josh reported the marker zoom bug to him.