CODEWITHSUNDEEP
blazor-server-sideazure-mapsazuremapscontrol
David Thielen
David Thielen

Reputation: 32926

AzureMapsControl - How can I put a razor popup over a marker?

This is for AzureMapsControl.Components which is a wrapper around Azure Maps.

When the user clicks on a pin, I need to bring up a dialog box (popup) that is a razor component. With a couple of interactive razor components in that component.

HtmlMarker.HtmlMarkerOptions.Popup will display HTML. But as best as I can tell, there's no way to assign a component to that. Is that correct?

And if so, how can I then make visible a component that I have on the same page as the <AzureMap>, so it is above the map in Z-order, and positioned by the pin, but not to the extent it extends into the edge of the browser?

Update: I'm using a DxPopup component and it displays over the map with no issues. Si I can verify @rbrundritt solution works.

Upvotes: 0

Views: 71

Answers (1)

rbrundritt
rbrundritt

Reputation: 17964

The easiest way to do this would be to not use the built-in popup's and instead add a click event to the marker/pin, and when that event triggers, display your razor component. You could simply display it as a dialog window or position it to align an edge of it to the markers/pins location (get markers pixel location in map, then offset by map div's screen pixel location).

Upvotes: 0

Related Questions