Togglability

# Togglability

Many desktop GIS paradigms unfortunately made their way to the web. Second only to the “Identify” tool in popularity, the checkbox for toggling layers is still the most common way to turn map layers on and off.

While I appreciate the simplicity, it just doesn’t feel very elegant. And now that skeuomorphism is out and flat design is here, the good old checkbox may be going the way of…

```html <script src=”https://gist.github.com/brightrain/9982817.js">\```

This doesn’t hurt my feelings, but it does leave some interesting voids — and presents possibilities.

## A first departure

Here’s a simple UI pattern I used a lot at the time: a small, styled <div> floating over the map with rounded edges and slight transparency.

Position these togglable elements in a corner or off to the side, and they work surprisingly well.

### visible

### not visible

### dual-purpose layer toggler + legend

## Styling

Set the CSS hover state to `cursor: pointer` and change the background color — now it’s clear the element is interactive.

Adding an icon helps signal its purpose.

This lets you maximize space by combining:

- the layer toggler
- the map legend

Light background + no border = “off.”
Stronger border + more opacity + icon swap = “on.”

CSS:

```html <script src=”https://gist.github.com/brightrain/9982368.js">\```

## Toggling

Wire a click event to each “toggable-layer” element to:

1. Toggle the visibility of the corresponding map layer
2. Toggle CSS classes to reflect its state

JS:

```html <script src=”https://gist.github.com/brightrain/9982555.js">\```

## Demo

Live demo:
http://brightrain.github.io/togglability/

Source on GitHub:
https://github.com/brightrain/togglability

I know there’s a growing “no GIS” school of thought that discourages turning layers on/off entirely — and in some contexts I agree.

But there are still many cases where layer toggling is powerful and, if done well, maybe even a little elegant.