IMPORTED AIRCRAFT - HTML5/JS Maps do not show airspaces, airport symbols and other symbols

Version: 1.0.72.0

Frequency: Consistently

Severity: Low

Marketplace package name: Tornado, F-35

Context: Tornado, imported with drag and drop in the Community folder

Bug description: HTML 5/JS maps on imported aircraft do not show the same symbology as in MSFS2024. In particular, airspaces do not show.

Repro steps:
MSFS2020 - start from the runway, go to the backseat and see the map in the circular display (RPMD)

MSFS2024 - start form the runway - INITIALIZATION SCRIPTS fail in msfs2024, so you will have to turn on the RPMD - check the map, you will see there are no airspaces.

Same issue on the F-35 (map mode is in the TSD screen) - but given that XML graphics do not work in MSF2024 at the moment, it is more difficult to toggle it.

Attachments:

TORNADO backseat in MSFS2020 - airspaces are displayed:

TORNADO backsseat in MSFS2020 - airspaces not shown:

Hello,

What method is the JS code using to get airspaces/navaids/airports and display them?

Thanks,
Matt

None. Just set the airspaces to be visible in the map configuration - this only works on integer zoom settings but works consistently on MSFS 2020.

Hello,

I guess my question here is if you have an example of how your JS map code is reading and displaying airspaces. Without that it’s hard to tell what the issue could be.

Thanks,
Matt

Hi Matt

Thanks for looking into this.
As per my initial message, the Tornado RPMD uses a “regula” map in MSFS without any additional element drawn on top.
What we have found is that if we enable airspaces in MSFS2020, they render in the map screen - only if the “zoom” is an integer number.

Here is the gauge - but most likely does not run without L: variable for the Tornado.
This is used only in the Tornado backseat. We have a similar element in the latest F-35 version (1.3.8).

TornadoMap.zip (41.6 KB)

Just in case my feedback was unclear:
In certain conditions, there is actually NO NEED to load and “display” the airspaces in MSFS2020.
Just enabling them in the map configuration (regular MSFS2020 map) does the trick - but only if the zoom level is an integer number.

Maybe this was unintentional, but it works in MSFS2020.

1 Like

Hello,

Can you point to in the MSFS 2020 SDK documentation what you’re referring to as a regular map? Perhaps that would give me a better starting point as to what part of the SDK you’re using.

Thanks,
Matt

1 Like

Hi Matt - everything we use is in the .zip attached to the message above:

What we do is simply to create a map-instrument in the HTML (see the html in the zip) with show-airspaces=“true”.
Then as long as the map range is an integer, the airspace shows (see the initial picture).
No additional code - no drawing JS element to top.

Hello @Scimmia1974,

Does this issue persist in the current dev alpha build?

Thanks,
Matt

Hi Matt
It seems partially fixed - I can see upper airspaces and flight plan symbology.
On MSFS however, other symbols are also displayed (Tacan, airport symbols and other things).
I think the situation is acceptable for our users, but it is not exactly the same as MSFS.
Now that XML on the F-35 works again, the easiest verification is to:

  • start a flight on the F-35
  • in any of the “portals” of the PCD, press the top left corner to access the menu and select TSD1.
  • in the TSD1 page, select MAP

This is the display in MSFS2020 (Edwards AFB):

This is the display in MSFS2024 (Same airport and zoom factor):

I’m afraid this issue is still present today @MattNischan, and it relates to the following:

  1. Yes, you’ve enabled the FS9 variables for compatibility with JS and the MapInstrument element.

  2. However, you’ve likely enabled it partially because:

  • It’s possible to view a flight plan through the map.

  • Airspaces are visible.

  • The rest of the elements are not visible: airports, traffic, VOR stations, Tacan, and everything else.

Let me give you a very simple example, as this issue affects aircraft like the F-18, which is not based on the WT APIs:

In MSFS2020 (we can see everything and note AMR is a VOR station):

In MSFS2024 (we can see FPlan and Aispaces but not VOR stations for example):

As I mentioned before, some of us continue to base our work on the FS9 APIs and have no intention of migrating to TypeScript just because we cannot view elements on a map, especially when it works perfectly in MSFS2020.

