MapHubs Help
  • Introduction
  • Getting Started
    • Signup for a MapHubs Account
    • MapHubs Groups
    • Searching MapHubs
    • MapHubs Terminology
    • Troubleshooting Common Issues
  • Maps
    • Make a Map
    • Sharing Maps
    • Export a Map as an Image
    • Change the Layer Color
    • Copying Maps
  • Forest Analytics
    • Forest Report
  • Data
    • Uploading Data
    • Attach Photos to Map Features
    • Creating Data
    • Layer Metadata
    • Raster Tile Layers
  • Advanced
    • Custom Layer Legends
    • Data-Driven Map Styles
    • Editing Map Style Code (Advanced)
    • Map Dropdown Menus
    • Earth Engine Layers
    • Changing Polygon Fill Patterns
Powered by GitBook
On this page
  1. Advanced

Map Dropdown Menus

Configure a map with drop down menus

PreviousEditing Map Style Code (Advanced)NextEarth Engine Layers

Last updated 6 years ago

Advanced, requires some coding

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

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
      ]
    }
  ]
}

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

Congo Mines
Location of Map Settings section in the map maker
Click to open Advanced Settings code
Finding the layer ID for a layer