Built-in Chart Providers

Introduction

The sim includes two built-in chart providers: LIDO and FAA. LIDO provides worldwide charts, primarily for larger airports that host airline operations. FAA provides charts for a more comprehensive set of airports in the United States and its Caribbean territories.

Chart data from the built-in providers can be accessed from the sim using several classes provided by the SDK.

Retrieving Chart Data using ChartsClient

The ChartsClient class provides several static methods that allow you to retrieve chart data from the built-in chart providers. The data provided by ChartsClient conforms to the general structure defined by the Charts API.

tip

The chart categories used by the LIDO and FAA providers are enumerated in LidoChartType and FaaChartType, respectively.

Use getIndexForAirport() to retrieve chart indexes for specific airports and getChartPages() to retrieve chart page data for specific charts. When specifying the provider (LIDO or FAA) from which to get data, use the BuiltInChartProvider enum.

import { BuiltInChartProvider, ChartsClient, ICAO, LidoChartType } from '@microsoft/msfs-sdk';

// Get the chart index for KSEA from LIDO.
const chartIndex = await ChartsClient.getIndexForAirport(ICAO.value('A', '', '', 'KSEA'), BuiltInChartProvider.Lido);

// Get chart page data for the first listed chart in the index.
const chartPages = await ChartsClient.getChartPages(chartIndex.charts[0].charts[0].guid);

If a data retrieval operation fails, the Promises returned by getIndexForAirport() and getChartPages() will reject with an error code describing what went wrong.

tip

SimChartService wraps the functionality provided by ChartsClient in a form that implements the ChartService interface.

Retrieving Chart Images using ChartView

ChartView can be used to display images for built-in charts. ChartView implements the ChartImageSupplier interface. As such, it works by providing chart image URLs for chart page URLs specified using its showChartImage() method. The image URLs can be referenced to load and display chart images - for example using an <img> element.

Before a ChartView can retrieve image URLs, it needs to be initialized using ChartsClient.

import { ChartsClient, ChartView } from '@microsoft/msfs-sdk';

const view = new ChartView();
await ChartsClient.initializeChartView(view);

// Now the view is initialized and ready to retrieve chart image URLs.

Once a view is initialized, subscribe to its image property to access the most up-to-date image URL for the latest chart page URL requested through showChartImage(). The following code shows an example of how to use ChartView and a display component to display chart images.

import {
  ChartUrl, ChartView, ComponentProps, DisplayComponent, FSComponent, VNode
} from '@microsoft/msfs-sdk';

class ChartDisplay extends DisplayComponent<ComponentProps> {
  private readonly view = new ChartView();

  public onAfterRender(): void {
    ChartsClient.initializeChartView(this.view);
  }

  public setPageUrl(url: ChartUrl): void {
    this.view.showChartImage(url.url);
  }

  public render(): VNode {
    return (
      <img src={this.view.image.imageUrl} />
    );
  }

  public destroy(): void {
    this.view.destroy();

    super.destroy();
  }
}