How can I close a popup in Azure Maps?

David Thielen 2,231 Reputation points
2024-03-24T22:31:23.0833333+00:00

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()

MapPopup

Any idea why this ignores a click on the X?

thanks - dave

Azure Maps
Azure Maps
An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
585 questions
0 comments No comments
{count} votes

Accepted answer
  1. rbrundritt 15,126 Reputation points Microsoft Employee
    2024-03-25T15:58:22.7333333+00:00

    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.

    0 comments No comments

0 additional answers

Sort by: Most helpful