Skip to content Skip to main navigation Skip to footer

How to set up switching filters when switching maps?

GIS Cloud filters are used to filter data in a map and attribute table based on feature attributes. It is possible to set filters for maps within the same custom app so that when you switch a map, you switch filters as well.

To set this up you will need to create separate filters for each map in your custom app in the App Builder. Follow these steps to enable switching filters when switching maps:

  1. Open the map for which you want to set up your filters
  2. Set up the filters for the layers on that map. Click here for more information on setting up filters in custom apps.
  3. Click ‘Forward configuration to App Builder’
  4. Save your changes, and allow the page to refresh
  5. Repeat steps 1-4 for all other maps in your custom app (those where you want to include filters)

Setup in the configuration file (app.json)

First, you will need to locate the configuration file for your custom app.

  1. Open GIS Cloud Manager and scroll down to the Custom Apps section.
  2. Find the app you would like to customize and click on the Edit button.
  3. In the App Instance window click on the Advanced tab, and then click to Open app folder. This folder is where all your customization configuration files are placed.
  4. Select the app.json file and click on Edit text file.

When the code editor opens, you will be ready to start editing the configuration file. The next step is to find the panel section, where your filters are saved. This section of the JSON file will look like this:

{
        "id": "panel2",
        "title": "Filters",
        "width": 300,
        "height": 400,
        "open": false,
        "closeButton": true,
        "css": {
            "top": "150px"
        },
        "filters": [{
            "2195820": [{
                "layer_id": "5493688",
                "items": [{
                    "type": "DATA_FILTER_DROPDOWN",
                    "column": "ocjen_op",
                    "label": "Pedestrian access",
                    "no_filter": "",
                    "multiselect": false,
                    "autofetch": true,
                    "relevantValues": true
                }]
            }

The items highlighted in bold text are the map ID, which indicates on which map is the layer you are filtering, and the ID of the filtered layer. These two values are necessary for the setup. You can find map and layer ID-s by following these instructions.

To set up switching filters when switching maps, follow these steps:

  • Locate the filters in the panel section
  • Copy the filters section of the JSON and paste it below the existing one
  • Change the map ID value to that of the map you will be switching to
  • Change the layer ID to the ID of the layer you want to filter
  • Change filter type. JSON codes for filters are available here.
  • Save your changes

An example of the JSON setup for switching maps can be found below:

{
        "id": "panel2",
        "title": "Filters",
        "width": 300,
        "height": 400,
        "open": false,
        "closeButton": true,
        "css": {
            "top": "150px"
        },
        "filters": [{
            "2195820": [{
                "layer_id": "5493688",
                "items": [{
                    "type": "DATA_FILTER_DROPDOWN",
                    "column": "ocjen_op",
                    "label": "Pedestrian access",
                    "no_filter": "",
                    "multiselect": false,
                    "autofetch": true,
                    "relevantValues": true
                }]
            }],
            "2196091": [{
                "layer_id": "5494561",
                "items": [{
                    "type": "DATA_FILTER_DROPDOWN",
                    "column": "status",
                    "label": "Operational Status",
                    "no_filter": "",
                    "multiselect": false,
                    "autofetch": true,
                    "relevantValues": true
                }]
            }],
            "2196816": [{
                "layer_id": "5496186",
                "items": [{
                    "type": "DATA_FILTER_DROPDOWN",
                    "column": "type",
                    "label": "Type of Roadwork",
                    "no_filter": "",
                    "multiselect": false,
                    "autofetch": true,
                    "relevantValues": true
                }]
            }]
        }

An example of the final result is available in the GIF below.

Was This Article Helpful?