Built-in Layers

The SDK provides rich built-in layers, including basic layers, airspace layers, route layers, etc., which can be used directly without manual configuration.

Built-in Layer Overview

The SDK provides the following built-in layers that can be added directly using the addBuiltInLayer() method:

Layer ID	Layer Name	Description
`background`	Background	Map background base layer
`water` / `lake`	Water Bodies	Water bodies layer
`landLayer`	Land Layer	Land layer
`countryline`	Country Boundary	Country boundary line layer
`countryname`	Country Name	Country name label layer
`airspace`	Airspace	Airspace layer, includes airspace lines and labels
`controlled`	Controlled Airspace	Controlled airspace layer
`restricted`	Restricted Airspace	Restricted airspace layer
`amm`	AMM Layer	AMM
`airline`	Air Route	Air route layer, includes route lines, labels, and waypoints
`airport`	Airport	Airport layer
`vor`	VOR Navigation Station	VOR (VHF Omnidirectional Range) navigation station layer
`ndb`	NDB Navigation Station	NDB (Non-Directional Beacon) navigation station layer

Built-in Layer Details

The following table lists the actual layer IDs and descriptions for each built-in layer group:

Built-in Layer ID	Actual Layer ID	Layer Description
`background`	`background`	Map background base layer
`water` / `lake`	`lake`	Water bodies layer
`landLayer`	`landLayer`	Land layer
`countryline`	`countryline`	Country boundary line
	`stateline`	State/province boundary line
`countryname`	`countrylabel`	Country name label
	`countrypoint`	Country name point marker
	`provincelabel`	Province name label
	`statelabel`	Capital name label
`airspace`	`airspaceLayer`	Airspace line
	`airspace_label_side_layer`	Airspace line side label
	`airspaceLayer_line`	Airspace line interval line
	`airspace_label_center_layer`	Airspace center name label
`controlled`	`controlledLayer`	Controlled airspace area fill
	`controlled_line_label`	Controlled airspace area label
`restricted`	`restrictedLayer`	Restricted airspace area fill
	`restricted_line_label`	Restricted airspace area label
`airline`	`airline`	Air route line
	`airline_label`	Air route name label
	`airline_point`	Air route waypoint
`airport`	`airport`	Airport symbol and label
`vor`	`vor_icon`	VOR navigation station icon
`ndb`	`ndb_icon`	NDB navigation station icon
`amm`	`_amm_airport_area_region`	Airport area boundary
	`_amm_apron_element_region`	Apron element fill
	`_amm_apron_element_region_text`	Apron element label
	`_amm_runway_element_region`	Runway element fill
	`_amm_runway_element_region_text`	Runway element text
	`_amm_runway_displaced_area_region`	Runway displaced threshold area
	`_amm_stopway_region`	Stopway area
	`_amm_painted_centerline_polyline`	Runway centerline
	`_amm_runway_mark_region`	Runway marking fill
	`_amm_taxiway_element_region`	Taxiway element fill
	`_amm_taxiway_center_line_polyline`	Taxiway centerline
	`_amm_taxiway_center_line_polyline_text`	Taxiway centerline label
	`_amm_taxiway_guidance_line_polyline`	Taxiway guidance line
	`_amm_taxiway_intersection_marking_polyline`	Taxiway intersection marking
	`_amm_taxiway_holding_position_polyline`	Taxiway holding position
	`_amm_stand_guidance_line_polyline`	Stand guidance line
	`_amm_ainstrument_landing_system_region_line`	Instrument landing system line
	`_amm_painted_delayline_polyline`	Runway delay line
	`_amm_prohibition_mark_region_line`	Prohibition mark line
	`_amm_hotspot_region_line`	Hotspot conflict area line
	`_amm_hotspot_region_area`	Hotspot conflict area fill
	`_amm_hotspot_region_line_text`	Hotspot conflict area label
	`_amm_vertical_polygonal_structure_region`	Vertical structure fill
	`_amm_vertical_polygonal_structure_region_text`	Vertical structure label
	`_amm_parking_stand_location_point`	Parking stand location point
	`_amm_runway_threshold_point`	Runway threshold point

Get Built-in Layer List

Get All Built-in Layers

javascript

// Get all built-in layer information
const layers = sdk.getBuiltInLayers();
console.log("Built-in layers:", layers);

// Or use function
const layers = navMap.getBuiltInLayers();

View Layer Information

javascript

const layers = sdk.getBuiltInLayers();

layers.forEach(layer => {
  console.log(`Layer ID: ${layer.id}`);
  console.log(`Layer name: ${layer.name}`);
  console.log(`Layer description: ${layer.description}`);
  console.log(`Layer category: ${layer.category}`);
  console.log(`Default visible: ${layer.defaultVisible}`);
});

Adding Built-in Layers

Add Single Layer

javascript

// Add airport layer
await sdk.addBuiltInLayer("airport");

