Error when placing user's location on the map

[Conor O'Molony]

Hey there, i am seeking help with the following error which occurs when a marker representing the user's current location is added to the map. 

"

System.NullReferenceException: Object reference not set to an instance of an object.

   at Syncfusion.Blazor.Maps.MapsMarkerSettings.OnInitializedAsync()

   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

"

All my code works perfectly fine in terms of using the user's location to centre the map on their position, so i have no idea what is wrong with my marker. All help will be greatly appreciated, here is my code:

@page "/"

@inject IJSRuntime jsRuntime

@using BrowserInterop.Extensions

@using BrowserInterop.Geolocation

<PageTitle>Map</PageTitle>

<div style="margin: 0; padding: 0; width: 100%; height: 100vh;">

    @if (users != null && users.Count > 0)

    {

        <SfMaps Height="100%" Width="100%">

            <MapsCenterPosition Latitude="@users[0].Latitude" Longitude="@users[0].Longitude"></MapsCenterPosition>

            <MapsZoomSettings Enable="true" ZoomFactor="13" EnablePanning="true"></MapsZoomSettings>

            <MapsLayers>

                <MapsLayer UrlTemplate="https://mt.google.com/vt/lyrs=m&x=tileX&y=tileY&z=level" TValue="string"></MapsLayer>

                <MapsMarkerSettings>

                    <MapsMarker Visible="true" DataSource="users" Height="25" Width="15" TValue="User">

                    </MapsMarker>

                </MapsMarkerSettings>

            </MapsLayers>

        </SfMaps>

    }

    else

    {

        <p>No user data</p>

    }

</div>

@code {

    private BrowserInterop.Geolocation.WindowNavigatorGeolocation geolocation;

    private BrowserInterop.Geolocation.GeolocationPosition geolocationPosition;

    public List<User> users = new List<User>(); // Create a list to store User objects

    protected override async Task OnInitializedAsync()

    {

        var window = await jsRuntime.Window();

        var navigator = await window.Navigator();

        geolocation = navigator.Geolocation;

        // Call the GetLocation method when the component is initialized

        await GetLocation();

    }

    public async Task GetLocation()

    {

        geolocationPosition = (await geolocation.GetCurrentPosition(new BrowserInterop.Geolocation.PositionOptions()

            {

                EnableHighAccuracy = true,

                MaximumAgeTimeSpan = TimeSpan.FromHours(1),

                TimeoutTimeSpan = TimeSpan.FromMinutes(1)

            })).Location;

        // Create a User object and set its Latitude and Longitude

        var currentUser = new User

            {

                Latitude = geolocationPosition.Coords.Latitude,

                Longitude = geolocationPosition.Coords.Longitude

            };

        // Add the User object to the user list

        users.Add(currentUser);

    }

    public class User

    {

        public double Latitude { get; set; }

        public double Longitude { get; set; }

    }

}



[Indumathi Ravi]

Hi Conor,

We can see from the provided code snippet that the "MapsLayer" tag is closed before adding the "MapsMarkerSettings" tag. The "MapsMarkerSettings" tag is a child of the "MapsLayer" tag. So you've encountered an exception in your application. To resolve the reported issue, we must insert the "MapsMarkerSettings" tag inside the "MapsLayer" tag, and the markers will be rendered in the Maps component. Please see the code snippet below.

Code Snippet:

@using Syncfusion.Blazor.Maps;

<div style="margin: 0; padding: 0; width: 100%; height: 100vh;">

    @if (users != null && users.Count > 0)

    {

        <SfMaps Height="100%" Width="100%">

            <MapsCenterPosition Latitude="@users[0].Latitude" Longitude="@users[0].Longitude"></MapsCenterPosition>

            <MapsZoomSettings Enable="true" ZoomFactor="13" EnablePanning="true"></MapsZoomSettings>

            <MapsLayers>

                <MapsLayer UrlTemplate="https://mt.google.com/vt/lyrs=m&x=tileX&y=tileY&z=level" TValue="string">

                    <MapsMarkerSettings>

                        <MapsMarker Visible="true" DataSource="users" Height="25" Width="25" TValue="User" AnimationDuration="0">

                        </MapsMarker>

                    </MapsMarkerSettings>

                </MapsLayer>

            </MapsLayers>

        </SfMaps>

    }

    else

    {

        <p>No user data</p>

    }

</div>

 

@code {

    public List<User> users = new List<User>();

    protected override async Task OnInitializedAsync()

    {

        await GetLocation();

    }

 

    public async Task GetLocation()

    {

        var currentUser = new User

            {

                Latitude = 49.95121990866204,

                Longitude = 18.468749999999998

            };

        users.Add(currentUser);

    }

    public class User

    {

        public double Latitude { get; set; }

        public double Longitude { get; set; }

    }

}

 

You can find the sample from the below link.

https://blazorplayground.syncfusion.com/hjLAWMXCUHzEMUZb

NOTE: We modified the provided code snippet by assigning mock-up values to the "Latitude" and "Longitude" properties in the "MapsCenterPosition" and the "DataSource" property in the "MapsMarkerSettings" to make it runnable.

Please see the screenshot for the sample code above.

Please let us know if you need any further assistance.