Index: src/django_gheat/website/static/OpenStreetMap.js
===================================================================
--- src/django_gheat/website/static/OpenStreetMap.js	(revision 9273)
+++ src/django_gheat/website/static/OpenStreetMap.js	(revision 9274)
@@ -149,5 +149,5 @@
         OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
     },
-    SWITCHER_CLASS: "default",
+    colour: "0,0,0",
     CLASS_NAME: "OpenLayers.Layer.Overlay"
 });
@@ -162,6 +162,5 @@
         OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
     },
-    SWITCHER_COLOUR: "90,90,90",
-    SWITCHER_CLASS: "default",
+    colour: "90,90,90",
     CLASS_NAME: "OpenLayers.Layer.Overlay"
 });
@@ -176,6 +175,5 @@
         OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
     },
-    SWITCHER_COLOUR: "255,0,0",
-    SWITCHER_CLASS: "default",
+    colour: "255,0,0",
     CLASS_NAME: "OpenLayers.Layer.Overlay"
 });
Index: src/django_gheat/website/static/heatmap.js
===================================================================
--- src/django_gheat/website/static/heatmap.js	(revision 9273)
+++ src/django_gheat/website/static/heatmap.js	(revision 9274)
@@ -52,3 +52,13 @@
   var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
   map.setCenter (lonLat, zoom);
+
+  $("#default").append("<span id=\"" + layerHeatmap.name + "\"><input type=checkbox id=togglelayer /><font style='color:rgb(" + layerHeatmap.colour + ")'>" + layerHeatmap.name + " </font><a id=rmvlayer>X</a><br /></span>");
+
+  $("#default").append("<span id=\"" + layerHeatmap2.name + "\"><input type=checkbox id=togglelayer checked/><font style='color:rgb(" + layerHeatmap2.colour + ")'>" + layerHeatmap2.name + " </font><a id=rmvlayer>X</a><br /></span>");
+
+  $("#default").append("<span id=\"" + layerHeatmap3.name + "\"><input type=checkbox id=togglelayer checked/><font style='color:rgb(" + layerHeatmap3.colour + ")'>" + layerHeatmap3.name + " </font><a id=rmvlayer>X</a><br /></span>");
+
+
+
+
 }
Index: src/django_gheat/website/static/heatmap_extensions.js
===================================================================
--- src/django_gheat/website/static/heatmap_extensions.js	(revision 9273)
+++ src/django_gheat/website/static/heatmap_extensions.js	(revision 9274)
@@ -65,5 +65,4 @@
           OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
         },
-      SWITCHER_CLASS: "signal",
       CLASS_NAME: "OpenLayers.Layer.Overlay"
       });
@@ -74,14 +73,5 @@
   });
 
-  var testarray = new Array();
-  $("#filter_text").append("<a id=remove>Get layers</a><br />");
-  $("#remove").click(function(){
-    testarray = map.getLayersByClass("OpenLayers.Layer.Overlay");
-    $.each(testarray, function(v, value){
-      colour = value.SWITCHER_COLOUR;
-      $("#filter_text").append("<span id=\"" + value.name + "\"><input type=checkbox id=togglelayer /><font style='color:rgb(" + colour + ")'>" + value.name + " </font><a id=rmvlayer>X</a><br /></span>");
-    });
-  });
-
+  // toggle layer visibility
   $("#togglelayer").live("click", function(){
     status = $(this).attr("checked");
@@ -91,10 +81,10 @@
   }); 
 
+  // remove layer
   $("#rmvlayer").live("click", function(){
-    layername = $(this).parents('span').attr('id');
+    layername = $(this).closest('span').attr('id');
     layer = map.getLayersByName(layername);
-    $("#filter_text").append("<br />Removed " + layername);
     map.removeLayer(layer[0]);
-    $(this).parents('span').remove();
+    $(this).closest('span').remove();
   });
 
@@ -107,4 +97,15 @@
     $("#filter").slideUp("fast");
     $("#info").slideToggle("fast"); 
+  });
+
+  // switcher toggle
+  $("#layer_switcher_toggle").click(function(){
+    $("#layer_switcher").toggle();
+    if($(this).text() == '+'){
+      $(this).html('-');
+    }
+    else{
+      $(this).html('+');
+    }
   });
 
@@ -145,10 +146,9 @@
             OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
           },
-        SWITCHER_COLOUR: colour,
-        SWITCHER_CLASS: "user",
         CLASS_NAME: "OpenLayers.Layer.Overlay"
         });
-        filterlayer = new OpenLayers.Layer.OSM.Overlay("User: "+ user, {isBaseLayer: false, visibility: true});
+        filterlayer = new OpenLayers.Layer.OSM.Overlay(user, {isBaseLayer: false, visibility: true});
         map.addLayer(filterlayer);
