# Obsidian - Excalidraw - Publish a Pinned Map ![[images/Obsidian-Excalidraw-Publish-a-Pinned-Map.webp]] [Watch on YouTube](https://www.youtube.com/watch?v=MpDk-XOpdmY) · 33:41 · Josh Plunkett · 2024-03-23 ## Outline ### 00:00 Intro - Follow-up to the previous video, where he built a fantasy map in Excalidraw. This time he adds pins linked to notes and publishes the map. - Most people use **Obsidian Leaflet** (by Javalent) for pinnable maps, but Obsidian Publish doesn't support plugins, so those maps can't be published. - Some plugins have workarounds: Dataview queries publish as plain text, but Templater plus Dataview can convert a query into Markdown that does publish. - **01:30** Excalidraw has a similar trick: save the drawing as an SVG and embed that in a note. On the published page you can zoom in and click pins to jump to notes (pins don't show hover previews). - Useful for world builders and GMs with homebrew settings, for example a hexcrawl map with a pin for each hex. ![[images/Obsidian-Excalidraw-Publish-a-Pinned-Map-t0140.webp]] - **02:30** Obsidian Publish is a paid service at $8 a month. His whole tutorial site runs on it. ### 03:07 Subscribe to Obsidian Publish - Sign up for the subscription. He knows of free alternatives but none that publish Leaflet or Excalidraw maps this way; for him $8 a month is worth the ease. - **03:45** Enable the Publish core plugin, then use the publish-changes button to pick new, changed or unchanged notes, use "add linked" to include linked files, and click Publish. ### 04:54 Custom Domain - Read the official help pages, starting with the introduction to Obsidian Publish. Publish allows custom CSS but not plugins. - **05:30** This method needs a custom **publish.js**, which only works when the site uses a custom domain. - He doesn't walk through the setup because it's technical and may change. Follow the official custom domain guide step by step, which involves signing up for **Cloudflare** and configuring your domain. He buys his domain names annually. - **06:50** If you get stuck, go to Obsidian or Cloudflare support; he can't generally help with this part. It is a mandatory step. ### 07:14 Watch the YouTube Tutorial - Search YouTube for the Excalidraw publish video by **Zsolt** (zsviczian), the Excalidraw developer: "interactive visual websites with Obsidian Publish and the Excalidraw plugin", about 19 minutes. - He jokes that you can't update your plugins without getting an Excalidraw update. - **08:20** Zsolt's Excalidraw publish site has the steps. Note that it doesn't work in Safari because Apple doesn't support the required browser features. ### 08:47 Add publish.css to Vault Root - Steps: subscribe, register a domain, configure Obsidian and Cloudflare, then add publish.css and publish.js to the vault root. These files can't be edited inside Obsidian without a plugin, so use an external text editor. ![[images/Obsidian-Excalidraw-Publish-a-Pinned-Map-t0920.webp]] - **10:00** In Windows File Explorer he creates a new text file in the vault root, renames it to publish.css (accepting the extension change), opens it in Notepad++, and pastes the CSS from Zsolt's page. ### 11:30 Add publish.js to Vault Root - Same again for publish.js, with the JavaScript from the same page. - **12:00** Publish both files to the site. publish.js only works on a custom domain. ### 13:20 Configure Excalidraw - Checklist so far: vault, Publish subscription, Cloudflare and custom domain, publish.css and publish.js. - **13:50** Install and enable the Excalidraw community plugin, then open the setup instructions on Zsolt's site. - **15:00** In the Excalidraw settings, under embedding and exporting, set the image type in Markdown preview to **Native SVG**. ![[images/Obsidian-Excalidraw-Publish-a-Pinned-Map-t1510.webp]] - **15:30** In auto-export settings, turn on keeping SVG/PNG filenames in sync with the drawing, and enable auto-export SVG. - **15:50** The plugin itself isn't published. The exported SVG is what goes on the site. - **16:20** Optionally set the file type inserted into documents to SVG; he also has embed drawing using wikilink enabled. ### 16:46 Export Your Map - He created the map in one Excalidraw drawing made of many small objects, then exported it as a PNG with the scale turned up for detail. - **17:50** He opened the PNG in another drawing and used a rectangle with crop to selection to trim the background, then saved the cleaned image into the vault. ### 18:58 Add Pins To Your Map - He creates a new Excalidraw drawing, adds the cleaned map image, and right-clicks to **lock** it in the background. - **19:30** For pins he uses emojis from the Windows emoji picker (Windows key plus period), choosing symbols that stand out, and resizes them. Small hut emojis could even be used to build a map on a blank hex background. - **20:40** Right-click an emoji and choose insert link to file to link it to a note (for example a tower, or the City of Screaming Nightmares). Edit links by clicking the element; you have to type the note name because it doesn't autocomplete. ![[images/Obsidian-Excalidraw-Publish-a-Pinned-Map-t2050.webp]] ### 22:32 Create the SVG - Saving the drawing auto-exports an SVG next to it. The SVG stores the images plus the link positions. - **23:20** He drags the SVG into the note he will publish, like an image embed (exclamation mark plus a wikilink). - **23:50** Trying to resize it with a 100% size parameter broke the pin positions, because the links are saved by their position on the drawing. Don't resize it. Zooming (Shift plus mouse wheel) and clicking pins work fine. ### 25:07 Publish Your Map - Publish the changes, use add linked, and click Publish. A CSS tweak broke things briefly while recording. - **26:20** The published map shows centered with working pins that open notes such as his fantasy stat blocks page. ![[images/Obsidian-Excalidraw-Publish-a-Pinned-Map-t2630.webp]] - **26:50** You don't need a map made in Excalidraw. Any image works, including dungeon, city or regional maps, because you're just placing a picture in Excalidraw and adding linked elements on top. His three-step process is optional. - **27:30** He only publishes what visitors need: the published note, the SVG, and the linked example notes, not the PNG or intermediate drawings. ### 26:38 Closing Thoughts - He wishes Obsidian Leaflet could do this, with measuring and layers, and still prefers Leaflet for his own pins. For world builders who want a public site, this is a viable option. - **30:00** Publish sites can be password protected, so you could share a private world with players or possibly offer paid access. - **31:00** It's a technical process but well documented. Allow a couple of hours, and use the paid services' support if you get stuck. ### 30:54 Outro - Go to the tutorial website to get started, see his updated plugin list, and join the Discord for support, which works better than YouTube comments because people can share images and screens. - Thanks to his Patreon supporters, and a request for viewers to share large published maps in the comments. ## Things mentioned ### Obsidian plugins and features - **Excalidraw** by Zsolt Viczián: free community plugin for drawing and maps. Key settings are Native SVG preview and auto-export SVG. - **Obsidian Publish**: official paid service, $8 a month; core plugin plus the publish-changes dialog. - **Obsidian Leaflet** by Javalent: free plugin for pinnable maps; can't be published. - **Dataview** and **Templater**: free plugins; Templater can convert Dataview queries to Markdown so they publish. - **publish.css** and **publish.js**: custom files in the vault root; publish.js needs a custom domain. ### Tools and websites - [Obsidian](https://obsidian.md/): free note-taking app. - [Obsidian Publish](https://obsidian.md/publish): paid hosting for vault notes. - [Introduction to Obsidian Publish](https://help.obsidian.md/Obsidian+Publish/Introduction+to+Obsidian+Publish) and [custom domain setup](https://help.obsidian.md/Obsidian+Publish/Set+up+a+custom+domain): official docs. - [Cloudflare](https://www.cloudflare.com/en-gb/): DNS and proxy service needed for the custom domain; domain names are a paid annual cost. - [Zsolt's Excalidraw tutorial video](https://www.youtube.com/watch?v=JC1E-jeiWhI), [How to set up Obsidian Publish](https://excalidraw-obsidian.online/Hobbies/Excalidraw+Blog/How-to/How+to+set+up+Obsidian+Publish), and the [publish files gist](https://gist.github.com/zsviczian/0bb31aa2d08ba689c14158e82cbbda5a). - **Notepad++**: free text editor used to edit the CSS and JS files. - **Windows emoji picker** (Windows key plus period): source for pin icons. - [Obsidian TTRPG Tutorials](https://obsidianttrpgtutorials.com/) and its [Excalidraw page](https://obsidianttrpgtutorials.com/Obsidian+TTRPG+Tutorials/Plugin+Tutorials/Community+Plugins/Excalidraw/Excalidraw): Josh's tutorial site. - [Josh's Patreon](https://www.patreon.com/JPlunkett): paid support, with access to the Foundation Vault. - The Obsidian TTRPG Discord: community support. ### TTRPG uses - Homebrew world maps for world builders and GMs, hexcrawl maps with pins per hex, and dungeon, city and regional maps. - Example pins: a tower and the City of Screaming Nightmares, linked to example notes and a fantasy stat blocks page. - Password-protected Publish sites for sharing a world with players. ## Bios - **Josh Plunkett**: Australian game master and creator of Obsidian TTRPG Tutorials, a YouTube channel and website teaching tabletop players and GMs how to run campaigns in Obsidian. - **Zsolt Viczián** (zsviczian): developer of the Excalidraw plugin for Obsidian, known for frequent updates and his own tutorials, including the publish method used here. - **Javalent**: developer of Obsidian Leaflet and other popular TTRPG plugins for Obsidian.