Share via

Display flyout of icon

  • Article

Note

Bing Maps SDK for Android and iOS retirement

Bing Maps SDK for Android and iOS is deprecated and will be retired. Free (Basic) account customers can continue to use Bing Maps SDK for Android and iOS until June 30th, 2025. Enterprise account customers can continue to use Bing Maps SDK for Android and iOS until June 30th, 2028. To avoid service disruptions, all implementations using Bing Maps SDK for Android and iOS will need to be updated to use Azure Maps Web SDK by the retirement date that applies to your Bing Maps for Enterprise account type.

Azure Maps is Microsoft's next-generation maps and geospatial services for developers. Azure Maps has many of the same features as Bing Maps for Enterprise, and more. To get started with Azure Maps, create a free Azure subscription and an Azure Maps account. For more information about azure Maps, see Azure Maps Documentation. For migration guidance, see Bing Maps Migration Overview.

A Flyout is a simple panel that displays information over a map, often when an associated MapIcon is tapped.
Flyouts are represented by MapFlyout class.

Examples

Creating and displaying a default flyout

The following example shows how to create a flyout with title and description, and set it to an existing map icon. When user taps an icon that has a flyout attached, flyout will be shown.
Flyouts are light-dismissable by default, meaning they can be hidden by tapping elsewhere. This behavior is controlled by LightDismissEnabled property.

Java

MapFlyout flyout = new MapFlyout();
flyout.setTitle("Test");
flyout.setDescription("Sample description");
icon.setFlyout(flyout);

Swift

let flyout = MSMapFlyout()
flyout.title = "Test"
flyout.description = "Sample description"
icon.flyout = flyout

Objective-C

MSMapFlyout *flyout = [MSMapFlyout flyout];
flyout.title = @"Test";
flyout.description = @"Sample description";
icon.flyout = flyout;

Creating and displaying a custom flyout

Flyouts also support custom views through MapFlyoutCustomViewAdapter interface.

Important: View will be rendered on canvas, with interactive elements no longer interactive.

Java

MapFlyout flyout = new MapFlyout();
flyout.setCustomViewAdapter(new MapFlyout.CustomViewAdapter() {
    @Override
    public View getFlyoutView(MapElement mapElement){
        if (mapElement instanceof MapIcon)
        {
            MapIcon icon = (MapIcon)mapElement;
            // Retrieve title info and custom info stored in the Tag property.
            return new MyCustomFlyoutView(icon.getTitle(), icon.getTag());
        }
        return null;
    }
});
icon.setFlyout(flyout);

Swift

let flyout = MSMapFlyout()
flyout.customViewAdapter = { (mapElement: MSMapElement) -> UIView? in
    if mapElement is MSMapIcon {
        let icon = mapElement as! MSMapIcon
        // Retrieve title info and custom info stored in the Tag property.
        return MyCustomFlyoutView(icon.title, icon.tag)
    }
    return nil
}
icon.flyout = flyout

Showing and hiding flyouts manually

Let's say you want to disable the default light dismiss behavior for flyouts. The following example shows how to hide all your flyouts at once, assuming that pinLayer variable is the map element layer with your map icons.

Java

for (MapElement element : pinLayer.getElements()) {
    if (element instanceof MapIcon) {
        MapFlyout flyout = ((MapIcon)element).getFlyout();
        if (flyout != null) {
            flyout.hide();
        }
    }
}

Swift

for element in pinLayer.elements {
    let icon = element as? MSMapIcon
    icon?.flyout?.hide()
}

Note: to be able to iterate through Elements property of MapElementLayer in Swift, you will need to add Sequence extension for MSMapElementCollection.

Objective-C

for (MSMapElement *element in pinLayer.elements) {
    if ([element isKindOfClass:[MSMapIcon class]]) {
        MSMapIcon *icon = (MSMapIcon *)element;
        if (icon.flyout != nil) {
            [icon.flyout hide];
        }
    }
}

See Also: