> For the complete documentation index, see [llms.txt](https://help.maphubs.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.maphubs.com/advanced/map-dropdown-menus.md).

# Map Dropdown Menus

{% hint style="danger" %}
Advanced, requires some coding
{% endhint %}

Here is an example of map drop downs from [Congo Mines](< https://maps.congomines.org/#4.89/-9.03/25.62>) clicking on Mining Permits opens the menu and the user can choose to turn the layer on or off, or click to view more information about the layer.

![](/files/-LPYfvOo57NhtnbSp94G)

To configure map drop downs, edit the map and then open to the *Map Settings* section at bottom of left column, then click the *Advanced Settings* button

![Location of Map Settings section in the map maker](/files/-LPYgyMOQN87_6LhUFTX)

![Click to open Advanced Settings code](/files/-LPYhFqqQnLskf3J_om3)

The Advanced Settings code editor will open

To add drop down menus to the map you will need to add a categories array to the JSON code and then add an object entry for each drown down (category) menu you want to add.&#x20;

Each menu has:

* a name, specified as language codes (English is required, you can add as many additional languages as you need)
* a list of layers specified using the layer ID. The layer ID can found in the URL for the a layer

To get started you can copy the following into the code editor:

```javascript
{
  "categories": [
    {
      "name": {
        "en": "My Dropdown"
      },
      "layers": [
      ]
    }
    ]
}
```

&#x20;Here is a full example for the map above:

```javascript
{
  "categories": [
    {
      "name": {
        "en": "Mines and infrastructure",
        "fr": "Mines et infrastructures"
      },
      "layers": [
        95,
        96,
        97,
        106
      ]
    },
    {
      "name": {
        "en": "Mining Permits",
        "fr": "Droits miniers"
      },
      "layers": [
        107,
        108
      ]
    },
    {
      "name": {
        "en": "Concessions",
        "fr": "Concessions"
      },
      "layers": [
        76,
        100
      ]
    },
    {
      "name": {
        "en": "ETDs",
        "fr": "ETDs"
      },
      "layers": [
        86,
        87,
        90,
        92
      ]
    }
  ]
}
```

![Finding the layer ID for a layer](/files/-LPYiwxqgdQmxsVE1lST)

When you are done, click save on the *Advanced Settings* code editor, and then save your map.