You emphasize that we should use the new APIs, but it’s impossible for us to learn a new language in such a short time just to solve a specific and frankly ridiculous problem like this one, a problem that even exists in a stock aircraft like the F-18 which screens are based in FS9 API and not WT.

If there were a way to use part of the new avionics suite API in a JS project, that would be great, but you’ve made it TypeScript-only. And any WT msfssdk.js file we open contains 30,000–70,000 lines of code, making it practically impossible to navigate and solve an issue that you’ve created by disabling these variables.

I would appreciate it if you fully re-enabled these variables so we can do our work.

And let me remind you that a percentage of our sales goes to you (Microsoft/Asobo). The least you can do is make our work easier because, in the end, you’re indirectly causing harm to yourselves.

Thank you.

1 Like

I couldn’t agree more.

Maybe at some point in MSFS2024 we’ll end up with stable nav api’s (including a supported map element) we can rely upon across all the programming frameworks but the outlook is far from clear.

The code for FS9GPS was restored completely and is line for line identical to MSFS 2020. There may be other engine related changes that are preventing some variables from working completely, but we will have to investigate.

The recommended map element to use is available here: msfs-avionics-mirror/src/sdk/components/mapsystem/MapSystemBuilder.tsx at 673b468d7d13d7faafc27aee53a40bf801d64495 · microsoft/msfs-avionics-mirror · GitHub

MapSystem and friends have been available and stable for over 3 years now. We have a number of examples of its usage as well available in the framework repository. This map system uses standard JS_LISTENER_FACILITY APIs, and is much more optimized than the unsupported MapInstrument.js, for the best possible map performance with the smallest possible impact.

Thanks,
Matt

1 Like

thanks but that github repo’s all in typescript though?

Two questions:

  1. Can take my html/js nav instrument derived from BaseInstrument and incorporate that map? I’m assuming the instrument needs to call some ‘init()’ code for the map and probably a derivative of ‘update()’.

  2. is there a ‘signature’ for that map object so it’s clear how to flip it to north up, zoom in/out etc?

From a html/js standpoint I’m guessing adding the map is only a few lines of code so that’s the example I’d really need. If that’s never been done then fair enough, that’ll be a good thing to be clear on.

That is the problem, that they have done everything in TS, there is no project that they have where they combine html/js (for example
handling of svgs for graphical interface) with TS (to place the map in the background or SVS or EVS).

That is to say, the solution is to get into some current closed project of 70,000 lines of code and reverse engineer it and see if, in some way, you convert a Garmin into something else (And with a little luck, your users won’t ask you why a simple gauge that contains a map has all the interface of a g3000, or a 737max).

This is what I mean. Please can you explain to me what I do with a file of 1500 lines of code, since there is no where to get it because there is nothing modular in it?

This has been developed, by and for the people who have developed it, and to apply it in their projects. But nothing more, not so that others can integrate it into their projects (In other words, if this were encrypted I wouldn’t visually notice the difference). Specially if its done in JavaScript

Surely, and I do not deny it, it is very simple for you since you have developed it with a team of several people and you surely understand its logical structure.
Let there be no doubt that the rest of us don’t understand it and we would be importing files with several lines of code without understanding how they work and without knowing if they are necessary or not.

That is, do you have any useful example where I can take and call “your optimized super map of 1500 lines of code” (which I don’t doubt is optimized at all so don’t consider the quotes as sarcasm) from a javascript project?

Instead of sending us to an sdk with an entire ts project:

Or will it be easier for everyone to investigate why you have left the FS9-based maps without functionality? and that those of us who work in Javascript are not obliged to have to learn TS, and can we coexist?

can you work on restoring the functionalities that allowed us JavaScript developers to keep working in JavaScript without having to imperatively adopt TypeScript, so everyone can be happy and in harmony?

Or practical examples in JavaScript where we can see the use of JS_LISTENER_FACILITY API that have absolutely nothing to do with TS?

I’m not following this line of logic. TypeScript is simply a superset of Javascript. Valid Javascript is valid TypeScript. We combine HTML and TS all the time. In fact, the MSFS Avionics Framework combines it directly.

