# Obsidian - Working with Encounter Maps ![[images/Obsidian-Working-with-Encounter-Maps.webp]] [Watch on YouTube](https://www.youtube.com/watch?v=pTJGWO25le0) · 28:12 · Josh Plunkett · 2023-03-11 > Written from the video's English automatic captions (fetched with yt-dlp's android client after the default client'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 Introduction to maps - A new look at maps that "brings it all together", split into two videos: this one on **encounter maps** (dungeons, floorplans, villages) and a follow-up on **regional maps**. - The reason for the split: regional maps need a level of complexity (bounds, scale, distance measurement) that a dungeon or encounter map doesn't. - Out of the box Obsidian can't put pins on a map, so you need a plugin: **Obsidian Leaflet**. It's probably not the only map plugin, but it's the one built for fantasy maps. - It's by **Jeremy Valentine** (javalent). Support lives on the official **Obsidian Members Discord**: under the tabletop-games channel, open the threads and you'll find the **javalent plugin support** thread. "It is a very active sort of little community in there" and the best place to ask for help with any of his plugins. ### 01:54 Installing Obsidian Leaflet - Settings → **Community plugins** → Browse → search "obsidian leaflet" → pick the one by Jeremy Valentine (last updated nine days earlier: "updated very healthily") → Install → Enable. - He suggests copying the example code block from the plugin page to your clipboard as a starting point. His own templates are on Patreon (linked in the description). - He briefly shows the regional map he's in the middle of building, then switches to today's example: his own map of **Zelkor's Ferry**, a village from **Rappan Athuk**, the megadungeon module by **Frog God Games** (5th edition and other editions). - In edit mode the note just has the image embedded (`![[Map_Josh_Town.png|600]]`, with `|600` resizing it for the video). The `!` makes it preview, but it's still only a picture: you can't click it or add anything to it. ### 03:53 Creating map templates - His message for people scared off by "too much code": he doesn't type any of it. While prepping a session or module he presses **Alt+T**, types "map", and gets two templates tagged "(Leaflet)": **Insert Map (Leaflet)** and **Insert Dungeon Map (Leaflet)**. He picks the dungeon one and just edits what it drops in. ![[images/Obsidian-Working-with-Encounter-Maps-t0540.webp]] *His Insert Dungeon Map (Leaflet) template inserted under the plain image embed: a `leaflet` code block with `###` comment lines (a tutorial link, "id must be unique", "This sets where the map starts by default. Set it to the middle (half) of your bounds", "0 is no zoom…", "Max zoom is 18", "Hover mouse over the Reset Zoom icon to see your current zoom level", "How far it zooms in or out with each step. Can be in decimals", "This is a string so can be any text"), with id: update-me, height 1000px, width 70%, lat/long 50, minZoom 0, maxZoom 18, defaultZoom 15, zoomDelta 0.5, unit feet, scale 1, darkMode false.* - **Templates** is a core plugin. Turn it on and set a templates folder. **Templater** is a similar, more powerful community alternative if you prefer it. - His templates live in `z_Templates`, with markdown templates in a subfolder alongside dungeon-map and other map templates. A template is just text: triggering it pastes that text into your current note. He runs Alt+T → map → Enter again to show it. ### 05:54 Configuring encounter maps - An encounter map is "a lot easier" than a large regional one. - **Image**: he has already pasted the map into the note, so Obsidian copied it into `z_Assets`, the folder he right-clicked and set as the **attachment folder**, so every pasted picture lands there. He copies the file name into the `image:` line. It goes inside double square brackets, with no `!` in front. - **id** (the template says `update-me`) must be unique. When you save pins, the plugin writes them to a JSON file: `.obsidian/plugins/obsidian-leaflet-plugin/data.json`. He opens it in Explorer to show every pin stored with its latitude, longitude, and map id. Two maps with the same id end up sharing pins, "and that's not a good thing." - **Width**: he prefers about 85 to 90%, never 100. At 100% the map fills the whole note and there's nowhere to scroll, because as soon as your mouse is over the map, the plugin takes over the scroll wheel. A margin on the right lets you keep scrolling the page. - **Height**: dropping 1000 to 500 just flattens the map's area. Tune it to fill the screen or a comfortable part of it. ### 09:03 Advanced map settings - **Zoom levels** "can be a little bit finicky." Set the **max zoom first**, because everything else seems to weight itself off the maximum. Change max after the others and your default and min zoom "seem to be out of whack." - He sets `maxZoom: 16` (the ceiling is 18) by zooming in until the map is close but not absurdly big. - Then **default zoom**: get the map to the size you want to open at and hover the reset-zoom (target) button, which shows the current zoom level. Here that's 13.5, so `defaultZoom: 13.5`. - **Min zoom**: he doesn't need to zoom out further on this map. Defaults are min 0 and max 18, and the default zoom must sit between them. - **zoomDelta** sets how much each zoom step changes. He tries 1 to show the difference and prefers **0.5**. - **Scale and unit** (1, feet) aren't really needed on an encounter map: the map already has a grid and a key ("1 square = 10 feet"), "and that's good enough for me." - **lat/long** set the starting position. He tries a modifier-click (he thinks Ctrl/Shift-click) to grab coordinates and paste them in, but it doesn't center properly, so he goes back to **50 / 50**, which puts the map in the middle and is his usual default. On a big regional map he constantly moves the start point to wherever the campaign currently is. - Recap of the code: unique id; image file name in brackets; height; width around 85%; lat/long start; min zoom (0), max zoom (18), and default zoom between them; zoom delta; scale and unit. He also shows **darkMode: true**, which he doesn't use but which might suit some maps. ### 13:57 Using map layers - A tour of the map controls: zoom in and out, full screen, click-drag to pan, mouse-wheel zoom, **show all markers**, **reset view**, and the bottom-left feet readout where **Alt-click** measures distance. Measuring isn't configured here because "you don't really need it on this map, let's be honest." - **Filter** (top right) toggles pin types on and off. He'd already added pins and comes back to how later. - **Layers** stay hidden until you use them. In the code, under `image:`, press Enter and list each map on its own line as `- [[map.png]]`. - Indentation must be **spaces, never Tab**, and every line has to line up the same way. One line with a space and one without breaks it. His theme shows a thin grey line where a tab was used. ![[images/Obsidian-Working-with-Encounter-Maps-t1650.webp]] *Zelkor's Ferry ("1 square – 10 feet") as a two-layer Leaflet map: a Layer 1 / Layer 2 selector at the top right above the filter and lock buttons, red default pins on the village buildings and gate, and the zoom, full-screen, show-markers, and reset controls on the left.* - Each layer keeps its own pins. He drops a pin on a table on one layer, edits it to say "Bob sits here", and Bob doesn't show on the other layer. Good for multi-level dungeons kept in one place in your notes. - **Lock** stops pins being dragged. You can also start the map locked from code: the plugin README (Settings → Obsidian Leaflet) lists every option, including `lock`, "control whether the map will start locked or unlocked." ### 17:14 Adding custom pins - Add a pin by right-clicking the map. New users only get the default marker type, so build more under Settings → Community plugins → Obsidian Leaflet → options. - The **default marker** has a colour and an icon name taken from **Font Awesome**. Google its icon list to browse. - **Additional map markers → +**: he deletes and rebuilds his "dungeon" marker. He searches icon names (zombie, then finds a dungeon icon), turns off the layer icon so the dungeon icon stands alone, and makes it black "because they're dark and scary." ![[images/Obsidian-Working-with-Encounter-Maps-t1940.webp]] *Obsidian Leaflet's new-marker dialog: Marker Name, Icon Name ("Font Awesome icon name (e.g. map-marker)"), Use Image for Icon (upload), Layer Icon, Marker Color, Min Zoom ("Only display when zooming in below this zoom"), Max Zoom ("Only display when zooming out above this zoom"), and Associate Tags.* - **Min/Max zoom** control when a marker type is visible, which is very handy on big regional maps for showing different tiers of icons. Not needed here. - **Associate Tags** exist, but he doesn't find tags that useful. - "Probably helps if you click the save button." His first try didn't save. After saving, right-click offers a **Dungeon** option, and he drops one by the cove. ### 20:28 Linking notes to pins - Right-click → **Edit marker** → **Description** ("this is the scary dungeon") shows on hover. - For note previews on hover, turn on **Display note preview** in the Leaflet settings. - Edit marker → **Note to Open**: start typing a note name (here *Working with PDFs*) and the pin links to it. ![[images/Obsidian-Working-with-Encounter-Maps-t2230.webp]] *The Edit Marker dialog over Zelkor's Ferry: Marker Type "Default", Note to Open autocompleting "Working with PDFs" with its vault path, and the hint "Type # to link heading, Type ^ to link blocks. Note: Blocks must have been created already."* - Typing **#** after the note name searches its headings, so a pin can open one section. He links to the "PDF Catalogue" heading, and the hover preview shows just that part (his Dataview PDF catalogue). **^** links to blocks the same way, but he doesn't label blocks in his notes. - This matters for people coming from **Realm Works**, where each part of a module had to be its own note because pins could only link to whole notes. Obsidian can link pin to note and pin to a subsection of a note. - Pins can still be dragged around or locked in place. - **Recreating the Realm Works layout**: drag the map's tab into a separate pane and **pin** it. Clicking pins then opens notes in the other pane, so the map stays on one side and the information opens on the other. Panes can also go in the left or right sidebar, along the bottom, or be split vertically or horizontally. ### 23:44 Drawing and concluding - The draw toolbar adds **polylines**, for example "this is the path the party took", to keep track of where they've travelled. - **Polygons and rectangles** mark zones, with changeable colours. He draws a red area controlled by the town, maybe for a political-intrigue map. Pins stay clickable on top of the shapes. - The **delete** tool removes shapes by clicking them. Lines are fiddlier because you have to click right on them. ![[images/Obsidian-Working-with-Encounter-Maps-t2615.webp]] *Drawing on the encounter map: a blue polyline for the party's route through the gate and across the village and a red polygon over the town's controlled area, with purple pins still on top and the draw toolbar (polyline, polygon, rectangle, circle, move, delete, done, save) on the right.* - That's the basic Leaflet functionality for **encounter maps**: less setup, no measurement. His next video covers **regional maps** in depth, including measuring distance, which is "really fantastic if you do set it up" but not worth the extra step on a map this size. Throw your dungeon maps together and get the benefit without wasting time on settings you won't use. - Outro: like and subscribe, and consider Patreon ("the cost of a coffee a month"). He thanks patrons: "you've changed my life this year." ## Things mentioned ### Obsidian plugins and features - **Obsidian Leaflet** (community plugin by Jeremy Valentine / javalent): image maps with id, image, height/width, lat/long, minZoom/maxZoom/defaultZoom, zoomDelta, unit/scale, darkMode, and lock. Also map **layers** (an image list), filter, show all markers, reset view, Alt-click measure, custom marker types (Font Awesome icons, layer icon, colour, min/max zoom, tags), marker descriptions, note links, and drawing (polylines, polygons, rectangles, delete). - Leaflet's pin storage file: `.obsidian/plugins/obsidian-leaflet-plugin/data.json` (pins keyed by map id) - Leaflet setting **Display note preview** (hover previews for linked pins) - **Templates** core plugin (Alt+T, a `z_Templates` folder) and **Templater** (a more powerful community alternative) - **Attachment folder** for pasted images (`z_Assets`) - Heading links (`#`) and block links (`^`) from pins - Workspace **panes**: dragging tabs out, pinning a pane, and sidebar or split layouts - **Dataview** (his PDF catalogue note used as the link target) - **TTRPG Tools: Maps** (the newer, easier option his description now recommends) ### Tools and resources - **Font Awesome** icon names for markers - **Realm Works** (the older campaign manager whose map-plus-notes layout he recreates) - Obsidian Members Discord: the tabletop games channel and the **javalent plugin support** thread ### Maps and adventures shown - **Zelkor's Ferry** (his own map of the village from **Rappan Athuk** by Frog God Games): 1 square = 10 feet, with the river, current, gate, ferry dock, and Bristleback's Inn - His in-progress regional map (covered in the follow-up video) ### Links - [TTRPG Tools: Maps tutorial](https://obsidianttrpgtutorials.com/Obsidian+TTRPG+Tutorials/Plugin+Tutorials/Community+Plugins/Banners/TTRPG+Tools+-+Maps) - [Encounter map template on Patreon](https://www.patreon.com/posts/79946164) - [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) - Follow-up: [[Obsidian - Working with Regional Maps]] ### Free vs paid (quick) - Free: Obsidian, Obsidian Leaflet, Templates/Templater, Font Awesome icons, the Obsidian Discord - Paid: Josh's Patreon (template post, tutorial files, private Discord, training vault); Rappan Athuk (a commercial Frog God Games module); Realm Works (commercial software) ## Bios - **Josh Plunkett**: Australian GM and educator behind Obsidian TTRPG Tutorials (YouTube, Patreon, Discord). Here he opens a two-part maps series by showing the minimal Leaflet setup an encounter map needs, built around his own commented templates. - **Jeremy Valentine**: Developer (javalent on GitHub) of Obsidian Leaflet, along with Fantasy Statblocks, Initiative Tracker, Fantasy Calendar, and other TTRPG plugins. He supports them through a dedicated thread on the Obsidian Discord. - **Frog God Games**: Publisher of the megadungeon **Rappan Athuk** (for 5th edition and other systems), where the village of Zelkor's Ferry on Josh's map comes from.