This Map tool lets you embed an image as an interactive, zoomable map inside Obsidian and place markers, stickers, drawings, measurements, HUD pins and (optionally) editable text layers on top.

Joshua Plunkett (obsidianttrpgtutorials.com) made a video about it. Due to ongoing development, I recommend checking the README also.

• Pan/zoom image (mouse wheel, double click, drag)
• Mobile gestures: pinch zoom, two-finger pan
• Optional pan clamping to image bounds (toggle in map context menu)
• Multiple maps per note (multiple zoommap code blocks)

• Add markers (Shift + click or context menu)
• Drag markers to move them
• Edit markers in a modal (icon, link, tooltip, zoom range, etc.)
• Delete markers via context menu
• Marker layers: visibility + lock toggles
• Optional: bind a marker layer to a specific base image

• Configurable icon library (data URLs or vault images)
• Per-map pin size overrides (“Pin sizes for this map…”)
• Stickers (image decals) with per-sticker size
• Swap pins: right click cycles through frames (icons/link per frame)
• Access under collections

• Markers with a link show the native Obsidian hover popover
• Markers without a link can show an internal tooltip (stable, rendered inside the map)

• Multiple base images (switchable via context menu)
• Image overlays (toggleable via context menu)
• Overlay lazy loading for performance

• Measure distances by clicking points (multi-segment)
• Calibrate scale per base image
• Units: auto metric/imperial, m/km/mi/ft, and custom units
• Optional travel time presets (distance → time conversions)

• Draw layers (visibility/lock)
• Draw shapes: rectangle, circle, polygon
• Pattern fills are stored as SVG files for reliability across restarts

• Box-based text layers with drawn baselines
• Inline typing directly on the map (one input per baseline)
• Auto-flow between baselines (push overflow forward, pull words back)
• Optional angled baselines (Ctrl while drawing baseline)
• Lock text layers to prevent edits

• DOM (default)
• Canvas render mode for weaker devices (tablets/mobile)
• Prefer Canvas for larger SVG maps it stutters in DOM mode

• Default: JSON marker file beside the image: <image>.markers.json
• Optional inline storage inside the note (storage: note)
• Writes are throttled and only saved when content actually changed

• You can export your SVG maps to WebP in 2k, 4k, 8k and 12k.
• When you export to 12k it takes about 20-30 seconds on high end systems so be patient.

• Create folder: /.obsidian/plugins/zoom-map
• Copy build output into that folder: manifest.json, main.js, styles.css
• Reload Obsidian → Settings → Community plugins → enable Zoom Map

Simple Mode

• Use the command "Zoom Map: Insert new map...". You have to be in edit mode to insert a new map this way.
• A modal opens and you can set up your image layers, overlay layers and so on.
• On a map right click→Options→Edit view... brings you back to this setup.

Pro Mode (no benefits included) Add a code block:

```zoommap
image: Assets/Map.jpg
# markers is optional; defaults to <image>.markers.json
# markers: Assets/Map.jpg.markers.json

# Map view limits
minZoom: 0.3
maxZoom: 8

# Size & interactivity
height: 560px
width: 100%
resizable: true
resizeHandle: native     # left | right | both | native
render: canvas           # or: dom

# Responsive display (fit into width, no wheel/pinch/dblclick pan/zoom)
responsive: false        # true → always fit; disables pan/zoom gestures

# Storage (optional)
# storage: note          # default is json; use "note" to store markers inline
# id: map-1              # optional stable id for inline storage (per code block)

# Alignment / wrapping (optional)
align: right             # left | center | right
wrap: true               # wrap text; useful with left/right alignment
```

• Shift + click on the map
  or
• Right click the map → “Add marker here”

• Right click a marker → edit/delete

• image: string
  Path to the base image (vault path or link target)

• width: 200px
• height: 200px
• minZoom: number | 150%
• maxZoom: number | 300%
• render: dom | canvas
• resizable: true
• resizeHandle: native | left | right | both
• responsive: true #If true: map fits to width; zoom/pan gestures are disabled
• wrap: true
• align: left|center|right
• storage: json | note
• id: string #(recommended if storage: note)

imageBases:

• path: Assets/BaseA.png name: Base A
• path: Assets/BaseB.png name: Base B

imageOverlays:

• path: Assets/overlay-roads.png name: Roads visible: true
• path: Assets/overlay-labels.png name: Labels visible: false

• scale: metersPerPixel: 0.25 or:
• scale: pixelsPerMeter: 4

You can render a transparent frame image above the map (e.g. RPG UI frames). The map viewport is defined by 4-sided insets, which scale with the frame.

• viewportFrame: Assets/frame.png
• viewportFrameInsets: unit: framePx # framePx | percent top: 140 right: 110 bottom: 170 left: 110

• framePx is recommended:
  • values are measured in the frame image’s original pixel space
  • they automatically scale correctly when resizing

• Enable drawing tools
• Enable text layers
• Pins: “scale like sticker” by default
• Prefer first visible unlocked marker layer for new markers

• Add/edit icons (key, path/data URL, size, anchor X/Y, rotation)
• SVG icon picker (SVG Folder)
• Use your own or download Font Awesome or rpg awesome SVG's library.
• Unzip the SVG library from Font or RPG Awesome
• If you don't find your SVG's maybe then the folder path is too long.
• Optional SVG outline tool (adds a stroke layer inside SVG)

Collections define which pins/favorites/stickers/swap pins appear in the map context menu, depending on the active base image.

• Line color + width
• Custom units
• Travel time presets

Marker files are stored as <image>.markers.json and include:

• bases, overlays, activeBase
• layers, markers
• measurement (scale per base)
• pinSizeOverrides
• drawLayers, drawings
• textLayers

npm install
npm run dev    # watch build
npm run build  # production build

MIT