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:
this is what I get:
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
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
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