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

![](https://1877297257-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L97P61aNiSmDn1953mp%2F-LPYejy_tBrSU5jjIfCM%2F-LPYfvOo57NhtnbSp94G%2Fimage.png?alt=media\&token=69d6ede6-8d0e-4712-8161-c092e983bcd3)

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](https://1877297257-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L97P61aNiSmDn1953mp%2F-LPYejy_tBrSU5jjIfCM%2F-LPYgyMOQN87_6LhUFTX%2Fimage.png?alt=media\&token=f34ada5d-4c4e-4cef-8205-a538240b2074)

![Click to open Advanced Settings code](https://1877297257-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L97P61aNiSmDn1953mp%2F-LPYejy_tBrSU5jjIfCM%2F-LPYhFqqQnLskf3J_om3%2Fimage.png?alt=media\&token=5f0f1d12-b6ab-4337-8707-fb9d9a72d199)

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. 

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": [
      ]
    }
    ]
}
```

 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](https://1877297257-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L97P61aNiSmDn1953mp%2F-LPYejy_tBrSU5jjIfCM%2F-LPYiwxqgdQmxsVE1lST%2Fimage.png?alt=media\&token=e5d58ad7-82f9-406a-818a-ebfc46a476dc)

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