# Obsidian - Pinnable Maps with Leaflet (2025) ![[images/Obsidian-Pinnable-Maps-with-Leaflet-2025.webp]] [Watch on YouTube](https://www.youtube.com/watch?v=8CTW2DTSLpk) · 49:59 · Josh Plunkett · 2025-02-01 > [!note] Out of date > The video description says a newer, easier map plugin has replaced this workflow: **TTRPG Tools: Maps** (https://youtu.be/rB4MCgl44lU). ## Outline ### 00:00 Intro And Demo - **Obsidian Leaflet** is a plugin by Jeremy Valentine ("javalent"), who has written many of the community's TTRPG plugins. It embeds an image map in a note, lets you drop pins on it, and links each pin to another note. - Demo: his Forgotten Realms / Sword Coast map from his 5e vault. Every town and location pin links to a note. ![[images/Obsidian-Pinnable-Maps-with-Leaflet-2025-t0035.webp]] - **Measuring:** Alt+click a chain of points to get the total travel distance in miles. - **Zoom-gated pins:** when zoomed out you see only regional pins (forests, capitals). Zooming in brings up the detail pins. - **No "Google Maps" zoom:** no cartographer can draw every layer from orbit down to street level. Instead, link a regional-map pin to a note with a city map, then a building map, then a basement map, and click through the layers. ### 03:16 Patreon Vault Users - In the Patreon vault, press Alt+E (template hotkey) and choose **insert map simplified template**. Patrons can skip the setup section. ### 03:54 Installation And Setup - Settings → Community plugins → turn off Restricted mode → Browse → search "Leaflet" (by Jeremy Valentine) → Install → Enable. - The readme is good, but around 95% of users never touch the advanced features (tile servers, GeoJSON). Don't let it scare you. - Enable the **Templates** core plugin, set a templates folder, and assign a hotkey to "Templates: Insert template" (he uses Alt+T). - On obsidianttrpgtutorials.com, go to Plugin Tutorials → TTRPG World Builder plugins → Fantasy Maps → Obsidian Leaflet. The page lists one prerequisite: **Meta Bind** (by Moritz Jung, aka "lemons"). Install it from the "open in Obsidian" link or by searching Community plugins. - Copy the template from the page into a new note in your templates folder (e.g. "Insert Leaflet Template"). It has properties, a **Quick Calculator** and the leaflet code block. The sample map will error until you point it at your own image. ### 09:00 Add A Map To A Note - Make any note (his example is "Skull Island") and insert the template with Alt+T. The template has three parts: the leaflet code block, a Meta Bind calculator, and properties where the calculator stores its values. - Add the map image to the vault (paste it or link it with `[[ ]]`). Put the filename on the `image:` line. That alone already renders a map you can drag. - **`id:` must be unique with no spaces.** Two maps that share an ID share the same pins. - Keep a plain (non-embedded) link to the image in the note. Right-click → open in default app / show in system explorer → Properties → Details shows the pixel width and height. - Enter width and height into the calculator. It works out `lat`/`long` (half the height and width, i.e. the center the target button snaps back to). `bounds: [[0,0],[height,width]]` gives the two corners, height first. ![[images/Obsidian-Pinnable-Maps-with-Leaflet-2025-t1515.webp]] - `height`/`width` set how much screen the embed takes up (px or %). Josh uses a width of about **90–95%** so there's a margin to scroll the note past the map, because the mouse wheel zooms the map whenever the cursor is over it. - Hover the target icon to see the current zoom level. Set **minZoom** (how far out, e.g. −3 so the whole island fits), **maxZoom** (how far in, e.g. 0) and **defaultZoom** (e.g. −3, the reset view). **zoomDelta** is the step per scroll (he likes 0.5). - For dungeon maps, stop here. Measuring doesn't really matter. ### 21:48 Add Measurement Function - Alt+click chains distances (e.g. church → town square). The total can feed his travel-time calculators (slower by donkey, faster by dragon). - You need a scale bar on the map (or make one up). He opens the image in **GIMP** (free and open source), zooms to the scale bar, and uses the Measure tool to count pixels between 0 and 100 (about 1,860 px). ![[images/Obsidian-Pinnable-Maps-with-Leaflet-2025-t2205.webp]] - Enter "pixels in scale" and "units in scale" into the calculator. It outputs `scale` (real units per pixel). Paste that into the code block, then test by measuring the scale bar in Leaflet (99.8: close enough). ### 27:03 Other Settings - `recenter` (re-center when you return to the note) and `darkmode` (he doesn't use it). `unit` is any free-text label ("mi", "miles", even "lemons"). - Once you're done, you can delete the calculator block and its properties. ### 28:29 How To Add Pins - Right-click the map to add a default pin. Right-click the pin → **Edit marker** to set the marker type, the note to open (his test NPC "Fred the 2nd"), a description, and advanced min/max zoom. - Hovering shows the description and a preview of the linked note. ![[images/Obsidian-Pinnable-Maps-with-Leaflet-2025-t2945.webp]] - Plugin settings: set the default marker tooltip behavior to **hover**. Page-preview hover is controlled by the **Page preview** core plugin, where you can untick "require Ctrl" for Leaflet. - Change the default marker color and icon, or add custom marker types (shark → swimmer → hippo). You can toggle the "layer icon" pin outline, set the color, set min/max zoom and attach a tag. - **Avoid uploading custom images as icons.** They scale badly. Use the built-in **Font Awesome Free** icon names from the readme and fontawesome.com. ### 35:47 Define Pin Zoom Levels - Give a marker type a min/max zoom (e.g. a black skull visible only between zoom 0 and 1). Outside that range it's hidden. That's how the zoomed-in detail layers in the intro work. It takes some planning, and the levels are hard-coded per marker type. ### 37:58 Other Features - Right-click a pin → **Convert to code block** writes the marker into the note source (sometimes on the wrong line). After that you can't edit it from the map, so he usually keeps pins stored in the plugin. - Drawing tools add shapes (they can't link to notes, and you remove them with the delete tool). There are also show-all-markers, full-screen, zoom buttons, a measurement readout, a marker-type filter, and a **lock** that stops pins being dragged. ### 40:52 Multi-Layer Maps - Add a second image to the `image:` line to get layer 1 and layer 2 switches. Pins belong to their layer. Layers share the same bounds, so this works best for same-size stacked maps such as multi-level dungeons (e.g. *World's Largest Dungeon*). ### 42:52 How To Use Maps At The Table - In his Pathfinder 2e vault (*Outlaws of Alkenstar*, Chapter 1 "Reach for the Sky", the Wailing Scrapyard), he keeps a separate map note, drags it into its own tab and **pins** the tab. Clicking a map pin (B1, B2, B3…) then opens that encounter in the main pane, so the map works as a navigation panel. ![[images/Obsidian-Pinnable-Maps-with-Leaflet-2025-t4400.webp]] ### 45:46 Is Leaflet a Virtual Table Top? - **No.** It's a GM navigation tool. It has no tokens, combat, line of sight or fog of war. You *can* pop the map into a separate window on a player screen, but he doesn't recommend it. He uses **Foundry VTT** (one-off purchase) at his table. ### 47:58 Outro - Josh recommends the Obsidian TTRPG Community / official Obsidian Discord for help and thanks his patrons. The Patreon starter vault comes with plugins, templates, themes and settings already set up. He calls it a learning shortcut, not a finished product. ## Things mentioned ### Obsidian plugins - **Obsidian Leaflet** (Jeremy Valentine / javalent): free community plugin. Support him: https://www.buymeacoffee.com/valentine195 - **Meta Bind** (Moritz Jung / "lemons"): free community plugin, powers the map calculator. - **Templates** (core): free, built in. - **Page preview** (core): free, built in. Controls hover previews. - **TTRPG Tools: Maps**: the newer replacement map plugin. https://youtu.be/rB4MCgl44lU ### Tools and websites - **Obsidian**: free. https://obsidian.md/ - Leaflet map template on Obsidian TTRPG Tutorials: free. https://obsidianttrpgtutorials.com/Obsidian+TTRPG+Tutorials/Plugin+Tutorials/Community+Plugins/Banners/Obsidian+Leaflet - **Font Awesome Free** icons: free. https://fontawesome.com - **GIMP**: free, open source. Used for pixel measurement. Paint Shop Pro is mentioned for comparison (paid). - Windows Photos / File Explorer Properties, to read image dimensions. - **Foundry VTT**: paid, one-off purchase. His recommended VTT. - Obsidian TTRPG Community / Obsidian Discord: free. - Josh Plunkett Patreon starter vault: paid. https://www.patreon.com/JPlunkett ### TTRPG systems and products - D&D 5e: Forgotten Realms / Sword Coast map (his 5e vault). - Pathfinder 2e: *Outlaws of Alkenstar* (Paizo, paid). He also mentions *Punks in a Powder Keg*. - *The World's Largest Dungeon* (paid): example use case for multi-layer maps. - His own homebrew maps: "Island of Screams" and "Skull Island". ## Bios - **Josh Plunkett**: Australian GM and YouTuber behind Obsidian TTRPG Tutorials. He runs a Patreon starter vault for running tabletop games in Obsidian. - **Jeremy Valentine (javalent)**: developer of Obsidian Leaflet, Fantasy Statblocks, Initiative Tracker, Dice Roller and other TTRPG-focused Obsidian plugins. - **Moritz Jung ("lemons")**: developer of the Meta Bind plugin, which adds input fields and computed views to notes.