Get click on Map Popup

Question

Hi all;

When the mouse is over a pin I have a popup I place at that location and show. The problem is, if the user clicks on the pin, I get an event and show a dialog. But if they click on the popup, there's no event.

There does not appear to be a click event for the popup. Is that correct? or did I miss it?

Is there a way to have click events go to the underlying pin under the popup?

Is there a way to have the cursor change from a hand to a pointer when over the pin? That would make it obvious when a click will work or not work.

Note: I'm using AzureMapsControl but I think that is irrelevant to this question (unless there's a popup click event that they did not include in their API.)

thanks - dave

Answer 1

When the popup is open, click events won't go through it to the map by default as this is the normal behavior of overlapping HTML elements in a browser. There is however a workaround which is to add the CSS style "pointer-events: none" to the popup, however, if you add this to the main popup, you won't be able to click anything in the popup, including the close button and would need a different method to close the popup (e.g. if user clicks anywhere, close popup). You can add this style by adding the following CSS to your app:

.atlas-map .popup-container {
    pointer-events: none !important;
}

This will allow all mouse events to pass right through the popup to the map. If you only the events to pass through near the popups arrow/pointer, you can use the following CSS:

.atlas-map .popup-container {
    pointer-events: none !important;
}

.atlas-map .popup-content-container {
    pointer-events: auto !important;
}

As for changing the cursor icon when it hovers over a pin on the map, if you are using a rendering layer (e.g. SymbolLayer) you would need to use mouse over and out events on the layer to detect when hovering is occurring, then set the cursor style on the map div. I'm not sure if that Blazor libraries exposes everything needed to achieve this. Here is how this would be done using the web SDK directly.

//Create a layer to render the point data.
var symbolLayer = new atlas.layer.SymbolLayer(datasource);
map.layers.add(symbolLayer);

//When the mouse is over the layer, change the cursor to be a pointer.
map.events.add('mouseover', symbolLayer, function () {
	map.getCanvasContainer().style.cursor = 'pointer';
});

//When the mouse leaves the item on the layer, change the cursor back to the default which is grab.
map.events.add('mouseout', symbolLayer, function () {
	map.getCanvasContainer().style.cursor = 'grab';
});

You can find live code sample of this here: https://samples.azuremaps.com/?search=&sample=change-mouse-cursor-when-hovering-layer