Map Dropdown Menus

Last updated 22 days ago

Configure a map with drop down menus

Advanced, requires some coding

Here is an example of map drop downs from Congo Mines 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.

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
Click to open Advanced Settings code

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:

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

Here is a full example for the map above:

{
"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

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