React Map Components for MSFS

Hooks

useImageLoader

The issue with HTMLImageElements is that loading the actual image is an asynchronous task and would make drawing Icons on a canvas layer very difficult. The useImageLoader allows you to preload these elements and pass them as parameters to the Icon component. Once the image is successfully loaded, the state is updated and the image can be drawn on the canvas.

const airplaneIcon = useImageLoader('/Pages/VCockpit/Instruments/a22x/assets/MAP/ND_AIRPLANE.svg');
const airportIcon = useImageLoader('/Pages/VCockpit/Instruments/a22x/assets/MAP/ND_AIRPORT.svg');

Components

CanvasMap

The following is the most basic usage of the CanvasMap component. This will create a Bing map layer that is tied to the aircraft's position and heading. The map will be larger than it's parent container so that the entire container is filled in even when the map rotates.

const [latitude] = useSimVar('A:PLANE LATITUDE', 'Degrees');
const [longitude] = useSimVar('A:PLANE LONGITUDE', 'Degrees');
const [headingTrue] = useSimVar('A:PLANE HEADING DEGREES TRUE', 'Degrees');

return (
    <CanvasMap
        bingConfigFolder="/Pages/VCockpit/Instruments/.../assets/MAP/"
        mapId="MAP"
        centerLla={{ lat: latitude, long: longitude }}
        range={10}
        rotation={-headingTrue}
    />
)

| Name | Type | Default | Description | |------------------|--------------|---------|-------------------------------------------------------------------------| | bingConfigFolder | string | | Path to mapConfig.json file | | mapId | string | | Unique identifier | | centerLla | LatLongAlt | | Latitude and longitude of map's center | | showMap | boolean | true | Show Bing map layer | | range | number | 80 | Distance in nautical miles from map's center to top of parent container | | rotation | number | 0 | Map rotation in degrees |

Icon

The Icon component allows you to place images and text onto the map. An icon can either have text, icon, or both! The icon is locked to a coordinate position so as the map moves around, so does the icon. The component(s) must be included as a child of your CanvasMap component.

const [headingTrue] = useSimVar('A:PLANE HEADING DEGREES TRUE', 'Degrees');
const airportIcon = useImageLoader('/Pages/VCockpit/Instruments/.../assets/MAP/ND_AIRPORT.svg');
const airports = // some array of nearby airports

return (
    <CanvasMap ...>
        airports.map(airport => (
            <Icon
                position={{ lat: airport.latitude, long: airport.longitude }}
                icon={airportIcon}
                iconWidth={21}
                iconHeight={21}
                rotation={headingTrue}
                text={airport.ident}
                textFill="#00AFF0"
                fontFamily="LetterGothic-Bold"
                fontSize={25}
            />
        ))
    </CanvasMap>
)

| Name | Type | Default | Description | |--------------|--------------------|------------|--------------------------------------------------| | position | LatLongAlt | | Latitude and longitude of icon | | rotation | number | 0 | Icon rotation in degrees | | icon | HTMLImageElement | Optional | Preloaded (useImageLoader) image for icon | | iconWidth | number | Optional | Icon with in px | | iconHeight | number | Optional | Icon height in px | | text | string | Optional | Text to display next to icon | | textFill | string | Optional | Text fill color | | textPosition | string | Optional | Text position (top, bottom, left, right) | | fontFamily | string | Optional | Text font family | | fontSize | number | Optional | Text font size |

Geometry

The Geometry component allows you to draw lines and arcs on the map using the GeoPath and GeoArc classes, respectively. The paths are locked to coordinate positions so as the map moves around, so do the paths. The component(s) must be included as a child of your CanvasMap component.

const waypoints = flightPlanManager.getWaypoints();

const routePaths: GeoPath[] = [];
for (let i = 0; i < waypoints.length - 1; i++) {
    routePaths.push(
        GeoPath.pathFromLatLongAlt(
            waypoints[i].infos.coordinates,
            waypoints[i + 1].infos.coordinates,
        )
    );
}

return (
    <CanvasMap ...>
        <Geometry
            geoPaths={routePaths}
            strokeWidth={3}
            strokeColor="magenta"
            outlineWidth={6}
            outlineColor="black"
        />
    </CanvasMap>
)

| Name | Type | Default | Description | |--------------|-------------|---------|------------------------------------| | geoPaths | GeoPath[] | | Array of GeoPath objects to draw | | strokeWidth | number | 1 | | | strokeColor | string | white | | | outlineWidth | number | 1 | Drawn below the stroke | | outlineColor | string | white | Drawn below the stroke |

Classes

GeoPath

The GeoPath object stores two geodesy LatLon objects to represent a geographical line.

class GeoPath {
    start: LatLon; // line start point
    end: LatLon; // line end point
}

There are two ways to create these objects:

const path1 = GeoPath.pathFromLatLongAlt(
    start: LatLongAlt,
    end: LatLongAlt,
);
const path2 = GeoPath.pathFromCoordinates(
    startLat: number,
    startLong: number,
    endLat: number,
    endLong: number,
);

GeoArc

The GeoArc object stores three geodesy LatLon objects and a radius to represent a geographical arc.

class GeoArc extends GeoPath {
    // start and end inherited from GeoPath

    control: LatLon; // arc control point
    radius: number; // arc radius
}

There are two ways to create these objects:

const arc1 = GeoArc.arcFromLatLongAlt(
    start: LatLongAlt,
    control: LatLongAlt,
    end: LatLongAlt,
    radius: number,
);
const arc2 = GeoArc.arcFromCoordinates(
    startLat: number,
    startLong: number,
    controlLat: number,
    controlLong: number,
    endLat: number,
    endLong: number,
    radius: number,
);