Constant flickering with Leaflet added onto an HTML instrument

[MSFS 2024] Questions & Community Discussions HTML/JS
,
1

Hello everyone,

For my custom EFB, I need to implement the Leaflet map component as it is the one I can use to render the Navigraph layers on. But, no matter what I try, the Leaflet map flickers when rendered in the simulation. This did not happen when I tested integrating the Leaflet component onto an HTML instrument in MSFS 2020. This flicker only occurs in MSFS 2024. The video below demonstrates the issue.

I do not know if the flickering has to do with Coherent or with the way the instrument is rendered or what exactly. I searched EVERYWHERE on the internet trying to find a feasible solution but nothing helped at all. Any help or suggestions are appreciated, as this is a blocker issue for me.

Thank you.

Regards,
Carlos Daniel González Gómez
NextGen Simulations

2

You may have seen it, but there’s important clues here:

There are multiple potential workarounds :

  • downgrade the Leaflet library. I use 1.8.0, 1.9.3 is reported ‘working’ also

  • disable the ‘mix-blend-mode’ entry in leaflet CSS (I haven’t actually tried that, as the flickering stopped when I downgraded)

  • temporarily turn off your ‘marker’ rendering to see if that is related (my using canvas markers for airports causes stutters, I resolved that by only drawing the couple of airports on the flight plan)

  • change framework to openlayers (I tried that, but had a steep learning curve getting the framework to render tiles at their native resolution rather than scaling them which caused blurring)

I haven’t checked lately (my nav gauges are finally running smoothly) but the html/js performance in MSFS2024 was much lower than in MSFS2020 (by maybe 3x) and any moving map was the prime target for a performance hit. That might have improved by now.

2 Likes
3

Had a lot of success with openlayers.

It’s a complicated system but once it works, it’s pretty powerful and performant.

1 Like
4

Hello @B21 and @runshotgun ,

Thank you guys for your responses. Honestly, I was unaware of the post @B21 talked about at the beginning; if I have searched correctly throughout the forums, I would not have posted this. My bad. :man_facepalming: Anyway, I downgraded to Leaflet 1.9.3, when I was in 1.9.4, and used the CSS fix, this cured the problem.

Case closed! Thank you guys once again!

Regards,
Carlos Daniel González Gómez
NextGen Simulations

2 Likes