Kumu
  • Getting started
    • Welcome
    • Kumu 101
    • First steps
    • Quick tips
    • Webinars
  • Overview
    • Kumu's architecture
    • Accounts and workspaces
    • Kumu.io and Kumu Enterprise
    • Billing
    • User interfaces
      • Dashboard
      • Settings
      • Map editor
      • View editors
      • Quick Actions
    • Collaborating and sharing
    • Actions and permissions
    • Security
    • Advanced Editor hub
      • @settings reference
      • @controls reference
      • Color reference
      • Property reference
      • Selector reference
  • DISCIPLINES
    • SNA / Network Mapping
    • Systems mapping
    • Systems Practice workbook
  • Guides
    • Activity feed
    • Add-ons
      • Disqus
    • Bridge
    • Cluster
    • Controls
      • Cluster control
      • Color-legend control
      • Filter control
      • Focus control
      • Image control
      • Label control
      • Showcase control
      • SNA-dashboard control
      • Tagged-timeline control
      • Text Control
      • Title Control
      • View toggle control
    • Decorations
      • Direct decorations
      • Data-driven decorations
      • Flags
      • Icons
      • Images
      • Label templates
      • Popovers
    • Default view settings
    • Export
    • Fields
      • Computed fields
    • Filter
    • Focus
    • Forking
    • Grids & Guides
    • Import
      • Structure your data for Kumu
      • Excel / CSV
      • Google Sheets
      • JSON / Blueprints
    • Imported views
    • Layouts
      • Fixed
      • Force-directed
      • Remove overlap
      • Scatter
      • Snap-to
    • Legends
    • Licensing
    • Lightbox
    • Loops
    • Metrics
    • Two-factor authentication
    • Pro workspaces
      • Archiving projects
      • Discussions
    • Partial views
    • Presentations
    • Profiles
      • Markdown
    • Project admin
    • Selectors
    • Shapes
    • Share and embed maps
    • Shortcuts
    • Showcase
    • Slugs
    • Table
    • Templates
      • Geo template
    • URLs
    • Views
    • Widgets
  • About Kumu
    • What is Kumu?
    • How does it work?
    • Where can I get help?
  • Enterprise
    • About enterprise
    • Getting started with VMWare
    • Upgrading
    • Configuration
    • Creating user accounts
    • SSH Access
    • Single sign-on
    • Backing up enterprise data
    • Restoring enterprise data
    • Command line utilities
    • Changelog
  • Frequently Asked Questions
    • Does Kumu have a public API?
    • Does Kumu make use of AI?
    • How do I add annotations?
    • How do I add anchors to my map description?
    • How do I add arrows to my connections?
    • How do I add documents to profiles?
    • How do I add more than one element with the same label?
    • How do I add text dropdowns to my map overview?
    • How do I adjust arrow size?
    • How do I avoid duplicating data?
    • How do I change connection curvature?
    • How do I change font color?
    • How do I change font size?
    • How do I change the default for currency fields?
    • How do I change the length or strength of connections?
    • How do I change the order of control options?
    • How do I change the position of my element labels?
    • How do I cite Kumu?
    • How do I collapse duplicate connections?
    • How do I copy a map to another project?
    • How do I control label size while scaling element size?
    • How do I control text wrapping?
    • How do I convert a project from private to public?
    • How do I convert a project from public to private?
    • How do I create dynamic on/off toggles for my map?
    • How do I customize link text in popovers?
    • How do I customize the order of my legend?
    • How do I delete a project, map, or view?
    • How do I delete data from my project?
    • How do I downgrade my subscription?
    • How do I edit virtual elements?
    • How do I get rid of duplicates?
    • How do I hide elements without connections?
    • How do I hide images from the map but keep them in the profile?
    • How do I hide labels on my map?
    • How do I hide the settings button?
    • How do I keep elements from moving?
    • How do I list an element's connections in its profile?
    • How do I make elements transparent?
    • How do I make sense of my receipt?
    • How do I open a sub-system when clicking on an element?
    • How do I remove the Opposite entry from my legend?
    • How do I remove unneeded controls?
    • How do I remove unwanted legend entries?
    • How do I rename my map/view?
    • How do I restructure my adjacency matrix?
    • How do I save my changes in Kumu?
    • How do I select options by default in my control?
    • How do I set a minimum or maximum zoom level for my map?
    • How do I show the Settings button?
    • How do I size elements based on number of connections?
    • How do I transfer a project?
    • How do I update my credit card information?
    • How much data can my Kumu project handle?
    • How do my readers switch between maps and views?
    • My data won't import. What can I do?
    • My Kumu embed is not working. What can I do?
    • My map disappeared. How do I bring it back?
    • My PDF won't export. What can I do?
    • What pricing plans does Kumu have?
    • Where can I find my invoices?
    • Where can I find example Kumu projects?
Powered by GitBook
On this page
  • Toggle elements
  • Toggle connections

Was this helpful?

Edit on GitHub
  1. Frequently Asked Questions

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

PreviousHow do I convert a project from public to private?NextHow do I customize link text in popovers?

Last updated 1 year ago

Was this helpful?

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 .

  • 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";
   }
  }
 }
}

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";
      }
    }
  }
}

If you have any questions about writing these codes, don't hesitate to reach out to support@kumu.io!

For more info on hiding orphans, .

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 to apply the toggle control to certain connections only.

Controls
selectors
visit this guide
selectors