How can I close a popup in Azure Maps?

Question

Hi all;

I am using AzureMapsControl.Components but I'm 99% certain this is an Azure Maps issue.

I am displaying a popup with the close button. However, clicking on the close button does not close it. Is there something I need to set to make the close work? Looking at this sample, there does not appear to be.

There is no click event for the popup and the close event is not fired clicking on the X so I don't know what needs to be done to enable closing.

I am creating a popup as:

PinTooltip = new Popup(new PopupOptions
{
    // Position is set in OnPinMove()
    Position = new Position(MapCenter!.X, MapCenter.Y),
    PixelOffset = new Pixel(0, -20),
    CloseButton = true,
    OpenOnAdd = false,
});

await mapArgs.Map.AddPopupAsync(PinTooltip);

and then I display it as:

Action<PopupOptions> tooManyEntities = options =>
{
    options.Content = $"<div style=\"padding:10px;color:black\">There are {numPoints} events at this location<br/>which is too large to display in a list.<br/>Please revise your search terms to reduce<br/>the number of events returned at this location.</div>";
    options.Position = ((AtlasMapPoint)cluster.Geometry).Coordinates;
    options.CloseButton = true;
};
Task.Run(async () => await PinTooltip!.SetOptionsAsync(tooManyEntities));
Task.Run(async () => await PinTooltip!.OpenAsync());

Note that I set OpenOnAdd = false and I display it with PinTooltip!.OpenAsync()

Any idea why this ignores a click on the X?

thanks - dave

Answer 1

Try using the browser developer tools an inspecting the popup elements. It's possible some custom CSS or other element is preventing the X button from receiving click events. For example, if the popup-container or popup-content-container CSS class was overridden with pointer-events: none; no mouse events will work within the popup.