---
title: "Creating a Custom Layer"
slug: "creating-a-custom-layer-1"
description: "Create custom layers using the NavVis IVION Frontend API"
tags: ["Context Menu", "Custom Layer", "TypeScript File"]
updated: 2026-02-26T14:38:18Z
published: 2026-02-26T14:38:18Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.navvis.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Creating a Custom Layer

## Procedure

1. In your project, create a file called `SampleContextMenuEntryLayer.ts`.
2. Add a class that extends from the [CustomLayer](https://ivion-api.docs.navvis.com/latest/reference/classes/customlayer.html) class by running:

```plaintext
// SampleContextMenuEntryLayer.ts
import {CustomLayer} from "@navvis/ivion";

export class SampleContextMenuEntryLayer extends CustomLayer
{
}
```
3. Override the [onContextMenu()](https://ivion-api.docs.navvis.com/latest/reference/classes/customlayer.html#oncontextmenu) method so that the custom layer can provide a context menu entry to the user by running:

```plaintext
// SampleContextMenuEntryLayer.ts
import {
  ContextMenuEntryInterface, CustomLayer,
  MouseEventCoordinatesInterface
} from "@navvis/ivion";

export class SampleContextMenuEntryLayer extends CustomLayer
{
  public onContextMenu(pos: MouseEventCoordinatesInterface): ContextMenuEntryInterface
  {
  }
} 
```