// Add airspace layer
await sdk.addBuiltInLayer("airspace");

// Add route layer
await sdk.addBuiltInLayer("airline");

Batch Add Layers

javascript

// Add multiple layers
await sdk.addBuiltInLayer([
  "airport",
  "airspace",
  "airline",
  "vor",
  "ndb",
]);

Specify Layer Order

javascript

// Add layer and specify z-index
await sdk.addBuiltInLayer("airport", "10");
await sdk.addBuiltInLayer("airline", "20");

Removing Built-in Layers

Remove Single Layer

javascript

// Remove airport layer
sdk.removeBuiltInLayer("airport");

Batch Remove Layers

javascript

// Remove multiple layers
["airport", "airspace", "airline"].forEach(layerId => {
  sdk.removeBuiltInLayer(layerId);
});

Toggle Layer Display

Show/Hide Layers

javascript

// Toggle layer display state
sdk.toggleBuiltInLayer("airport");

// Or manually control
if (isVisible) {
  await sdk.addBuiltInLayer("airport");
} else {
  sdk.removeBuiltInLayer("airport");
}

Built-in Layer List

Basic Layers

background (Background)

javascript

await sdk.addBuiltInLayer("background");

Type: background
Description: Map background base layer
Default Visible: Yes

water / lake (Water Bodies)

javascript

await sdk.addBuiltInLayer("water");
// Or
await sdk.addBuiltInLayer("lake");

Type: fill
Description: Water bodies layer
Default Visible: Yes

landLayer (Land Layer)

javascript

await sdk.addBuiltInLayer("landLayer");

Type: fill
Description: Land layer
Default Visible: Yes

Airspace Layers

airspace (Airspace)

javascript

await sdk.addBuiltInLayer("airspace");

Type: line + symbol
Description: Airspace layer, includes airspace lines and labels
Default Visible: No
Contains Layers:
- airspaceLayer (Airspace line)
- airspace_label_side_layer (Side label)
- airspaceLayer_line (Airspace line)
- airspace_label_center_layer (Center label)

controlled (Controlled Airspace)

javascript

await sdk.addBuiltInLayer("controlled");

Type: fill + line + symbol
Description: Controlled airspace layer
Default Visible: No
Contains Layers:
- controlledLayer (Controlled area fill)
- controlled_line_label (Controlled area line label)

restricted (Restricted Airspace)

javascript

await sdk.addBuiltInLayer("restricted");

Type: fill + line + symbol
Description: Restricted airspace layer
Default Visible: No
Contains Layers:
- restrictedLayer (Restricted area fill)
- restricted_line_label (Restricted area line label)

amm (AMM Layer)

javascript

await sdk.addBuiltInLayer("amm");

Type: fill + line + symbol
Description: AMM (Aeronautical Information Publication) layer
Default Visible: No
Dynamic Layer: Dynamically generated based on period

Route Layers

airline (Air Route)

javascript

await sdk.addBuiltInLayer("airline");

Type: line + symbol + circle
Description: Air route layer, includes route lines, labels, and waypoints
Default Visible: No
Contains Layers:
- airline (Route line)
- airline_label (Route label)
- airline_point (Route waypoint)

airport (Airport)

javascript

await sdk.addBuiltInLayer("airport");

Type: symbol
Description: Airport layer
Default Visible: No

javascript

await sdk.addBuiltInLayer("vor");

Type: symbol
Description: VOR (VHF Omnidirectional Range) navigation station layer
Default Visible: No
Contains Layer: vor_icon

javascript

await sdk.addBuiltInLayer("ndb");

Type: symbol
Description: NDB (Non-Directional Beacon) navigation station layer
Default Visible: No
Contains Layer: ndb_icon

Layer Management Examples

Layer Control Panel

javascript

let sdk;

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

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

function setupLayerControl() {
  const layers = sdk.getBuiltInLayers();
  const panel = document.getElementById("layer-panel");

  layers.forEach(layer => {
    // Create checkbox
    const label = document.createElement("label");
    const checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.checked = layer.defaultVisible;
    checkbox.value = layer.id;

    checkbox.addEventListener("change", async () => {
      if (checkbox.checked) {
        await sdk.addBuiltInLayer(layer.id);
      } else {
        sdk.removeBuiltInLayer(layer.id);
      }
    });

    label.appendChild(checkbox);
    label.appendChild(document.createTextNode(layer.name));
    panel.appendChild(label);
  });
}

initMap();

Group by Category

javascript

