Not working for .NET 8.0?

[marzman95]

I'm searching for a suitable way to display an OSM map on a card (bootstrap element). I've previously used Leaflet.js, so I tried to use LeafletForBlazor.

After consulting the readme of the project I imported the package using NuGet, I added @using LeafletForBlazor to my _Imports.razor-file and added a <RealTimeMap>-component to the home page, including the stated code. For some reason, no map was showing.

To be sure that is has nothing to do with my project, I created a blank Blazor project in Visual Studio to try out this library. However, using the provided example in the readme-file still did not display any map.

When looking through the repository I saw the AddMapToBlazorPage-example. I thought to try this as well, as nothing was shown using the <RealTimeMap>-example that is on top of the readme/manual.

Unfortunately, also this example does not seem to work. I added

<Map width="600px"
height="400px"
Parameters="@parameters"></Map>

and

	//map initialization parameters
	Map.LoadParameters parameters = new Map.LoadParameters()
		{
			location = new Map.Location()
			{
				longitude = 26.097133,
				latitude = 44.446165
			},
			zoom_level = 12
		};

to the Home.razor -file. Still, no map is displayed as you can see in the screenshot:

Note that a <div> with id set to "map" is generated. But no OSM-map is being displayed.

Did I miss something while copy-pasting the examples into my (or template) project? Are the examples outdated? Or is the package not updated for usage in .NET 8.0?

[ichim]

Hello sir,
Map component is deprecated. Please use RealTimeMap blazor component.
Yes, can be used with .NET 8.

[marshal-00]

Hi, seeing a similar issue again with .NET 8.0.

Fresh blazor project.

1. Add package via nuget
2. Import via _Imports.razer
3. Add to a page using ""
4. Empty white box

EDIT: The issue seems to be with .NET 8.0, reverting back to 7.0 works perfectly.

[Aadlei]

Yeah not working for me with .NET 8.0 either

[marshal-00]

Using an example file, if you then the project to .NET 8.0 it works. However using a fresh project running with NET 8.0 a blank white box is drawn.

[Aadlei]

@marshal-00 Did you start a project in 7.0 and then port it to 8.0 which made it work? Or what do you mean by example file?

[marshal-00]

@Aadlei If you get one of the example projects supplied on the repo, then change the .NET version to 8.0 the map loads and displays correctly, however this is on an old template.

[Aadlei]

@ichim Just for information I am using Blazor Server in my example, and have not seen any errors in the console both on the page and on the application.
Although I do see dependencies towards .net 7.0 on the nuget package, and not .net 8.0.8 (Microsoft.AspNetCore.Components.Web) which is on a different package I have. Maybe there is something that has become deprecated from 7.0 -> 8.0 that causes this issue? Would it help to set the dependencies to the newest?

[Aadlei]

@marzman95 @marshal-00

I dug around and I solved my issues.
The problem seemed to stem from the fact the InteractiveServerRenderMode was set to true in prerender, when i set this manually to false it actually started rendering as it should. How I came to this conclusion? I tried the google maps for blazor and had the exact same problem, and after digging around, someone mentioned to set the render mode to false.

So in the code, below the page and above the components on the page, write:
@rendermode @(new InteractiveServerRenderMode(prerender: false)) (EDIT: It seems to work if you set it to true as well, such a strange issue...)
After that, you have to restart the application, and then it should render as it should've done from the start.
Now, I don't know what limitations this will cause the map, but it does solve the problem atleast somewhat.

If this works for the others, then i recommend putting it on the repo description to avoid further confusion and frustration.

[marshal-00]

@Aadlei Thats done the trick, disabling preredering fixes the issue!

Great find!

[kaua-alves-queiros]

@Aadlei This worked for me in the same context. tanks

[Aadlei]

To further expand on the solution, you can set prerender to true. The issue is the actual render mode in these templates. So you can actually just go to App.razor and replace <Routes /> with:
<Routes @rendermode="InteractiveServer"/>
I recently had an issue where the same issue that caused the maps to not work, affected a simple Switch that was put on MainLayout (because of the render modes).

So the reason why @rendermode @(new InteractiveServerRenderMode(prerender: false)) worked, was that it forced a change on the render mode to InteractiveServer instead. I have seen many others with different types of issues because of .NET 8.0, so keep this in mind.