Methods in Blazor Maps Component

5 Dec 20248 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" Fill="Green"></MapsLayerSelectionSettings>
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@code {
    SfMaps maps;
    public async Task ShapeSelectAsync()
    {
         await maps.ShapeSelectionAsync(0, "name", "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()
    {
       maps.Refresh();
    }
}

PanByDirectionAsync

The 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

The ZoomByPosition method zooms the Maps by specifying the center position for the map. This method triggers the OnZoom event when the zooming operation begins and the OnZoomComplete event when the zooming operation is completed. 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">ZoomByPosition</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

The ZoomToCoordinates zooms the map to the center point of the provided minimum and maximum coordinates. This method triggers the OnZoom event when the zooming operation begins and the OnZoomComplete event when the zooming operation is completed. 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">ZoomToCoordinates</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);
    }
}

GetMinMaxLatitudeLongitude

The GetMinMaxLatitudeLongitude method returns the minimum and maximum latitude and longitude values of the Maps visible area. This method returns a MinMaxLatitudeLongitude class object that contains the Maps minimum and maximum latitude and longitude coordinates.

@using Syncfusion.Blazor.Maps
@using System.Collections.ObjectModel;

<button @onclick="GetMinMaxLatitudeLongitude">GetMinMaxLatitudeLongitude</button>

@if(MapBoundCoordinates != null)
{
    <div>
        Maximum Latitude = @MapBoundCoordinates.MaxLatitude <br/>
        Minimum Latitude = @MapBoundCoordinates.MinLatitude  <br />
        Maximum Longitude = @MapBoundCoordinates.MaxLongitude <br />
        Minimum Longitude = @MapBoundCoordinates.MinLongitude
    </div>
}


<SfMaps ID="maps" @ref="MapsRef">
    <MapsZoomSettings Enable="true" ZoomFactor="@ZoomFactor"></MapsZoomSettings>
    <MapsCenterPosition Latitude="@CenterLat" Longitude="@CenterLong"></MapsCenterPosition>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions= "https://cdn.syncfusion.com/maps/map-data/world-map.json"}' TValue="string">
            <MapsMarkerSettings>
                <MapsMarker Visible="true" DataSource="MarkerDataSource" Height="25" Width="25" TValue="MarkerData" Shape="MarkerType.Circle" AnimationDuration="1500">
                </MapsMarker>
            </MapsMarkerSettings>
        </MapsLayer>
    </MapsLayers>
</SfMaps>


@code {
    SfMaps MapsRef;
    public double ZoomFactor = 7;
    public double CenterLat = 21.815447;
    public double CenterLong = 80.1932;
    public MinMaxLatitudeLongitude MapBoundCoordinates;

    public class MarkerData
    {
        public string Name{ get; set; }
        public double Latitude { get; set; }
        public double Longitude { get; set; }
    }

    public void GetMinMaxLatitudeLongitude()
    {
        MapBoundCoordinates = MapsRef?.GetMinMaxLatitudeLongitude();
    }

    public ObservableCollection<MarkerData> MarkerDataSource = new ObservableCollection<MarkerData> {
        new MarkerData {Latitude=22.572646,Longitude=88.363895},
        new MarkerData {Latitude=25.0700428,Longitude=67.2847875}
    };
}