Adding an icon to a marker.

[mrunks]

I was trying to add logic for including an Icon with a marker.

Should I not be able to do the following

Where Options represent Icon Options with the same names as ones provided by leaflet.

public class LeafletIcon .....

protected override async Task CreateJsObjectRef() { return await JSBinder.JSRuntime.InvokeAsync("L.icon", Options); }

Then in the Marker options adding a property of LeafletIcon.

When I try the above I receive the following:

"Microsoft.JSInterop.JSException: t.icon.createIcon is not a function"

Or is there another way to go about adding an Icon to a marker ?

[Calusooo]

@mrunks Did you manage to fix this somehow? Did you find the way to add Icon without error t.icon.createIcon is not a function?

[timothyparez]

I am running into the same issue. I've forked from Sm1rfa and created a test branch feature/custom-icon.

I've not used Blazor and JS interop before, so still figuring stuff out,
but I am guessing the Icon class will have to implement CreateIcon somehow.

Wondering if anyone has any insights on this ?

[timothyparez]

I noticed Marker.CreateJsObjectRef() is called automatically but Icon.CreateJsObjectRef() is never called

protected override async Task<IJSObjectReference> CreateJsObjectRef()
{
    var result = await JSBinder.JSRuntime.InvokeAsync<IJSObjectReference>("L.Icon", Options);
}

Not sure where/when this should be called, but since it's not, we're basically calling createIcon on null

Another, possibly related, issue: https://github.com/Leaflet/Leaflet/issues/7300

[timothyparez]

I've tried to trigger a call to Icon.CreateJsObjectRef() by calling .AddTo as is the case with Marker.

Example

  var icon = new Icon(new IconOptions()
  {
      IconUrl = "logo.png",
      IconSize = new Point(32, 32)
  });
  await icon.AddTo(PositionMap);

As a result, Icon.CreateJsObjectRef() now returns a proper L.Icon instance and createIcon can be called. However, now the following exception is thrown Microsoft.JSInterop.JSException: layer.addTo is not a function

[timothyparez]

@mrunks , @Calusooo, I've finally figured it out. (Turned out to be quite simple) You can look at the pull request mentioned above, it allows you to add icons to markers.

[timothyparez]

DivIcon is also supported now with this PR