Widgets

Widgets are free-floating UI elements that can be added to the MapView to read, edit, or navigate the map.

A widget can be defined inside a MapView by laying out in Markup and defining the Position parameter:

<MapView>
    <LegendWidget Position="OverlayPosition.TopRight" />
</MapView>

Widgets can also float outside of the MapView, but they must be tied to the view. There are two ways to accomplish this. The first pattern is to still define the widget inside the MapView, but give it an HTMLElement id, where it will be actually rendered.

<div id="external-widget-div"></div>
<MapView>
    <LegendWidget ContainerId="external-widget-div" />
</MapView>

The second pattern is to define the widget outside of the MapView and pass the MapView to the widget as the MapView parameter.

<MapView @ref="mapView">
</MapView>

<LegendWidget MapView="mapView" />
@code {
    private MapView? mapView;
}

Note that if you simply define a Widget outside of the MapView, but don’t pass the MapView parameter, you will get an Exception.

The expand widget is a special widget that can be used to expand or collapse other widgets and custom HTML elements. You can define up to one widget and as much HTML as you want.

<MapView>
    <ExpandWidget>
        <LegendWidget />
        <button type="button" class="btn btn-primary">Click Me</button>
    </ExpandWidget>
</MapView>

There is also an HtmlContent parameter for passing in strings as HTML.

<MapView>
    <ExpandWidget HtmlContent="htmlContent" />
</MapView>

Widgets

Expand Widget