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);
}
}