NOTAM

NOTAM is a Notice to Airmen system used to publish important information affecting flight safety. The SDK provides complete NOTAM functionality support, including display of route notices, area notices, and detail viewing.

Note: For Class C notices, internet connection is not available, dedicated line connection is required.

Features

Route Notices: Display NOTAM route notices (line features)
Area Notices: Display NOTAM area notices (polygon features)
Interaction Support: Support hover highlight and click to view details
Data Refresh: Support manual refresh and automatic updates
Style Customization: Support custom layer styles

Basic Usage

Enable NOTAM Function

javascript

// Method 1: Use built-in data source
sdk.notam.open(true);

// Method 2: Use custom data source
sdk.notam.open(false);

Get and Display NOTAM Data

javascript

// Enable NOTAM layer
sdk.notam.open(false);

// Get NOTAM data
sdk.notam.getNotamData({
  pageNo: 1,
  pageSize: 100,
  onlyGeojson: true,
  typeC: true,
}).then((features) => {
  // Update map display
  sdk.notam.update(features);
  
  // Enable detail popup (click notice to view details)
  sdk.notam.openNotamDetail();
});

Close NOTAM Function

javascript

sdk.notam.close();

Complete Examples

Example 1: Basic Usage

javascript

let sdk;

async function initMap() {
  sdk = new navMap.MapSDK({
    container: "map",
    center: [116.39, 39.9],
    zoom: 10,
  });

  sdk.on("loadComplete", () => {
    setupNOTAM();
  });
}

async function setupNOTAM() {
  // Enable NOTAM layer
  sdk.notam.open(false);

  // Get NOTAM data
  const features = await sdk.notam.getNotamData({
    pageNo: 1,
    pageSize: 100,
    onlyGeojson: true,
    typeC: true,
    isInternational: true,
  });

  // Update map display
  sdk.notam.update(features);

  // Enable detail popup
  sdk.notam.openNotamDetail();
}

initMap();

Example 2: Custom Styles

javascript

// Custom line layer style (route notices)
const lineLayerConfig = {
  paint: {
    "line-color": "#ff0000",
    "line-width": [
      "interpolate",
      ["linear"],
      ["zoom"],
      2, 1,
      4, 2,
      6, 4,
    ],
    "line-opacity": [
      "case",
      ["boolean", ["feature-state", "hover"], false],
      0.8,
      0.6,
    ],
  },
};

// Custom fill layer style (area notices)
const fillLayerConfig = {
  paint: {
    "fill-color": "#ff0000",
    "fill-outline-color": "rgba(255, 0, 0, 0.5)",
    "fill-opacity": [
      "case",
      ["boolean", ["feature-state", "hover"], false],
      0.5,
      0.3,
    ],
  },
};

// Enable NOTAM function
sdk.notam.open(false, lineLayerConfig, fillLayerConfig);

Example 3: Use Pattern Fill

javascript

// Use pattern fill for area notices
sdk.notam.open(false, {}, {}, true);

Example 4: Scheduled Refresh

javascript

// Enable NOTAM
sdk.notam.open(false);

// Initial load
loadNOTAMData();

// Refresh every 5 minutes
setInterval(() => {
  loadNOTAMData();
}, 5 * 60 * 1000);

async function loadNOTAMData() {
  const features = await sdk.notam.getNotamData({
    pageNo: 1,
    pageSize: 100,
  });
  sdk.notam.update(features);
}

Example 5: Using refresh Method

javascript

// Enable NOTAM
sdk.notam.open(false);

// Initial load (using default parameters)
sdk.notam.refresh();

// Scheduled refresh
setInterval(() => {
  sdk.notam.refresh();
}, 5 * 60 * 1000);

Example 6: Custom Hover Effect

javascript

sdk.notam.open(false);

// Custom hover callback
sdk.notam.hover((e) => {
  const feature = e.features[0];
  console.log("Hovered notice:", feature.properties);
  
  // Can show custom tooltip
  showCustomTooltip(feature);
});

API Reference

open()

Enable NOTAM function.

Parameters:

builtin (Boolean): Whether to use built-in data source
lineLayerConfig (optional): Line layer configuration (route notices)
fillLayerConfig (optional): Fill layer configuration (area notices)
isPattern (optional): Whether to use pattern fill, default false

Example:

javascript

// Basic enable
sdk.notam.open(true);

// Custom styles
sdk.notam.open(false, {
  paint: {
    "line-color": "#ff0000",
    "line-width": 2,
  },
}, {
  paint: {
    "fill-color": "#ff0000",
    "fill-opacity": 0.3,
  },
});

getNotamData()

Get NOTAM data.

Parameters:

javascript

{
  pageNo: number,           // Page number, default 1
  pageSize: number,         // Items per page, default 100
  onlyGeojson: boolean,     // Whether to return only GeoJSON, default true
  typeC: boolean,           // Whether to include Class C notices, default true
  notamOffset: string,      // Offset, default "false"
  isInternational: boolean, // Whether international notices, default true
  isCompanyVersion: boolean, // Whether company version, default false
}

Returns:

Promise<Array> - GeoJSON Feature array

Example:

javascript

const features = await sdk.notam.getNotamData({
  pageNo: 1,
  pageSize: 50,
  onlyGeojson: true,
  typeC: true,
});

update()

Update NOTAM data to map.

Parameters:

features (Array): GeoJSON Feature array

Example:

javascript

const features = await sdk.notam.getNotamData();
sdk.notam.update(features);

openNotamDetail()

Enable notice detail popup. Automatically displays detailed information when clicking notices.

Example:

javascript

sdk.notam.openNotamDetail();

refresh()

Refresh NOTAM data using default parameters.

Example:

javascript

sdk.notam.refresh();

hover()

Set hover callback function.

Parameters:

callback (Function): Callback function on hover

Example:

javascript

sdk.notam.hover((e) => {
  const feature = e.features[0];
  console.log("Notice information:", feature.properties);
});

close()

Close NOTAM function, clean up all layers.

Example:

javascript

sdk.notam.close();

Data Format

NOTAM Feature Format

javascript

{
  type: "Feature",
  geometry: {
    type: "LineString" | "MultiLineString" | "Polygon" | "MultiPolygon",
    coordinates: [...],
  },
  properties: {
    notamSeries: string,    // Notice series
    notamNoPart1: string,   // Notice number part 1
    notamNoPart2: string,   // Notice number part 2
    nof: string,            // NOF identifier
    itemA: string,          // Item A (location)
    itemB: string,          // Item B (effective time)
    itemC: string,          // Item C (expiry time)
    itemD: string,          // Item D (content)
    itemE: string,          // Item E (supplementary information)
    // ... more properties
  },
}

Default Parameters

NOTAM manager provides default parameter configuration:

javascript

sdk.notam.defaultParams = {
  pageNo: 1,
  pageSize: 100,
  onlyGeojson: true,
  typeC: true,
  notamOffset: "false",
  isInternational: true,
  isCompanyVersion: false,
};

// Can modify default parameters
sdk.notam.defaultParams.pageSize = 200;
sdk.notam.defaultParams.isInternational = false;

After enabling openNotamDetail(), clicking notices automatically displays detail popup, including:

Item A: Location information
Item B: Effective time
Item C: Expiry time
Item D: Notice content
Item E: Supplementary information
Notice Code: NOTAM code

Style Configuration

Line Layer Style (Route Notices)

javascript

const lineLayerConfig = {
  paint: {
    "line-color": "#ff0000",      // Line color
    "line-width": 2,              // Line width
    "line-opacity": 0.6,          // Opacity
    "line-dasharray": [2, 2],     // Dash pattern (optional)
  },
};

Fill Layer Style (Area Notices)

javascript

const fillLayerConfig = {
  paint: {
    "fill-color": "#ff0000",           // Fill color
    "fill-outline-color": "#ff0000",   // Outline color
    "fill-opacity": 0.3,               // Fill opacity
  },
};

Hover Effect

NOTAM supports hover effects based on feature-state:

javascript

{
  paint: {
    "line-opacity": [
      "case",
      ["boolean", ["feature-state", "hover"], false],
      0.8,  // Opacity on hover
      0.6,  // Normal opacity
    ],
  },
}

Notes

Data Source: When using built-in data source, ensure network connection is normal
Data Format: Ensure returned data is valid GeoJSON format
Performance Considerations: Consider paginated loading for large numbers of notices
Layer Order: NOTAM layers are added before route layers by default
Detail Query: Detail popup requires additional API calls, pay attention to network latency

Common Questions

Q: NOTAM data not displaying?

A: Check the following:

Whether open() method was called
Whether update() method was called to update data
Whether data format is correct
Whether network request succeeded

A: Detail popup uses Popup component, can customize via CSS:

css

.maplibregl-popup-content .notam-popup {
  /* Custom styles */
}

Q: How to filter specific types of notices?

A: Set parameters in getNotamData():

javascript

const features = await sdk.notam.getNotamData({
  typeC: false, // Don't include Class C notices
  isInternational: false, // Only show domestic notices
});

Q: How to implement notice search?

A: Can implement via API parameters:

javascript

// Use API to query directly
const response = await sdk.notam.api.notam_detail({
  // Search parameters
});

NOTAM ​

Features ​

Basic Usage ​

Enable NOTAM Function ​

Get and Display NOTAM Data ​

Close NOTAM Function ​

Complete Examples ​

Example 1: Basic Usage ​

Example 2: Custom Styles ​

Example 3: Use Pattern Fill ​

Example 4: Scheduled Refresh ​

Example 5: Using refresh Method ​

Example 6: Custom Hover Effect ​

API Reference ​

open() ​

getNotamData() ​

update() ​

openNotamDetail() ​

refresh() ​

hover() ​

close() ​

Data Format ​

NOTAM Feature Format ​

Default Parameters ​

Detail Popup ​

Style Configuration ​

Line Layer Style (Route Notices) ​

Fill Layer Style (Area Notices) ​

Hover Effect ​

Notes ​

Common Questions ​

Q: NOTAM data not displaying? ​

Q: How to customize detail popup styles? ​

Q: How to filter specific types of notices? ​

Q: How to implement notice search? ​

NOTAM

Features

Basic Usage

Enable NOTAM Function

Get and Display NOTAM Data

Close NOTAM Function

Complete Examples

Example 1: Basic Usage

Example 2: Custom Styles

Example 3: Use Pattern Fill

Example 4: Scheduled Refresh

Example 5: Using refresh Method

Example 6: Custom Hover Effect

API Reference

open()

getNotamData()

update()

openNotamDetail()

refresh()

hover()

close()

Data Format

NOTAM Feature Format

Default Parameters

Detail Popup

Style Configuration

Line Layer Style (Route Notices)

Fill Layer Style (Area Notices)

Hover Effect

Notes

Common Questions

Q: NOTAM data not displaying?

Q: How to customize detail popup styles?

Q: How to filter specific types of notices?

Q: How to implement notice search?