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');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 |
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 |
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 |
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,
);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,
);