Use a custom image as a marker icon

[lucabello]

Hi! First, thanks for the great plugin, I've been using it a lot and I love it :)

What I'm trying to achieve

I'm building a world map, and I'm trying to display a marker on some countries (with some note related to each). I'd love to display the country flag on each marker (such as hampusborgos/country-flags or hatscripts/circle-flags, instead of a FA icon; however, that doesn't seem to be possible.
To summarize, I'm looking for a way to use a custom img/svg instead of a FA icon :)

What I've tried

Your documentation mentions that in the advanced markers configurations you can make use of the ExtraMarkers properties; specifically, I tried using innerHTML, but that didn't work. In this repo's issues I found one where you mentioned that you cut on that functionality for performance issues (which you also mention in the code).

Possible solutions

If performance issues are a problem, I'd be perfectly happy to link local images as well; arguably, since properties like innerHTML are not surfaced through the UI (but only allowed through advanced configuration), a note in the docs like beware of performance issues if you use this could be enough :)

Let me know what you think!

[giittyy]

Yes, please add this. Was just looking for how to do it. Would be so cool to put custom icons on each.

[esm7]

Not taking away from the fact it's a good idea, please note that since this issue was opened, Map View received support for emojis as marker icons, practically adding a huge set of potential icons, like all the country flags.

[lucabello]

Thanks for pointing out the new update! Unfortunately, it looks like country flags display as red question marks (i.e., “❓”).

Maybe the chosen emoji font doesn't support them?

[lucabello]

Upon closer inspection, it looks like the check isText() (which is used to check if some text is an Emoji, is only using Extended_Pictographic, which doesn't match country flags.

There is a regex specifically for country codes, called \p{Regional_Indicator}; you can see it in action in this live example.

An extremely simple solution would be to modify the function to include that regex as well:

function isText(iconName: string) {
    // Some emojis have a longer length so just checking for the string length isn't enough
    return iconName.length <= 2 || /\p{Extended_Pictographic}/u.test(iconName) || /\p{Regional_Indicator}/u.test(iconName);
}

Would you consider making this change? I would love to get rid of my local changes and follow the plugin updates again :)

[esm7]

That's a great insight! I made the change in the code, but unsure when I'll get to release a new version. Possibly this week with some fixes, but maybe just in a couple of weeks after I finish some major features. Either way, you can start using flags emoticons and rest assured it will be supported in the next release :)

[lucabello]

No rush! Thanks a lot :)

[FreyaHolmer]

Just wanted to +1 this! I've been making a map of cats in my local area, and it would be wonderful if it was possible to supply local image files as markers so that I've got little cat faces all over the map <3

I've been doing it in photoshop which is not ideal for many reasons, but I've got custom icons there!

[esm7]

Custom marker images is becoming one of the top requested feature, I'll give it attention once the vast 6.0.0 version I'm working on is released. Note though that collision management (=being able to place pictures so they won't be on top of each other), like in the picture you made in Photoshop, will probably be too complicated to implement (unless I find a Leaflet plugin that does it, which I haven't yet).

[lucabello]

Hey @esm7, IMHO collision management is not a big deal; if the image is inside a marker icon, I think we can deal with the standard way Leaflet markers are displayed :)

Also @FreyaHolmer that map is just adorable 😍

[lucabello]

@esm7 What is missing for this feature to be implemented? Is it something I can help with?

I'd be happy to contribute it myself and submit a PR if you'd like! Getting this into a next release would allow me to smoothly update the plugin instead of manually modifying it, so I'd love to help :)

[esm7]

Would love a hand in implementing this. I think this requires the following:

1. First and foremost, deciding how to add the custom images (would you address them as existing vault attachments?).
2. Once this is decided, a display rule (the 6.0.0 of marker icon rules) needs to be able to include an image file name (or something along this line) instead of a marker icon.
3. Finally, update the code that renders the marker icons by adding a path that creates the image. All of this is in the markerIcons.ts file (from the top of my head).

This should be a PR that comes out of the v6.0 branch, since the relevant code changed quite a lot there, and doing it based on 5.5.0 would mean a lot of double work. (before building 6.0.0 from the v6.0 branch, I recommend you backup your settings in the plugin's data.json, since they are not backwards-compatible)

[lucabello]

I started playing with this and I realized it's indeed been fixed in v6.0 :)

It requires a manual tweak instead of being allowed via the UI, which is honestly fine by me. Inspecting the data.json file, marker rules are defined as follows:

...
    {
      "query": "tag:#trip",
      "preset": false,
      "iconDetails": {
        "prefix": "fas",
        "icon": "fa-hiking",
        "markerColor": "green"
      }
    },
    {
      "query": "tag:#dogs",
      "preset": false,
      "iconDetails": {
        "prefix": "fas",
        "icon": "fa-paw"
      }
    },
...

"iconDetails" allows setting the innerHTML field (which used to not be respected); this means I can not only use Emojis for flags, but I can also do:

...
    {
      "query": "tag:#trip",
      "preset": false,
      "iconDetails": {
        "prefix": "fas",
        "icon": "fa-hiking",
        "markerColor": "green"
      }
    },
    {
      "query": "tag:#italy",
      "preset": false,
      "iconDetails": {
        "icon": "",
        "opacity": 1,
        "markerColor": "black",
        "innerHTML": "<img src=\"https://hatscripts.github.io/circle-flags/flags/it.svg\" style=\"width:32px\">"
      },
      "badgeOptions": {},
      "pathOptions": {}
    },
...

This is honestly all I wanted from the plugin, and it now requires 0 code changes, so you can close this issue imho :)

Thanks a lot for being very open to discuss the feature and thanks for all the effort you put into the plugin; I'm really looking forward into v6 being released!

[esm7]

If the innerHTML field suits your needs, note you can also set it from the UI, in the "advanced" section when editing a rule :)

[lucabello]

I can't find that section anymore in v6 unfortunately :(

[esm7]

It looks different, that's possibly the reason you missed it -- there is a "Marker & Display Rules" with one button "Marker & Path Display Rules..." that opens a much more comprehensive dialog than we had in v5.x.

[lucabello]

Indeed, but the "Marker & Path Display Rules..." button doesn't allow me to set innerHTML from the interface as I previously could:

Clicking on "Edit..." I get:

It would be nice to still have a textbox-like type of input for advanced users, or at least have an "innerHTML" field in the "Edit..." screen!

[esm7]

The "advanced" drop-down is barely visible on your screen for some reason (what theme is it?). It should do what you want.

[FreyaHolmer]

I'm not sure if this is possible in the upcoming version, but now that bases are a thing in Obsidian, it would be cool if the the map markers could follow the same approach as the image shown in the cards view. For example, going back to my cat shenanigans, this is the card view:

You basically select which property on the original files you want to refer to the image:

and in the .md files, similar to location, the images in the vault are referenced by the property I chose:

The nice thing about this is that it's a lot less manual setup if it follows the same convention as the bases, rather than manually referencing it every time, or so!

[esm7]

@FreyaHolmer it's a good use case and a solid flow definition, I'll target that for v6.1.

[FreyaHolmer]

@FreyaHolmer it's a good use case and a solid flow definition, I'll target that for v6.1.

hell yeah all my cat friends thank you!! looking forward to it c: