arnaudleclerc / AzureMapsControl.Components

Razor Components for azure-maps-control
MIT License
34 stars 12 forks source link

UpdateHtmlMarkersAsync() doesn't change Visibility #104

Open blackboxlogic opened 2 days ago

blackboxlogic commented 2 days ago

Describe the bug Calling UpdateHtmlMarkersAsync() lets me change Position and HTML but setting HtmlMarkerOptions.Visible has no effect.

To Reproduce Steps to reproduce the behavior:

  1. Open your samples project and go to AzureMapsControl.Sample\Components\Pages\Markers\HtmlMarkersRemove.razor
  2. Replace the file source with:
    
    @page "/Markers/HtmlMarkersRemove"
    @rendermode InteractiveServer

@using AzureMapsControl.Components.Map <AzureMap Id="map" EventActivationFlags="MapEventActivationFlags .None() .Enable(MapEventType.Click, MapEventType.Load)" OnClick="OnMapClick" OnLoad="OnMapLoad" />

@code { private AzureMapsControl.Components.Markers.HtmlMarker Marker;

public async Task OnMapLoad(MapEventArgs eventArgs)
{
    Marker = new AzureMapsControl.Components.Markers.HtmlMarker(
        new AzureMapsControl.Components.Markers.HtmlMarkerOptions
            {
                Position = new AzureMapsControl.Components.Atlas.Position(47.3769, 8.5417),
                Visible = true
            }, AzureMapsControl.Components.Markers.HtmlMarkerEventActivationFlags.None());

    await eventArgs.Map.AddHtmlMarkersAsync(Marker);
}

public async Task OnMapClick(MapMouseEventArgs eventArgs)
{
    var options = Marker.Options;
    options.Visible = !options.Visible;
    await eventArgs.Map.UpdateHtmlMarkersAsync(new AzureMapsControl.Components.Markers.HtmlMarkerUpdate(Marker, options));
}

}

3. Run it, browse to that page, click on the map, and notice that the marker doesn't change visibility.
4. Set a breakpoint at `options.Visible = !options.Visible;` and confirm that the code is running.

**Expected behavior**
I should be able to make an HTML marker visible or invisible using `UpdateHtmlMarkersAsync()`.

**Desktop (please complete the following information):**
 - OS: Windows 10 home
 - Browser: Firefox 131.0.2
 - Version: AzureMapsControl.Components 1.16.1

**Additional context**
I thought it might be a bug in Azure maps, but I tried it using pure JavaScript and it works fine. I started with [this example](https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/0e130d3b24d2506478fcc383aced779e599221d3/Samples/HTML%20Markers/HTML%20Marker%20with%20Custom%20SVG%20Template/HTML%20Marker%20with%20Custom%20SVG%20Template.html#L62-L65), put in my map key, changed
        marker.setOptions({
            color: 'rgb(' + (Math.random() * 255) + ',' + (Math.random() * 255) + ',' + (Math.random() * 255) + ')',
            text: Math.round(Math.random() * 100) + ''
        });
TO
        marker.setOptions({
            color: 'rgb(' + (Math.random() * 255) + ',' + (Math.random() * 255) + ',' + (Math.random() * 255) + ')',
            text: Math.round(Math.random() * 100) + '',
            visible: Math.random() > 0.5
        });

I debugged through your code and couldn't find what caused this problem. I didn't see any related errors in the console.