Issue with Maps in Dialog boxes (MudBlazor)

[alainstucki]

Hi,

i'm displaying a map in a closable dialog (MudBlazor / https://mudblazor.com/components/dialog#usage).
The first time everything works fine:

The blue and the yellow polyline are visible and the map can be zoomed and moved around.

After close the dialog and open it again, the yellow track is missing:

The other issue is that somtimes the line are not "glued" to the map. if i zoom in or out or move the map around, the lines stay where they are:

it's supposed to look this way:

the tracks get added this way:
public async Task OnAfterMapLoaded(RealTimeMap.MapEventArgs args) { await args.sender.Geometric.DataFromGeoJSON.addObject(_track); await args.sender.Geometric.DataFromGeoJSON.addObject(_originalTrack); }

<RealTimeMap @ref="_map" height="660px" width="820px" Parameters="_parameters" OnAfterMapLoaded="@OnAfterMapLoaded"></RealTimeMap>

_parameters = new RealTimeMap.LoadParameters { location = new RealTimeMap.Location() { latitude = _trip.RawPositions.OrderBy(p => p.Timestamp).First().Latitude, longitude = _trip.RawPositions.OrderBy(p => p.Timestamp).First().Longitude }, zoomLevel = 11, };

Best,
Alain

[ichim]

Hello sir,

The RealTimeMap behavior is unusual. You could check the status of the div in which the map is displayed? (right click on RealTimeMap and select Inspect).

If everything seems fine, I will try to put a RealTimeMap on MudBlazor!

[alainstucki]

That all looks fine too me. There are also no javascript errors in the console. the only thing i noticed on the first load i get 2 debug messages (as expected):

the second time only 1 appear:

the div from the dialog and map also get removed properly when the dialog close.

what i also noted, but i think it is not related, every time the dialog open, the leaflet js/css gets added again to the DOM

Update: i just noted if the second track not get loaded and i zoom the card, i see a javascript error

[ichim]

Hello sir,
Sorry for console messages! :(
I will try to use a MudBlazor to see where the inappropriate display could be coming from...I don't think I will be able to understand what happen about until I put the component on MudBlazor!

[alainstucki]

Thanks a lot!

[ummerland]

Thanks for your great map, i really love using it.

Here i created a Repository to showcase this issue: https://github.com/ummerland/LeafletMudBlazorDemo

I think there are two test cases here:

• When opening the modal for the first time, the polygon is drawn nicely
• When closing it (whilst staying in the same circuit livecycle) and reopening it, it stops drawing the polygon
• When hitting F5 or refreshing the page (effectively creating a new circuit) the map starts rendering the polygon again.

This also applies to page changes:

• When navigating to the /modal page (this is the same component as the modal above) it works the first time
• When navigating to home / and back to /modal it has stopeds rendering the polygon

I noticed, that in polygon.js, the variable displayPolygonLayerGroup is checked for NULL. The first time it branches to execute
displayPolygonLayerGroup = r.featureGroup().addTo(l);. Could this be the issue?

Thanks for your help.

[negberts]

I have the same issue. Even the demo page at https://github.com/ichim/LeafletForBlazor-NuGet/blob/main/RTM%20Polygons%20from%20Array/RTM%20Polygons%20from%20Array/Pages/Index.razor doesn't work. It just doesn't show any polygons. And I do have MudBlazor in my project.

However, when I clone your repository everything works fine, and even after adding MudBlazor it still works.

To be fair, my project is a MAUI Hybrid project and not a ASP.NET Core Blazor project, so maybe that's the problem?

Edit: just created a dummy MAUI Hybrid project and just added the demo page to it and it does NOT work. So apparantly DisplayPolygonsFromArray does not work on hybrid apps?

[negberts]

I've got the following error without adding a symbol:

SyntaxError: Unexpected number in JSON at position 6 (line 1 column 7)
at JSON.parse ()
at _addPolygonsArrayToMap (https://0.0.0.1/_content/LeafletForBlazor/RealTime/geometry/polygons.js:1:363)
at Module.addPolygonsArrayToMap (https://0.0.0.1/_content/LeafletForBlazor/RealTime/Map.js:1:7309)
at https://0.0.0.1/_framework/blazor.webview.js:1:2891
at new Promise ()
at y.beginInvokeJSFromDotNet (https://0.0.0.1/_framework/blazor.webview.js:1:2848)
at External.__callback (https://0.0.0.1/_framework/blazor.webview.js:1:47076)
at MessagePort. (:23:21))

• Unexpected number in JSON at position 6 (line 1 column 7)
  SyntaxError: Unexpected number in JSON at position 6 (line 1 column 7)

With a PolygonSymbol (new RealTimeMap.PolygonSymbol() { color = "orange", fillColor = "yellow", weight = 2, opacity = 0.4, fillOpacity = 0.4 })

the error is:
Expected double-quoted property name in JSON at position 30 (line 1 column 31)
SyntaxError: Expected double-quoted property name in JSON at position 30 (line 1 column 31)
at JSON.parse ()
at _setCurrentSymbol (https://0.0.0.1/_content/LeafletForBlazor/RealTime/geometry/polygons.js:1:206)
at Module.setCurrentSymbol (https://0.0.0.1/_content/LeafletForBlazor/RealTime/Map.js:1:7374)
at https://0.0.0.1/_framework/blazor.webview.js:1:2891
at new Promise ()
at y.beginInvokeJSFromDotNet (https://0.0.0.1/_framework/blazor.webview.js:1:2848)
at External.__callback (https://0.0.0.1/_framework/blazor.webview.js:1:47076)
at MessagePort. (:23:21)

[ichim]

Hello sir,
I will check this issue!