Map not rendering when using MVVM architecture

[Pavel lavi]

Hi,

Fist, sorry for poor explanation, im a noob when it comes to frontend.

The Issue:

Once added mvvm, sfmap is not rendering, not responding - zoom, navigate, MapsZoomToolbarButton.

Also, map height/width configuration not applied at the browser view.

During this time, all other components work ok.

Reproduction:

1. use this repo for blazor mvvm -  IntelliTect-Samples/blazor-mvvm at 4ac1349b91a8e6e7514bc05e753832ab55e21953 (github.com)
2. Add the following code to Client.Index.razor (with maps nuget)

<SfMaps Height="700" Width="350">
    <MapsZoomSettings Enable="true" MaxZoom="20" ZoomFactor="9">
        <MapsZoomToolbarSettings>
            <MapsZoomToolbarButton ToolbarItems="new List<ToolbarItem> { ToolbarItem.Zoom, ToolbarItem.ZoomIn, ToolbarItem.ZoomOut, ToolbarItem.Pan, ToolbarItem.Reset }"></MapsZoomToolbarButton>
        </MapsZoomToolbarSettings>
    </MapsZoomSettings>
    <MapsLayers>
        <MapsLayer UrlTemplate="https://tile.openstreetmap.org/level/tileX/tileY.png" TValue="string">
        </MapsLayer>
    </MapsLayers>
    <MapsCenterPosition Latitude="41.11016" Longitude="-8.58292"></MapsCenterPosition>
</SfMaps>

Expected Result:

Map can be used, moved, zoom, navigate

Actual Result:

Map is "frozen", like something blocking its rendering

[Indumathi Ravi]

Hi Pavel,

We are unable to reproduce the reported issue in the provided MVVM application with Maps component. We suspect that the script file "syncfusion-blazor.min.js", may be not referred in your application and so, you are facing with the reported issue. Please refer the script file in the application's "index.html", which is placed in the "wwwroot" folder. This resolves the reported issue, and the Maps component will work as expected. Please find the code snippet for the same below.

Code Snippet:

[index.html]

<script src=https://cdn.syncfusion.com/blazor/22.1.38/syncfusion-blazor.min.js type="text/javascript" />

NOTE: The version of the "syncfusion-blazor.min.js" script file must be same as the version of the Blazor component package.

Meanwhile, we have created a video, when we tried to reproduce the reported issue and it can be found below for your reference.

Sample -  https://www.syncfusion.com/downloads/support/directtrac/general/ze/blazor-mvvm-707894708

Video -  https://www.syncfusion.com/downloads/support/directtrac/general/ze/maps-95747445

If you are still facing the reported issue, please modify the above sample and share it to us. It will be helpful for us to analyze and assist you better.

[Pavel lavi]

you are correct, thanks!

i guess i forgot to add this when switched projects.

sorry for the newbie support case, thanks again

[Jayashree Suresh Anand]

Hi Pavel,

You're welcome. Please get back to us if you need any further assistance. We will be happy to help you.

Regards,

Jayashree