New Plugin: Obsidian Leaflet - Interactive maps in notes

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

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).

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?

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!

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?)

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?

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!

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:).

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.)

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.

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 …

Glad it’s working for you now!

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

1 Like

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!

@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

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

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

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

Thank you so much for this great plugin. It would be very nice if you can add a feature to show the preview window of the marker.

This plugin can provide a solution for my question: Is it possbile to make internal link over images

1 Like

Are you talking about the Obsidian note preview window that pops up when you hover over an internal link?

Definitely possible to do. It’ll be available as a settings toggle.

3 Likes

Hey, it’s the person from r/DMAcademy! I have some questions and a couple of suggestions.
The option for local images is great! I like the idea above of providing page previews on hover.
I still think it would be great if markers were stored inside the code block, with options as text. Something like

markers:
    marker1, [[File]], 50, 60

Where marker1 is the display name, File is where it links to, and the last two numbers are latitude and longitude.

This would also tie in to another option, to have markers only appear at specific zoom levels. For example, towns might only be visible at level 10, with countries visible at 5. It would be great to have a range, specified with something like “1-5”.
The current system is perfectly usable, but not having the data accessible just makes me a little nervous.

Finally, one issue: I didn’t update for a few days, and was trying to go from .1.7 to .3.1. Each time, though Obsidian claimed to have updated the plugin successfully, the version number stayed on .1.7, and the plugin wouldn’t update. This was persistent even using a VPN and restarting Obsidian. I eventually had to delete and reinstall the plugin (fortunately, I didn’t have much data saved). I’ve never encountered this with any other plugins, so…?