+        $("#user").append("<span id=\"" + user + "\"><input type=checkbox id=togglelayer checked /><font style='color:rgb(" + colour + ")'>" + user + " </font><a id=rmvlayer>X</a><br /></span>");
       });
       $(this).attr('value', 'Del userfilter');
@@ -157,5 +157,5 @@
       $(this).attr('value', 'Add userfilter');
       $.each(userlist, function(u, user){
-        layer = map.getLayersByName('User: ' + user);
+        layer = map.getLayersByName(user);
         map.removeLayer(layer[0]);
       });
@@ -177,11 +177,10 @@
             OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
           },
-        SWITCHER_COLOUR: colour,
-        SWITCHER_CLASS: "node",
         CLASS_NAME: "OpenLayers.Layer.Overlay"
         });
-        nodefilterlayer = new OpenLayers.Layer.OSM.Overlay("Node: "+ node, {isBaseLayer: false, visibility: true});
+        nodefilterlayer = new OpenLayers.Layer.OSM.Overlay(node, {isBaseLayer: false, visibility: true});
         map.addLayer(nodefilterlayer);
         console.log(nodefilterlayer);
+        $("#node").append("<span id=\"" + node + "\"><input type=checkbox id=togglelayer checked /><font style='color:rgb(" + colour + ")'>" + node + " </font><a id=rmvlayer>X</a><br /></span>");
       });
       $(this).attr('value', 'Del nodefilter');
@@ -190,5 +189,5 @@
       $(this).attr('value', 'Add nodefilter');
       $.each(nodelist, function(n, node){
-        layer = map.getLayersByName('Node: ' + node);
+        layer = map.getLayersByName(node);
         map.removeLayer(layer[0]);
       });
@@ -256,6 +255,5 @@
         OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
       },
-    SWITCHER_COLOURL: colour,
-    SWITCHER_CLASS: "custom",
+
     CLASS_NAME: "OpenLayers.Layer.Overlay"
     });
@@ -264,4 +262,6 @@
     filterlayer = new OpenLayers.Layer.OSM.Overlay(lname, {isBaseLayer: false, visibility: true});
     map.addLayer(filterlayer);
+
+    $("#custom").append("<span id=\"" + lname + "\"><input type=checkbox id=togglelayer checked /><font style='color:rgb(" + colour + ")'>" + lname + " </font><a id=rmvlayer>X</a><br /></span>");
   });
 });
Index: src/django_gheat/website/static/style.css
===================================================================
--- src/django_gheat/website/static/style.css	(revision 9273)
+++ src/django_gheat/website/static/style.css	(revision 9274)
@@ -89,4 +89,44 @@
   padding:5px;
   font-size:10px;
+}
+
+#layer_switcher{
+  position:absolute;
+  right:-2px;
+  top:50%;
+  margin-top:-200px;
+  width:180px;
+  height:400px;
+  background-color:#FFF;
+  border:2px solid #BA0000;
+  z-index:1;
+  padding:0;
+  font-size:10px;
+  overflow: auto;
+}
+
+#layer_switcher_cat{
+  width:100%-2px;
+  top:0px;
+  background-color:#BA0000;
+  padding-left:5px;
+  padding-right:5px;
+  font-size:18px; 
+  color:white;
+}
+
+#layer_switcher_toggle{
+  position:absolute;
+  right:-2px;
+  top:50%;
+  margin-top:-200px;
+  width:17px;
+  height:17px;
+  background-color:#FFF;
+  border:2px solid #BA0000;
+  z-index:2;
+  text-align:center;
+  font-size:15px;
+  overflow: auto;
 }
 
Index: src/django_gheat/website/templates/home.html
===================================================================
--- src/django_gheat/website/templates/home.html	(revision 9273)
+++ src/django_gheat/website/templates/home.html	(revision 9274)
@@ -45,6 +45,4 @@
           <input type="text" id="colour" name="colour"/> Colour<br /><br />
           <input type="button" id="add_filter" value="Add filter"/><br />
-          <input type="button" id="user_filter" value="Add userfilter"/><br />
-          <input type="button" id="node_filter" value="Add nodefilter"/><br />
         </form>
       </div>
@@ -58,4 +56,12 @@
     <div id="slider"></div>
   </div>
+  <div id="layer_switcher_toggle">-
+  </div>
+  <div id="layer_switcher">
+    <div id="layer_switcher_cat">Base layers</div><p><span id="default"></span><p>
+    <div id="layer_switcher_cat">Nodes</div><p><span id="node"></span><input type="button" id="node_filter" value="Add nodefilter"/><br /><p>
+    <div id="layer_switcher_cat">Users</div><p><span id="user"></span><input type="button" id="user_filter" value="Add userfilter"/><br /><P>
+    <div id="layer_switcher_cat">Custom filters</div><p><span id="custom"></span><p>
+  </div>
 </body>
 </html>