How to Create and Initialize a Synthetic Vision Map in MSFS?

AlexPrimeLime · January 14, 2025, 7:54pm

Hello everyone,

I’m trying to create and initialize a synthetic vision map in Microsoft Flight Simulator (MSFS). I came across this GitHub repository that contains a code example for the G1000 Synthetic Vision System:

github.com

microsoft/msfs-avionics-mirror/blob/673b468d7d13d7faafc27aee53a40bf801d64495/src/workingtitle-instruments-g1000/html_ui/PFD/Components/FlightInstruments/G1000SynVis.tsx#L131


      
              this.horizonRef.instance.update(planeState);
            }
          }
          
          /**
           * Renders the syn vis component.
           * @returns A component VNode.
           */
          public render(): VNode {
            return (
              <div class="synthetic-vision" ref={this.containerRef}>
                <SynVisComponent
                  bingId={this.props.bingId}
                  resolution={this.props.resolution}
                  earthColors={ArraySubject.create(this.createSVTEarthColors())}
                  skyColor={Subject.create(BingComponent.hexaToRGBColor('0033E6'))}
                />
                <HorizonCompass ref={this.horizonRef} />
              </div>
            );
          }

However, I’m having trouble understanding how to properly set it up and initialize it in my project. Could someone explain the process or provide a step-by-step guide on how to implement this?

Any advice or insights would be greatly appreciated.

Thank you!