Either way, you can use the React-like JSX/TSX to write HTML directly in your components, or you can easily render them to a pre-existing HTML element with just one line:

FSComponent.Render(someComponent, document.querySelector('#myDiv'));

Happy to explain, absolutely! The MSFS Avionics Framework uses your standard web stack tooling, which should be familiar to most developers who has used HTML/JS/TS in the last 15 or so years. As such, you can use NPM to download the framework, import the standard ES modules into your own project, and then your bundler of choice (such as Webpack, Parcel, Rollup, etc) to package it into just the JS that is required. The entire framework was built specifically to be consumed by other developers; so that it would be easy to use by the many folks familiar with the modern JS or TS standard build and project tooling, and with common very popular web frameworks like React.

Instructions for using NPM to download the framework are available in the framework documentation: Setting Up Your Environment | MSFS Avionics Frameworks and Instruments

If you need some pointers on getting your footing in the modern JS toolchain, Josh Carvel has a great two parter here that also has a ton of great links: Understanding JS Build Tools (Part 1: Modules and Packages) - DEV Community

Here’s a quick one that puts together a basic map:

import { EventBus, MapSystemBuilder } from "@microsoft/msfs-sdk"

var bus = new EventBus();

//Create a map with a 1024x1024 size and a standard Bing terrain map with
//display of nearest waypoints which follows the aircraft position automatically
var compiledMap = MapSystemBuilder.create(bus)
  .withProjectedSize([1024, 1024])
  .withBing('some-map-id')
  .withNearestWaypoints(() => {})
  .withFollowAirplane()
  .build();

FSComponent.render(compiledMap.map, document.querySelector('#nav-map'));

Adopting TS is not required in order to use the MSFS Avionics Framework, as it is provided as standard ES modules. The framework is the officially supported SDK for the HTML/JS stack.

Thanks,
Matt

1 Like

The compiled JS without type annotations is even viewable on the code tab on NPM @microsoft/msfs-sdk - npm. It’s a lot harder to work without type information though
 The generated documentation might help in that regard: @microsoft/msfs-sdk v2.0.5 | MSFS Avionics Frameworks and Instruments

Thank you for your response. However, it doesn’t fully address our concerns or solve the problem we’re facing. Let me break it down:

“TypeScript is simply a superset of JavaScript”
— While that’s technically true, it misses the main point. The issue is not whether TypeScript can coexist with JavaScript, but that integrating a 1500-line TSX file without clear modularity into a pure JavaScript project is a monumental and, frankly, unnecessary task.

“You can use JSX/TSX to write HTML directly in your components”
— This underestimates the complexity of the environment we work in. While it’s possible to render TSX elements, we are not looking to rebuild our architecture to accommodate this approach. We need a practical and simple solution that works with what we already have.

Focus on NPM and modern tools
— For many developers, setting up NPM and tools like Webpack or Parcel isn’t an issue. However, the real obstacle here is conceptual and structural. It assumes we can simply adopt this modern stack, but in reality, our current workflow is based on pure JavaScript, and switching to TypeScript—even if not mandatory—adds unnecessary overhead to something that should be straightforward.

The claim that adopting TS is not required
— You state that TypeScript isn’t required, but the example provided relies on TSX, JSX, and FSComponent. This still creates a barrier because adapting this to pure JavaScript is highly complex without a deep understanding of how everything works behind the scenes.

The Key Issue:

The problem lies in the fact that MapInstrument worked perfectly in MSFS2020, and now it doesn’t in MSFS2024. We, as developers, are now forced to look for alternatives because of the decision to remove support for FS9 variables. While you mention these variables have been restored, the issues with mapinstrument persist.

Without a solution, many of us will continue developing projects for MSFS2020 that won’t be compatible with MSFS2024, simply because a working feature was removed.

The Challenges With Your Proposed Solution

