Usage
- Initialize the ChartRegistry class with a map.
const chartRegistry = new ChartRegistry(map);
- Auto load everything from ChartX Server (recommended)
await chartRegistry.load("<chartx-server-url>");
tip
The charts must be loaded only after the maplibre map has finished loading. This can be achieved with map.on("load", () => {}) listener
ChartRegistry
The central class to load ENC charts on the map.
Constructor parameters
| Parameter | Type | Description |
|---|---|---|
| map | Map | Maplibre GL JS map instance |
| showBasemap | Boolean | Show or hide default basemap |
| options | ChartOptions | Options to control chart presentation |
Methods
| Method | Returns | Description |
|---|---|---|
| showBasemap() | void | Shows the default world basemap |
| hideBasemap() | void | Hides the default world basemap |
| load(chartxInfo: string | ChartxUrls) | Promise<void> | Auto load ENC charts and other assets from chartx-server |
| loadSprites(spriteUrl: string) | Promise<void> | Load the required sprite sheets for IHO presentation symbols |
| loadChart(chartId: string, tileJsonUrl: string, dsidUrl: string) | Promise<void> | Load a single ENC chart and add it to the map |
| loadCharts(chartsUrl: string) | Promise<void> | Loads and renders all ENC charts available from the chartx-server |
| getChartIds() | string[] | Returns the ordered IDs of all loaded charts |
| setOptions(options: ChartOptions) | Promise<void> | Sets the chart options to control symbology |
| addChart(chartId: string) | Promise<void> | Adds the specified chart to the map if it has not already been added |
| removeChart(chartId: string) | Promise<void> | Removes the specified chart from the map if available |
| showChart(chartId: string) | void | Shows the specified chart by making its layers visible |
| hideChart(chartId: string) | void | Hides the specified chart by making its layers hidden |
| showLayer(layerName: string, chartId?: string) | void | Shows the specified layer by making it visible. When a chart ID is provided, the visibility change is applied only to the layer belonging to that chart |
| hideLayer(layerName: string, chartId?: string) | void | Hides the specified layer by making it hidden.When a chart ID is provided, the visibility change is applied only to the layer belonging to that chart |
| onChartClick(callback: (info: QueryResult) => void) | ChartClickSubscription | Registers a callback to be invoked when a chart feature is clicked. The callback is called with a QueryResult containing information about the selected chart feature. |
| getInfoAtPoint(point: M.Point, snapPixels=10) | QueryResult | Retrieves chart and feature information at the specified map point |
| getInfoAtLngLat(coords: M.LngLat, snapPixels=10) | QueryResult | Retrieves chart and feature information at the specified coordinates |
ChartOptions
Options for controlling chart symbology, visual theme and rendering behavior.
| Property | Type | Default | Description |
|---|---|---|---|
| graphicsStyle | PointStyle | PointStyle.Paper | Graphics style used for point features |
| boundariesStyle | AreaStyle | AreaStyle.Plain | Styling for lines and polygon boundaries |
| displayCategory | DisplayCategory | DisplayCategory.Standard | Display category that controls the level of feature detail |
| theme | ChartTheme | ChartTheme.DayBright | Chart color theme |
| shallowDepth | number | 2 | Depth (in meters) below which areas are considered shallow |
| safetyDepth | number | 3 | Depth (in meters) above which waters are considered safe |
| deepDepth | number | 6 | Depth (in meters) above which areas are considered deep water |
| lightSectorRadius | number | 70 | Radius (in pixels) of light sectors without sectoral blanking |
| topmarStyle | TopmarStyle | TopmarStyle.Floating | Style of topmarks |
| ignoreScaleMinMax | boolean | false | Whether to ignore scale based visibility limits defined in the chart. When set to true, all features are displayed regardless of zoom level which may result in visual clutter. |
QueryResult
Query result will contain the chart information indexed by chart ID with values of type ChartInfo
ChartInfo
ChartInfo provides information about the chart and rendered layers at a given map point
| Property | Type | Description |
|---|---|---|
| dsid | DsidInfo | DSID metadata associated with the chart |
| layers | Map<string, FeatureAttributes> | Map of rendered layers at the queried point. The key represents the layer name and the value contains the corresponding feature attributes |
ChartClickSubscription
On chart click subscription provides an unsubscribe method to cleanup subscriptions after their use