function setupLayerControlByCategory() {
  const layers = sdk.getBuiltInLayers();
  const categories = {};

  // Group by category
  layers.forEach(layer => {
    if (!categories[layer.category]) {
      categories[layer.category] = [];
    }
    categories[layer.category].push(layer);
  });

  // Create category panels
  Object.entries(categories).forEach(([category, categoryLayers]) => {
    const section = document.createElement("div");
    section.className = "layer-category";
    section.innerHTML = `<h3>${category}</h3>`;

    categoryLayers.forEach(layer => {
      const label = document.createElement("label");
      const checkbox = document.createElement("input");
      checkbox.type = "checkbox";
      checkbox.value = layer.id;

      checkbox.addEventListener("change", async () => {
        if (checkbox.checked) {
          await sdk.addBuiltInLayer(layer.id);
        } else {
          sdk.removeBuiltInLayer(layer.id);
        }
      });

      label.appendChild(checkbox);
      label.appendChild(document.createTextNode(layer.name));
      section.appendChild(label);
    });

    document.getElementById("layer-panel").appendChild(section);
  });
}

Layer Style Customization

Update Layer Style

javascript

// Update built-in layer style
sdk.updateLayerStyle("airport", {
  paint: {
    "icon-color": "#ff0000",
  },
});

// Or use setStyle
sdk.setStyle({
  "airport": {
    paint: {
      "icon-color": "#ff0000",
    },
  },
});

Batch Update Styles

javascript

// Batch update multiple layer styles
sdk.setStyle({
  "airport": {
    paint: {
      "icon-color": "#ff0000",
    },
  },
  "vor": {
    paint: {
      "icon-color": "#00ff00",
    },
  },
  "ndb": {
    paint: {
      "icon-color": "#0000ff",
    },
  },
});

Layer Visibility Control

Show/Hide Layers

javascript

// Show layers
sdk.showLayers(["airport", "airline"]);

// Hide layers
sdk.hideLayers(["airport", "airline"]);

Control Based on Zoom Level

javascript

sdk.on("zoom", () => {
  const zoom = sdk.getZoom();

  if (zoom < 8) {
    // Low zoom level: only show basic layers
    sdk.hideLayers(["airport", "airline", "vor", "ndb"]);
  } else if (zoom < 12) {
    // Medium zoom level: show airports and routes
    sdk.showLayers(["airport", "airline"]);
    sdk.hideLayers(["vor", "ndb"]);
  } else {
    // High zoom level: show all layers
    sdk.showLayers(["airport", "airline", "vor", "ndb"]);
  }
});

Period Management

Some built-in layers (such as AMM) depend on Period configuration:

javascript

// Set period
sdk.setPeriod("202501");

// Get current period
const period = sdk.getPeriod();
console.log("Current period:", period);

Notes

Async Operations: addBuiltInLayer is an async method, need to use await or .then()
Layer Order: Use zindex parameter to control layer stacking order
Period Dependency: Layers like AMM need period set first
Performance Considerations: Large numbers of layers may affect performance, consider using LOD configuration
Style Override: Use setStyle or updateLayerStyle to override default styles

Built-in Layers ​

Built-in Layer Overview ​

Built-in Layer Details ​

Get Built-in Layer List ​

Get All Built-in Layers ​

View Layer Information ​

Adding Built-in Layers ​

Add Single Layer ​

Batch Add Layers ​

Specify Layer Order ​

Removing Built-in Layers ​

Remove Single Layer ​

Batch Remove Layers ​

Toggle Layer Display ​

Show/Hide Layers ​

Built-in Layer List ​

Basic Layers ​

background (Background) ​

water / lake (Water Bodies) ​

landLayer (Land Layer) ​

Airspace Layers ​

airspace (Airspace) ​

controlled (Controlled Airspace) ​

restricted (Restricted Airspace) ​

amm (AMM Layer) ​

Route Layers ​

airline (Air Route) ​

Navigation Facility Layers ​

airport (Airport) ​

vor (VOR Navigation Station) ​

ndb (NDB Navigation Station) ​

Layer Management Examples ​

Layer Control Panel ​

Group by Category ​

Layer Style Customization ​

Update Layer Style ​

Batch Update Styles ​

Layer Visibility Control ​

Show/Hide Layers ​

Control Based on Zoom Level ​

Period Management ​

Notes ​

Built-in Layers

Built-in Layer Overview

Built-in Layer Details

Get Built-in Layer List

Get All Built-in Layers

View Layer Information

Adding Built-in Layers

Add Single Layer

Batch Add Layers

Specify Layer Order

Removing Built-in Layers

Remove Single Layer

Batch Remove Layers

Toggle Layer Display

Show/Hide Layers

Built-in Layer List

Basic Layers

background (Background)

water / lake (Water Bodies)

landLayer (Land Layer)

Airspace Layers

airspace (Airspace)

controlled (Controlled Airspace)

restricted (Restricted Airspace)

amm (AMM Layer)

Route Layers

airline (Air Route)

Navigation Facility Layers

airport (Airport)

vor (VOR Navigation Station)

ndb (NDB Navigation Station)

Layer Management Examples

Layer Control Panel

Group by Category

Layer Style Customization

Update Layer Style

Batch Update Styles

Layer Visibility Control

Show/Hide Layers

Control Based on Zoom Level

Period Management

Notes