New Plugin: Obsidian Leaflet - Interactive maps in notes

Yeah, I mean everything in the vault. From playing around with it, it seems both functions require the target to be a TFile to return anything. Hopefully someone has a better way than maintaining a separate tags cache, or the devs add a hook to get one.

1 Like

Just a—mainly cosmetic—side remark from having a quick glance at your code, main.ts line 940-ish:

The URL recognition regex won’t catch http:// and other protocol links, also probably (?) not non-English domain names (which are shown URL-encoded in the popup).

Example:

(Odd things like ♡.com and nic.谷歌 are actually valid domain names … But well, we could probably assume these are properly IDN-encoded and URL-escaped?)

You’re talking about this?

/(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/
(RegExp taken from here)

It actually does catch http://, that specific example doesn’t work because it does not catch ports. However, you’re correct, it probably doesn’t catch non-English domain names. I may look into switching to an NPM validator module that’s more robust, though.

Yep. I fear regexp aren’t easy anymore since we got Unicode domains. You could probably go for an additional (xn--)? for IDN domains, though. (♡.com, for instance, resolves to xn--c6h.com.)

So it was the port—should have seen that, sorry. And I missed the s?, sorry again! :blush:

Be also aware of long TLDs: \.[a-z]{2,4} won’t catch TLDs like .bayern, .local and so on. As far as I know, TLDs can be 2–63 characters long.

Some countries like the British and Japanese also make heavy use of second-level domains, like in something.co.uk.

Plus, machines in the local network like my http://studio1:9000 often don’t specify a TLD altogether but rely on the DNS resolver to do its work.

Cheers for all your help!

Fixed in 3.2.1. You’re my current hero, @valentine.195!

1 Like

Just to let everyone know: @valentine.195 is improving Obsidian Leaflet all the time, and it has become so usable and a real joy to work with.

Some examples:

  • auto-generating markers on maps from notes’ YAML data
  • many new features in the codeblock
  • distance measurement in m, km, mi and yd with optional distanceMultiplier (shown as 2nd value, for instance to estimate driving distance from straight-line distance)
  • “Show all markers” even if your default map view is different
  • “Reset view” to quickly return to the predefined view
  • filter markers by type
  • bulk edit markers
  • show measured distance view

Screenshots:


“Show all markers” if one is far away out of default view


Filter markers by type


Optimized view to show measured distance (both straight-line and estimated “driving distance”)

2 Likes

Does this work on mobile?

Currently I have the plugin set to desktop only because I do not have access to the mobile beta and cannot test it.

Also, a map interactive UX would need to be redone to support touch.

1 Like

Obsidian Leaflet has just gotten even more impressive: Versions 3.18.0+ now feature GeoJSON support!

3 Likes

I really love your plugin. I haven’t been using it to the fullest extent just yet, but for a while it served me well during the dnd campaign I was a part of. Thank you for your hard work!

1 Like

Just wanted to let you know that the plugin is now available for mobile. I am still working on polishing the user experience, however.

5 Likes

I’d like to know how I can send a leaflet map to the back.
On iOS, the touch command works under the leaflet map.

And, it would be great if the marker tiitle(location name?) can be showed.

Thanks you for the update.

Yeah, I’m working on making the experience on mobile better. Right now there are some issues. If you notice anything, please post a comment on this issue on GitHub:

1 Like

I’d like to know how I can send a leaflet map to the back.
On iOS, the touch command works under the leaflet map.

This should be fixed in 3.20.2

1 Like

Thank you for the update.

It works well.

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

I know this feature request was from a long time ago, but I just implemented this in 3.21.0 and wanted to let you know.

1 Like

Oh sweet! I was actually thinking about this recently, I can’t wait to check it out!

Hey, so I’ve been diving back into this plugin recently, and it’s come so far - the zoom levels especially make my world feel so real, and it performs impressively well on mobile. My one issue is that because I use different vault folders on my phone and computer, and the plugin stores markers in these folders, they don’t really sync. Is there any solution for this other than manually copying the plugin or using a single vault folder? I wouldn’t mind using the metadata process, except that I have a few hundred markers already, and converting them manually would take some time.
Edit: One solution that I thought of was to allow a custom folder location for the marker data—which could be set to something hidden like /.leaflet/ on both devices. I’m not sure how much access plugins have in that manner, though. Thanks again for the great project!

I believe this is technically possible, yes. Let me investigate. At the moment, though, the only way to sync markers is to have the data.json file in the plugin folder.

Actually, thinking about this more. I do not think your edit would work on mobile. I’m pretty sure the app instance is siloed into the current vault.