How to create two popups next to each other in Azure Maps

Question

Hi All,

Is there a way to create a popup next to another popup in Azure Maps?
I want to show details in a popup if there are children in the parent table.
Please see the attachment for details.

TIA,
Steve

Answer 1

Hi rbrundritt,

Yes, popup2 is supposed to show the details from popup1. For example,

Instead of two popups, I tried using using "atlas.PopupTemplate.applyTemplate", but it's not pretty.

So, I ended up using popup.setOptions and set the content to contain two divs within a div.

Steve

Answer 2

Ok, there is a couple of ways to achieve this, some better than others.

Option 1: Have a second popup instance that you manage separately. Use the pixel offset option to push it over to the right of your main image when you want to show it. This will require more effort in terms of keeping things in sync. This would also have issues when zooming, so you may want to either add logic to monitor map movement and recalculate position, or simply hide the popups if the zoom level changes. Note, you can hide the close button and pointer of a popup: https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.popupoptions?view=azure-maps-typescript-latest

Option 2: Put all the content inside of one popup. A common approach is to use tabs for subcontent.