A very custom OpenLayers layer switcher

Openlayers has a Drupal module which enables you to add maps to your site. We added locations and categories to the events on CoventryMotoFest.com, and wanted to be able to show maps of certain event categories - or just all of them.

Once you get playing with Openlayers, though, you quickly find that it doesn't *look* that great. Whilst MapBox  provides incredible customisation of the map itself, the popups and layer switcher just don't look great. At all. Sorry.

So, I set about getting a fully-customisable layer switcher *outside* of the map. Having it separate to the map would aid usability on mobile.

Here's a very brief guide to how I did it.

Get an external layer switcher for free

We need an layer switcher external to the map. It turns out that there's a module for this (hurrah!). I installed the OpenLayers External Block Switcher module (OLEBS for short), and sure enough it gives a nice set of checkboxes in a block, once you've turned on the new Olebs behavior for that map, that you can put anywhere on the page.

Put the layer switcher with the map

The OLEBS block can go anywhere on the page, which is great, but I wanted it to be with the map - guaranteed. Cue a little gem of a module, Views Block Area, which allows you to put a block into the footer of a view! Genius.

Add some new footer content, and choose your swanky new Olebs block.

Cannibalise Olebs, make your own switcher

Now that we have everything we want, where we want it, we can play around with the appearance. The Olebs Javascript will still power the actual switching, so there's no need to delve in too deep. We can just theme the appearance.

Add some CSS to hide the checkboxes, some nice CSS animations, a Drupal behavior to link up the items to the checkboxes and then make the whole thing collapsible on mobile… and you get this!