How to close the popup automatically in Azure Indoor Maps?

Question

Hi All,

We have an application where we are showing the popup when we hover over the pins. The pins are moving after some time, but the popup remains at the same location. Is there any way by which we can close the popup automatically or after 1 minute or the popup can move along with the pin? Please let me know your inputs.

Also, if there is any other way of handling it kindly let me know.

Answer 1

To display the popup currently I suspect you have added an event (e.g. mouse move) to get information on what the user interacted with, then adding a popup to the map. To remove the popup you need to decide what you want the user experience to be.

• If you want the popup to disappear when the user moves the mouse away from the shape and popup, you can either use the same event handler (if it's on the map and not a layer), or a second event that's attached to the map to close the popup. If you have object moves over time, eventually the mouse will not be over it, and the slights movement would trigger the popup to close. The order in which you add these events should be 1. mouse move event on map to close popup. 2. mouse move event on layer to open popup. By using this ordering, as you move the mouse the map will try and close the popup by the layer will keep it open if the mouse is above it. Here is a sample: https://samples.azuremaps.com/?search=popup&sample=show-popup-on-hover
• If you want the popup to stay open for a set amount of time, then close, you can use a timeout. If you are using a single popup and reusing it, you will want to capture the timeout's ID and clear the timeout every time the event is fired to show the popup, thus restarting the timer. For example:

var popup =  new atlas.Popup();
var currentTimeout = null;

map.events.add('mousemove', (e) => {
	
	const features = map.layers.getRenderedShapes(e.position, 'unit');
	if (features.length > 0 && features[0].properties) {
		popup.setOptions({
			position: features[0].coordinates,
			//Add content
		});
		popup.open(map);
		
		//Clear any existing timeouts.
		if(currentTimeout){ 
			clearTimeout(currentTimeout);
		}
		
		currentTimeout = setTimeout(closePopup, 60000);	//Close popup after 60 seconds.
	}
});


function closePopup() {
	popup.close();
}

• If you want to popup to close when the mouse is no longer over top of the shape, but the mouse hasn't moved, the shape did, you could monitor the sourcedata event which should fire if any of the data is updated. When that first you could simply close the popup and not worry about it's position, or you could take the last known position of the mouse, and check to see if the same shape still intersects that position. This can be done by capturing the ID of the shape when the mouse goes over it, along with the position of the mouse (lon/lat). When the source data event fires, query the map at that position to see what shapes are there, loop through them and see if any have a matching ID, and if not, close the popup. const features = map.layers.getRenderedShapes(e.position, 'unit');