skip to Main Content

I am currently testing the openstreetmap integration uing syncfusion
Looking at their documentation => https://blazor.syncfusion.com/documentation/maps/providers/openstreetmap

I tryed running this code:

@using Syncfusion.Blazor.Maps

<SfMaps>
    <MapsZoomSettings ZoomFactor="4"></MapsZoomSettings>
    <MapsCenterPosition Latitude="29.394708" Longitude="-94.954653"></MapsCenterPosition>
    <MapsLayers>
        <MapsLayer UrlTemplate="https://tile.openstreetmap.org/level/tileX/tileY.png" TValue="string">
            @* Add marker *@
            <MapsMarkerSettings>
                <MapsMarker Visible="true" Height="25" Width="15" DataSource="Cities" TValue="City">
                </MapsMarker>
            </MapsMarkerSettings>
            @* Add navigation line *@
            <MapsNavigationLines>
                <MapsNavigationLine Visible="true" Color="blue" Angle="0.1" Latitude="new double[]{34.060620, 40.724546}"
                                    Longitude="new double[]{-118.330491,-73.850344}">
                </MapsNavigationLine>
            </MapsNavigationLines>
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@code{
    public class City
    {
        public double Latitude { get; set; }
        public double Longitude { get; set; }
        public string Name { get; set; }
    }
    private List<City> Cities = new List<City> {
        new City { Latitude = 34.060620, Longitude = -118.330491,  Name="California" },
        new City{ Latitude = 40.724546, Longitude = -73.850344,  Name="New York"}
    };
}

This is what they have:

their render

this is what I get:

my render with no markers

I do not have any crash report, neither in my Visual Studio, neither in the web console.

Also, trying their second exemple (Enable zooming and panning)
I am not able to zoom or pan the map

Any idea of what I do wrong? Thx

2

Answers


  1. Chosen as BEST ANSWER

    Ok I found out that I needed to add two lines of parameters in my _Layout.cshtml

    As explained here: https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio


  2. Upon analyzing the provided code snippet, we observed that markers are declared in your application with animation enabled by default. It appears that the script file "syncfusion-blazor.min.js" is not referenced in your application, which is necessary to enable client-side features such as animation, marker clustering, zooming, panning, and others in the component. The markers will be visible after adding the script file reference to your application. Please see the code for the same below.

    Code Snippet:

    [_Host.cshtml]

    You can find the sample for demonstration at the link below.

    https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp31318184183

    You can see the UG documentation at the link below for further reference.

    https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search