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 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…
<span id='so-blinky' style='text-decoration: blink;'>i m so blinky</span>
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 was using regularly: a sized div floating directly over the map with rounded edges and slight transparency. Position these togglable layer elements in a corner or off to the side and they work surprisingly well.
visible
not-visible
dual purpose layer toggler and legend
Set the CSS hover to cursor: pointer and change the background color so it's obvious that the element is interactive. Adding an icon can help signal its purpose. This lets you maximize space by using the element for both layer toggling and as a legend.
A lighter background, no border, and a muted icon indicate “off.” A solid border, increased opacity, and a swapped icon visually communicate that the layer is “on.”
There’s a growing contingency of “no GIS” proponents who argue that toggling layers should disappear entirely. In some contexts, I agree. But there are still many cases where layer toggling is extremely powerful and — if done well — maybe even a little elegant.
