Markup and Methods

Parameters and Child Components in Markup

Each GeoBlazor MapComponent is a Razor component that can be nested inside specific other components. For example, a FeatureLayer can only be nested inside a Map, and a PopupTemplate could be nested inside multiple items, like FeatureLayer, GeoJSONLayer, or SearchWidget. You can find a list of all the accepted child components as public properties on each parent component.

<MapView>
    <Map>
        <FeatureLayer Url="...">
            <PopupTemplate>
                <FieldInfo />
            </PopupTemplate>
        </FeatureLayer>
    </Map>
</MapView>

<MapView>
    <Map>
        <FeatureLayer Url="...">
            <PopupTemplate>
                <FieldInfo />
            </PopupTemplate>
        </FeatureLayer>
    </Map>
</MapView>

MapComponents also support Parameter properties. These are usually more simple value types, such as string, int, bool, double, or MapColor. These parameters can be set in markup inline similar to HTML attributes.

<FieldElement FieldName="trailName" Label="Trail name" EditableExpression="false" />

<FieldElement FieldName="trailName" Label="Trail name" EditableExpression="false" />

Creating Components in C# Code

Many commonly re-used components, such as Graphic and Layers, can be created in C# code instead of using Razor markup. When supported, such components usually have a secondary constructor that takes all of the expected properties as optional parameters. It is recommended to always use this custom constructor, otherwise you will get a warning about setting Blazor parameters outside of Markup.

var center = new Point(-122.4194, 37.7749, spatialReference: SpatialReferences.Wgs84);

var popupOptions = new PopupOptions(
    new PopupDockOptions(buttonEnabled: false), 
    new PopupVisibleElements(false, false));

var popupTemplate = new PopupTemplate($"WKID: {center!.SpatialReference!.Wkid}", 
    $"<b>X:</b> {center.X!.Value.ToString("N5", CultureInfo.CurrentCulture)} | <b>Y:</b> {center.Y!.Value.ToString("N5", CultureInfo.CurrentCulture)}");

var graphic = new Graphic(center, popupTemplate: popupTemplate);

await graphicsLayer.Add(graphic);

var center = new Point(-122.4194, 37.7749, spatialReference: SpatialReferences.Wgs84);

var popupOptions = new PopupOptions(
    new PopupDockOptions(buttonEnabled: false), 
    new PopupVisibleElements(false, false));

var popupTemplate = new PopupTemplate($"WKID: {center!.SpatialReference!.Wkid}", 
    $"<b>X:</b> {center.X!.Value.ToString("N5", CultureInfo.CurrentCulture)} | <b>Y:</b> {center.Y!.Value.ToString("N5", CultureInfo.CurrentCulture)}");

var graphic = new Graphic(center, popupTemplate: popupTemplate);

await graphicsLayer.Add(graphic);

Binding and Asynchronous Get/Set Methods

While Blazor is designed to constantly watch for updated Parameters and re-render, this becomes more difficult with a JavaScript-based rendering engine like ArcGIS. Therefore, while GeoBlazor supports and encourages laying out your view with Razor markup, it is recommended that interactive updates to GeoBlazor elements and parameters be done via async C# methods.

For example, when defining your map, you might have a static list of layers you want to add. These can be easily laid out with Razor.

<MapView>
    <Map ArcGisDefaultBasemap="arcgis-topographic">
        <FeatureLayer Url="..." />
        <GraphicsLayer @ref="_graphicsLayer" />
        <GeoJSONLayer Url="..." />
    </Map>
</MapView>

@code {
    private GraphicsLayer? _graphicsLayer;
}

<MapView>
    <Map ArcGisDefaultBasemap="arcgis-topographic">
        <FeatureLayer Url="..." />
        <GraphicsLayer @ref="_graphicsLayer" />
        <GeoJSONLayer Url="..." />
    </Map>
</MapView>

@code {
    private GraphicsLayer? _graphicsLayer;
}

However, if you want to add and remove graphics from your GraphicsLayer while the user is watching or interacting, this should be done by calling methods like await _graphicsLayer!.Add(newGraphic);. See Custom Graphics for more details.

Most parameters that are intended to change during the lifetime of the MapView will support an asynchronous Set and Get method. This allows you to change and read parameters, while staying in sync with the ArcGIS JavaScript engine.

await featureLayer.SetPopupTemplate(newTemplate);

Graphic? feature = await popupWidget.GetSelectedFeature();

await featureLayer.SetPopupTemplate(newTemplate);

Graphic? feature = await popupWidget.GetSelectedFeature();

Some parameters might correctly bind for changes after the initial Map render, but since this is not supported in all scenarios, it is recommended to use the Set and Get methods when available for updates.