# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.maphubs.com/advanced/map-dropdown-menus.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.