Togglability
Many of the desktop GIS paradigms have 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 seem all that, well, elegant. And now that skeuomorphism is out and flat design is here to stay, the good ole checkbox might just be going the way of
This doesn’t hurt my feelings but it does leave some interesting voids and presents lots of possibilities.
Here’s my first departure from the old paradigm that I’m using pretty regularly. A sized
< div > floating directly over the map with some roundy edges and applying slight transparency. Position these togglable layer elements in a corner or off to the side and they work pretty well.
visible
not-visible
dual purpose layer toggler and legend
Styling
Set the css hover to cursor: pointer and change the background color and it becomes obvious that you can interact with it. Adding an icon can be used to invite users and indicate what it does. This allows you to maximize space by using the element for both togglability and as a legend. Moving the element into the background by lightening the background color, removing the border and changing the icon indicates its in-visibility. Conversely, applying a solid border, increasing opacity and swapping icons give the visual cue that this thing is live.
the css:
Toggling
Wire up a click event for each togglable-layer element to toggle the visibility of the layer on the map and also to toggle css classes that visually indicate the visibility state of that layer.
the js:
You can see this in action,
demo of togglable layers using recreation sites at Wenatchee National Forest
I realize that there is a growing contingency of ‘no GIS’ proponents who would do away with the concept of turning layers of data on and off and, in some contexts, I agree. But there are many use cases where this can be extremely powerful and, if done well, dare I say, elegant.
