New Plugin: Obsidian Leaflet - Interactive maps in notes

Share & showcase
,
1

Hello! I recently switched to using Obsidian to manage my Dungeons and Dragons campaign, and the one thing I was really missing was the ability to have a map to reference… so I made a plugin for it!

Github repo: https://github.com/valentine195/obsidian-leaflet-plugin

This supports real-world maps (using OpenStreetMaps, requires internet connection), maps from images fetched online (requires internet connection), or local images.

You can also add markers to the map by right-clicking or drag-n-dropping a note:

FoolishDearJoey-size_restricted

Supports image maps:

image-map-example.PNG
image-map-example.PNG1574×598 160 KB

Multiple marker types can be created and customized in settings, and a map can have an arbitrary number of markers:

markers
markers653×577 44 KB

Once a marker is added, the note it points to or the marker icon can be changed by right clicking on it.

Let me know what you think!

33 Likes
2

Interesting… A just gave it a quick spin, but it seems that the map center after load (with no image set) is a bit off, i.e. not where I’d expect it to be form the lat/long values?

Seems to me that you only consider the integer before the decimal separator (tested both , and .)?

1 Like
3

Yeah, I see the problem, thanks for letting me know. I’ll fix it soon!

Edit: Should be fixed in 0.2.11

1 Like
4

Not quite… Now I land in Columbus Ohio no matter which lat/long I set :innocent:

5

What numbers are you using to set them? I’m currently changing it to random numbers and bouncing all around the world… but yes, if there’s an error parsing the number, Columbus is the default for real-world maps (this will move to a setting soon).

6 
height: 700px
lat: 48.1
long: 11.6
minZoom: 1
maxZoom: 17
defaultZoom: 12

can I turn on a dev console to see if there are exceptions?

7

The dev console can be opened with ctrl-shift-i / cmd-option-i, but there probably won’t be any errors in it. I think I know what’s going on here and it has to do with the plugin trying to use your locale to parse the numbers instead. I’ll try to get an update out ASAP, sorry for the trouble!

8

No worries, right now, I have too much time on my hands anyway :wink:

What I can see in the debugger is that renderReal does indeed get
lat: 39.983334
long: -82.98333
I’m lost in the call stack then though

(and btw: I have the same effect when I only use integers for the coords, so the locale shouldn’t play a role there?)

9

Ok, so lat and long are fine until main.ts:199

with my locale, for 48, this

new Intl.NumberFormat(this.locale, { minimumSignificantDigits: 4 }).format(lat?.split(‘%’).shift())

returns 48,00 and Number of that then yields a NaN

Maybe it’s better to use something like parse-decimal-number - npm for that?

10

Yeah, there was a fundamental misunderstanding on my part about what the Intl.NumberFormat namespace does, unfortunately. I’m working on a solution to support multiple locales, but for now if you update to 0.2.12 and use the US number formats, it should (hopefully…) work. Sorry for the hassle!

11

No problem. Actually, I’m using this to get a bit familiar with how to write plugins for Obsidian (and I know leaflet quite well so your plugin was a natural choice :wink:).

12

Now this is a beautiful example how playing games can create beautiful new ideas and functionality! I’m not a gamer, but I can image this being beneficial to a writer (love the imagemap feature!): Make a map of your world and use it to visualize stuff.

A good thing—keep it coming!

When I set my latitude/longitude in settings, they are grayed but my values are shown. When going to preview mode, it seems to display the map correctly but pops up 2 messages about “There was an error with the provided latitude and longitude”. Here’s what I used:

height: 500px
minZoom: 1
maxZoom: 18
defaultZoom: 8

I’m using Obsidian (AppImage) 0.11.5, Leaflet 0.2.13 on Linux Mint 20.1/Cinnamon, with German settings. (Our decimal point is a comma but lat/lon are usually given using a decimal point.)

13

These darn latitude and longitudes :sweat_smile:

Just to be clear, did you enter them into settings with a point or a comma? The map will pull from there if it is not provided in the code block.

At the moment only US number formatting (decimal points) is supported. I’ll make that more clear on the documentation.

Edit: Okay, I think I found the culprit for the notice you were receiving. 0.2.14 should fix it.

14

I did enter them using a point (i.e. 51.133333).

Just tested 0.2.14:

  • lat/lon in settings not grayed anymore
  • popup error gone
  • great support!

Even if my locale “wants” a decimal comma, I’d still prefer using a decimal dot for latitude/longitude—because everyone else does and it makes copy-pasting geo data so much easier …

15

Glad it’s working for you now!

Let me know if you have any other feedback :slight_smile:

1 Like
16

Great work! I was just telling a friend last week that this would be an awesome plugin! Glad to see someone was already working on it!

17

@valentine.195 I’ve been thinking how nice it would be to put a list of markers into the code block—as opposed to manually zooming the map, and creating each marker individually.

I could envision this to be great for things like

  • a map of friends on the OpenStreetMap,
  • for writers: a map of locations in their world, with links to background information,
  • etc.

Maybe this could be implemented to be used within the code block, in YAML format or the like. It should have

  • latitude
  • longitude
  • marker name
  • an optional link to a note

Reason: I’m currently setting up a map with friends and family members all over the world, and of course I have their names, geo coordinates and notes. I’d even use different markers for “friends” and “family”. It’d make it so much easier if I could just paste that info into the leaflet code block …

Currently, I have to zoom into the map, find their address, detect that OSM doesn’t even show their house due to old map data, open an additional Google map, find their location, compare both maps, create the marker …

N.B.: Would you think you could change the note links so they work more like in Obsidian (i.e., without having to specify the folders and the “.md” extension) and also only show the file title in the popup? I feel this would make it more “Obsidian-like”, and much easier to use, if one moves notes around.

Btw, would you prefer feedback on GitHub instead of here?

1 Like
18

So, I actually played with this while I was developing the plugin, but ran into two main issues:

  1. Logically, if markers are defined in the code block, if you add a new marker, it should also be written in the code block. I had this successfully working, but it can quickly cause extremely long code blocks in the file, and if I start modifying the markdown source, stuff can go horribly wrong.
  2. Writing the file to the markdown source caused the map to re-render, which caused a flicker.

So, I decided to store the markers in the plugin data instead.

I think maybe a good middle ground could be an Add (or Edit) Marker(s) button, that opens a modal where you could bulk define and/or edit markers?

Something like the current modal for when you right-click on a marker, but inline, and have a list of all currently defined markers, plus an Add New marker. What do you think?

Would you think you could change the note links so they work more like in Obsidian (i.e., without having to specify the folders and the “.md” extension) and also only show the file title in the popup? I feel this would make it more “Obsidian-like”, and much easier to use, if one moves notes around.

Yeah, I can drop the “.md” requirement. I did it this way for ease of programming - the plugin literally just tries to open that exact path that you’ve given it.

The folder I’m not sure about. I’ll need to play around with that.

I’ve had the thought of, when I have more time to dedicate to it, having a suggestion / autocomplete based on file names in the vault, and displaying the path to the selected note as muted text underneath the field.

Btw, would you prefer feedback on GitHub instead of here?

Yes, probably easier to keep track of things. :slight_smile:

Edit: created issues on github for these

2 Likes
19

Maybe. Personally, I favour messing with code—and learn from errors :wink: Let’s see what others think?!

Just my thinking! Would be great to have the same experience as with Obsidian (Wiki) links. Maybe a plugin can use this function? (This would be very helpful for people who use whole sentences as file names—much quicker and less error-prone!)

1 Like
20

There is a fuzzy suggestion function exposed in the API, it’s just a matter of taking the time to program it :grin:

1 Like