How to show an overlay ontop of the map?

[Dragonjester]

Greetings from germany.

I would like to add an overlay, like in this leaflet example: https://leafletjs.com/examples/overlays/example-image.html

I found this example for the deprecated Map element:
https://github.com/ichim/LeafletForBlazor-NuGet/tree/a81c932c31b65d52abb74df0933ce14fb3800198/Map%20(obsolete%20component)#images-overlay

But sadly I'm unable to find anything for the new RealTimeMap. Based on the deprecated example and other examples i found, my current attempt looks as follows, but it doesn't add anything to the map at all. The map is fully functional otherwise.

How do I add such an overlay ontop of the map?

@page "/"
@using static LeafletForBlazor.Map

<h1>Hello, world!</h1>

<RealTimeMap height="800px" width="1024px" 
    Parameters="@parameters"
    OnAfterMapLoaded="@OnAfterMapLoaded" 
></RealTimeMap>

@code {
    RealTimeMap.LoadParameters parameters = new RealTimeMap.LoadParameters()
    {
        location = new RealTimeMap.Location()
        {
            latitude = 44.4501715,
            longitude = 26.1107672,
        },
        zoomLevel = 18
    };

    public async Task OnAfterMapLoaded(RealTimeMap.MapEventArgs args)
    {
        args.sender.Map.MapOverlays.images.images_and_bounds.Add(new ImagesAndBoundsCoordinates()
        {
            url = "E:\\mymap.jpg",
            map_bounds = new MapBounds()
            {
                _southWest = new Map.Location()
                {
                    longitude = 24.0970904,
                    latitude = 44.4409802
                },
                _northEast = new Map.Location()
                {
                    longitude = 26.0985575,
                    latitude = 45.4418393
                }
            }
        });
    }
}

[ichim]

Hello sir,
Does not exist în this moment for RealTimeMap. I will add for next versions.
Sorry!

Greetings from germany.

I would like to add an overlay, like in this leaflet example: https://leafletjs.com/examples/overlays/example-image.html

I found this example for the deprecated Map element:
https://github.com/ichim/LeafletForBlazor-NuGet/tree/a81c932c31b65d52abb74df0933ce14fb3800198/Map%20(obsolete%20component)#images-overlay

But sadly I'm unable to find anything for the new RealTimeMap. Based on the deprecated example and other examples i found, my current attempt looks as follows, but it doesn't add anything to the map at all. The map is fully functional otherwise.

How do I add such an overlay ontop of the map?

@page "/"
@using static LeafletForBlazor.Map

<h1>Hello, world!</h1>

<RealTimeMap height="800px" width="1024px" 
    Parameters="@parameters"
    OnAfterMapLoaded="@OnAfterMapLoaded" 
></RealTimeMap>

@code {
    RealTimeMap.LoadParameters parameters = new RealTimeMap.LoadParameters()
    {
        location = new RealTimeMap.Location()
        {
            latitude = 44.4501715,
            longitude = 26.1107672,
        },
        zoomLevel = 18
    };

    public async Task OnAfterMapLoaded(RealTimeMap.MapEventArgs args)
    {
        args.sender.Map.MapOverlays.images.images_and_bounds.Add(new ImagesAndBoundsCoordinates()
        {
            url = "E:\\mymap.jpg",
            map_bounds = new MapBounds()
            {
                _southWest = new Map.Location()
                {
                    longitude = 24.0970904,
                    latitude = 44.4409802
                },
                _northEast = new Map.Location()
                {
                    longitude = 26.0985575,
                    latitude = 45.4418393
                }
            }
        });
    }
}