How do I create dynamic on/off toggles for my map?

Controls are incredibly useful to reduce the complexity of your map and make your visualization more dynamic. Through buttons, drop downs, and/or toggles, viewers can decide what entities they want to see on the map and when. They're also great for simple show/hide toggles that can be turned on or off at any moment. Here's how you can add them to your map:

Toggle elements

Before copying the code, make note of the following customizations in the properties based on what you want to do:

• Top - the region of the control on your map. Switch for "bottom" or "bottom-right" to place the control somewhere else.

• Target - allows you to indicate which elements you want the toggle control to apply to, through the use of selectors.

• As - dictates what your control will look like. Replace "label" with "button" to turn the control into a button.

• Default - indicates whether you want the elements or connections to show ("true") or hide ("false") by default when opening the map.

• Label - allows you to set the text that will show on the map and entice people to click the toggle. Make sure to use "Show" when default: false; and "Hide" when default: true; .

Now, on to the real deal!

To show or hide certain elements with the click of button, add this code to your advanced editor:

@controls {
 top {
 filter {
  target: element["element type"="Person"];
  as: label;

  option {
    selector: *;
    default: true;
    label: "Hide all people";
   }
  }
 }
}

In this example, we can see from the target: property that we want the control to hide all elements that have "Person" as their "Element type", which is why the label: of the control is "Hide all people". You can switch out the target for any other field ("element type") and field value ("Person").

Though possible, there's few instances where we want to use the target: element; selector, because that would hide all elements, thus all connections; effectively hiding your entire map.

To show or hide elements without connections (so-called orphans), use this code:

@controls {
 top {
 filter {
  target: :orphan;
  as: label;

  option {
    selector: *;
    default: true;
    label: "Hide elements without connections";
   }
  }
 }
}

For more info on hiding orphans, visit this guide.

Toggle connections

To toggle all connections with the simple click of a button, use this code:

@controls {
  top {
    filter {
      target: connection;
      as: label;

      option {
        selector: *;
        default: true;
        label: "Hide connections";
      }
    }
  }
}

Note again how the target: connection; line indicates what entities you want Kumu to apply this control to. Just like with elements, use more specific selectors to apply the toggle control to certain connections only.

If you have any questions about writing these codes, don't hesitate to reach out to [email protected]!