Methods in Blazor Maps Component

31 Jan 20225 minutes to read

This section explains the methods used in the Maps component.

ShapeSelectionAsync

The ShapeSelectionAsync method can be used to select a shape dynamically in the shape layer of the Maps. The following are the arguments for this method.

Argument name	Description
layerIndex	Specifies the index number of layer in which the shape is to be selected.
propertyName	Specifies the property path for map shape data to select the shape.
name	Specifies the shape data path for the data source of the layer.
enable	Specifies whether to select or unselect the shape.

@using Syncfusion.Blazor.Maps

<button @onclick="ShapeSelectAsync">Select Shape</button>
<SfMaps @ref="maps">
    <MapsZoomSettings Enable="true" EnablePanning="true">
    </MapsZoomSettings>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
		    <MapsLayerSelectionSettings Enable="true">
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@code {
    SfMaps maps;
    public async Task ShapeSelectAsync()
    {
        await maps.ShapeSelectionAsync(0, "Argentina", "Argentina");
    }
}

Refresh

The Refresh method can be used to change the state of the component and render it again.

@using Syncfusion.Blazor.Maps

<button @onclick="Refresh">Refresh</button>
<SfMaps @ref="maps">
    <MapsZoomSettings Enable="true" EnablePanning="true">
    </MapsZoomSettings>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@code {
    SfMaps maps;
    public void Refresh()
    {
        await maps.Refresh();
    }
}

PanByDirectionAsync

PanByDirectionAsync method pans the Maps dynamically by specifying direction. The following are the arguments for this method.

Argument name	Description
direction	Specifies to the direction of panning operation.
mouseLocation	Specifies the position of the panning within the Maps.

@using Syncfusion.Blazor.Maps

<button @onclick="PanByDirectionAsync">Pan by Direction</button>
<SfMaps @ref="maps">
    <MapsZoomSettings Enable="true" EnablePanning="true">
    </MapsZoomSettings>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@code {
    SfMaps maps;
    void PanByDirectionAsync()
    {
        Syncfusion.Blazor.Maps.Internal.Point position = new Syncfusion.Blazor.Maps.Internal.Point();
        position.X = 120;
        position.Y = 200;
        maps.PanByDirectionAsync(Syncfusion.Blazor.Maps.PanDirection.Bottom, position);
    }
}

ZoomByPosition

ZoomByPosition method zooms the Maps by specifying the center position for the map. The following are the arguments for this method.

Argument name	Description
centerPosition	Specifies the position of the maps.
zoomFactor	Specifies the zoom level of maps.

@using Syncfusion.Blazor.Maps

<button @onclick="ZoomByPosition">Print</button>
<SfMaps @ref="maps">
    <MapsZoomSettings Enable="true">
    </MapsZoomSettings>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@code {
    SfMaps maps;
    public void ZoomByPosition()
    {
        MapsCenterPosition centerPosition = new MapsCenterPosition();
        centerPosition.Latitude = 35.145083;
        centerPosition.Longitude = -117.960260;
        maps.ZoomByPosition(centerPosition, 2);
    }
}

ZoomToCoordinates

ZoomToCoordinates zooms the map to the center point of the provided minimum and maximum coordinates. The following are the arguments for this method.

Argument name	Description
minLatitude	Specifies the minimum latitude of the coordinate for the zooming operation.
minLongitude	Specifies the minimum longitude of the coordinate for the zooming operation.
maxLatitude	Specifies the maximum latitude of the coordinate for the zooming operation.
maxLongitude	Specifies the maximum longitude of the coordinate for the zooming operation.

@using Syncfusion.Blazor.Maps

<button @onclick="ZoomToCoordinates">Print</button>
<SfMaps @ref="maps">
    <MapsZoomSettings Enable="true">
    </MapsZoomSettings>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@code {
    SfMaps maps;
    public void ZoomToCoordinates()
    {
        maps.ZoomToCoordinates(0, 0, 100, 100);
    }
}