Leaflet bases

This plugin for Obsidian adds a new bases view: 'Leaflet Map' and a new type of property: 'marker'

Please report any issues you encounter here.

Leaflet bases was developed for three reasons:

• To leverage the versatility of Obsidian bases
• Marker data is part of the note it belongs to, not of the map it is shown on
• To have your maps be available in your online garden using Quartz, there is a separate Quartz plugin for that.

For use with Quartz you'll need the appropiate Quartz plugin. Quartz v5 supports bases but is still in open beta, there is also a Quartz plugin version that supports Quartz v4.

Installation

This plugin currently requires Obsidian v1.11.4 or later to work.

Install via BRAT

1. Install the BRAT plugin under Community Plugins.
2. Open BRAT settings and click "Add beta plugin".
3. Enter the URL of this repository: https://github.com/Requiae/obsidian-leaflet-bases-plugin.
4. Under "Select a version", choose the Latest version.
5. Click "Add plugin".

Install via Community Plugins

You can find the plugin here.

Usage

You can find an example vault here.

Adding a map

Using configurations

1. First you need a base and add a 'Leaflet Map' view.
2. Change the settings as you wish.

Using a code block

You can also embed the base:

```base
views:
  - type: leaflet-map
    name: Map
    mapName: test
    image: assets/Locke.png
    height: 400
    minZoom: -1.5
    maxZoom: 2
    defaultZoom: -1.5
    zoomDelta: 0.25
    scale: "0.2"
    unit: km
```

Technically only 'type', 'name', and 'image' are required for the map view to work. However you'll likely end up using most of the other settings.

Instead of setting mapName in the base, you can also use a bases filter;

views:
  - type: leaflet-map
    name: Map
    image: assets/Locke.png
    filters:
      and:
        - '!marker.filter(value.mapName == "MAP_NAME").isEmpty()'

Adding a marker

Using UI

1. Add a new marker property to the note you want to have a marker.
2. Add a marker using the '+' button that appeared. Fill in the form in the modal and click 'Create marker'.
3. You can add more markers using the '+' button, add markers by clicking the tags, or remove them using the 'x' buttons.

Using source code frontmatter

Ensure that the frontmatter block is the first thing in your note.

---
marker:
  - coordinates: 100, 300
    icon: lucide-tree-pine
    colour: "#039c4b"
    minZoom: 1
  - coordinates: 5, 5
    mapName: mapName
    colour: "#bdf123"
---

Keep in mind that markers are arrays, many code editors automatically add an - when you start a new line. Ensure you only have the dashes where a new marker entry starts.

Technically only 'coordinates' is required for the marker to be valid. However you'll likely end up using most of the other settings.

Coordinates can easily be obtained using the 'copy' (📌) tool in the map. Clicking a spot on the map automatically copies the coordinates to your clipboard.

Adding icons to Obsidian

Any icons added to Obsidian using another plugin should work just fine as long as their icons stick to Obsidian's design limitations. However, these icons likely won't work with Quartz.

1. Go to the Iconify website and find the iconset you want.
2. Select any icon and find the set prefix. In the image this is game-icons
3. Now go to the Iconify Github and find the json file that corresponds to your chosen set. Open it.
4. Download the raw file
5. Open Obsidian. The open your vault settings. Under community plugins, go to Leaflet bases
6. Under Additional icon sets, find the option to add iconsets and click the button. It will open a prompt where you can select the file you just downloaded. Press open and the iconset has been added!

Alternatives

Leaflet (link)

The OG for Obsidian fantasy maps has to be mentioned. It is no longer under active development and has been in maintenance mode for years.

Zoom map (link)

This plugin is awesome, comprehensive, and feature rich. If you do not wish to use Obsidian bases, your markers to be saved in your notes, nor to host your garden using Quartz then I highly recommend you to take a look at this plugin!

Map view (link)

My inspiration and my frustration, for it does not allow images to be used for your maps, and the workarounds are difficult, not accessible, and tend to break GitHub ToS.