Your documentation and approach require far more additional steps to achieve something as basic as rendering a map. For instance, even the example you provided:
FSComponent.Render(someComponent, document.querySelector(‘#myDiv’))

requires installing frameworks, configuring modern tools, and reworking our projects to accommodate an entirely new architecture. This is neither practical nor accessible for developers currently working in JavaScript-only environments.

Please understand that we are not rejecting modern tools or resisting change, but your proposed solution doesn’t fit the context of our current workflows. For those of us working in pure JavaScript, it creates more barriers than solutions.

What We’re Asking For

  • Fix MapInstrument and FS9 problems related:
    All we’re asking for is to restore something that already worked in MSFS2020 without requiring a complete restructuring or the adoption of new tools.

  • Provide a Pure JavaScript Alternative:
    If the intention is to phase out mapinstrument, please provide a documented and functional alternative in pure JavaScript. Something modular, easy to use, and as simple as FS9 variables, without requiring frameworks or complex configurations.

  • Simplify the Process:

We need a practical solution that works with existing projects, not one that requires setting up new infrastructure.

To summarize: This is not about resisting TypeScript or modern tools; it’s about finding a solution that works for the context we’re in. We’re not looking to rebuild our entire environments just to make a map work. We’re simply asking for a straightforward and functional solution that allows us to keep working with our current tools and architecture.

Thank you for your understanding, and I hope this clarifies our position.

lol I get the motivation (I’ve spent a lot of time looking at the compilation output of TS code where the original TS isn’t available) but IMHO it really shouldn’t be suggested as a viable dev/debug method for someone that didn’t write the original code. TS can explode into a collossal amount of generic base-level JS, so you can end up with 1,000,000-line JS (we have this in MS, and I’ve stepped through it) where the underlying algorithms would expect maybe 8000.

All of the framework is provided as plain Javascript ES modules. This is a regular, standard feature of modern Javascript, and no Typescript is required.

NPM and tools like Webpack and Parcel are not related to Typescript. Adopting Typescript is not required for the posted example. NPM and bundlers are tools for plain Javascript.

FSComponent is part of the framework and is provided as a plain JS ES module like the rest of the framework. No TSX or JSX is required for the provided example.

A bigger problem is that MapInstrument was not ever an officially supported or documented part of the SDK. It was built for internal consumers and the official JS SDK/API is limited to things like BaseInstrument.js, Coherent.js, and the JS listener calls.

We have been urging developers for a few years to use the Framework, for all the reasons being described in this thread so far: the things like MapInstrument were not built for the purpose of external consumption and therefore don’t really have the same flexibility or support. They have outstanding bugs (that were not important for internal consumers) as well as enormous feature deficits (no ability to actually accurately draw and vectorize an ARINC compliant flight plan with procedures, for one).

On the other hand, the Framework was purpose built to solve all the issues of trying to develop something in JS in the sim: modern modular architecture that doesn’t abuse global scope nor use deprecated features (WebComponents), with a very familiar development paradigm to the greatest number of Javascript and web stack developers.

As already mentioned, we will investigate any regressions in FS9, as there should not be any.

Not to harp on this unnecessarily, but MapInstrument was never phased in to begin with. The MSFS Avionics Framework is the officially supported method by which to implement avionics systems in MSFS, is modular, requires only a single NPM package install and bundler config, and is available as standard plain JS ES modules, which is all standard for any JS project since about 2010. It’s hard to visualize a simpler JS project setup than this.

I understand the position, but please understand that the Framework was expressly created to solve exactly the myriad of issues that end up surfacing in this very thread. While we will continue to investigate FS9GPS (if that is indeed what is breaking), we cannot stress enough that folks should be using the Framework.

I know there’s some chatter here about the Framework being built expressly for Garmins or some other such strange ideas, but truly it was not. In fact, we started with the FSComponent architecture itself, looking at how best we can integrate modern JS and TS paradigms so that the largest possible developer pool would have the best possible chance of success.

And, instead of our avionics (which are far more than just Garmins, to be clear) being the reason for the Framework, it was the other way around: we used them to dogfood the Framework itself, so we could understand where the rough edges were and where it would depart from the expectations of modern web stack developers, all while also keeping in mind the huge performance concerns of the sim environment.

Thanks,
Matt

2 Likes