Index: src/django_gheat/website/static/heatmap.js
===================================================================
--- src/django_gheat/website/static/heatmap.js	(revision 9275)
+++ src/django_gheat/website/static/heatmap.js	(revision 9276)
@@ -19,5 +19,5 @@
       //new OpenLayers.Control.ScaleLine(),
       new OpenLayers.Control.Permalink(),
-      new OpenLayers.Control.LayerSwitcher(),
+      //new OpenLayers.Control.LayerSwitcher(),
       new OpenLayers.Control.MousePosition({ 'displayProjection' : projection_wgs }),
     ],
@@ -56,10 +56,10 @@
   map.addLayer(signallayer);
 
-  $("#default").append("<span id=\"" + layerHeatmap.name + "\"><input type=checkbox id=togglelayer /><font style='color:rgb(" + layerHeatmap.colour + ")'>" + layerHeatmap.name + " </font><br /></span>");
+  $("#default").append("<span id=\"" + layerHeatmap.name + "\"><input type=checkbox id=togglelayer /><div id='layer_switcher_colour' style='background-color:rgb(" + layerHeatmap.colour + ")' /><font>" + layerHeatmap.name + " </font><br /></span>");
 
-  $("#default").append("<span id=\"" + layerHeatmap2.name + "\"><input type=checkbox id=togglelayer checked/><font style='color:rgb(" + layerHeatmap2.colour + ")'>" + layerHeatmap2.name + " </font><br /></span>");
+  $("#default").append("<span id=\"" + layerHeatmap2.name + "\"><input type=checkbox id=togglelayer checked/><div id='layer_switcher_colour' style='background-color:rgb(" + layerHeatmap2.colour + ")' /><font>" + layerHeatmap2.name + " </font><br /></span>");
 
-  $("#default").append("<span id=\"" + layerHeatmap3.name + "\"><input type=checkbox id=togglelayer checked/><font style='color:rgb(" + layerHeatmap3.colour + ")'>" + layerHeatmap3.name + " </font><br /></span>");
+  $("#default").append("<span id=\"" + layerHeatmap3.name + "\"><input type=checkbox id=togglelayer checked/><div id='layer_switcher_colour' style='background-color:rgb(" + layerHeatmap3.colour + ")' /><font>" + layerHeatmap3.name + " </font><br /></span>");
 
-  $("#default").append("<span id=\"" + signallayer.name + "\"><input type=checkbox id=togglelayer checked /><font style='color:rgb(" + signallayer.colour + ")'>Signal strength: 0 - 100</font><br /></span>");
+  $("#default").append("<span id=\"" + signallayer.name + "\"><input type=checkbox id=togglelayer checked /><div id='layer_switcher_colour' style='background-color:rgb(" + signallayer.colour + ")' /><font>Signal strength: 0 - 100</font><br /></span>");
 }
Index: src/django_gheat/website/static/heatmap_extensions.js
===================================================================
--- src/django_gheat/website/static/heatmap_extensions.js	(revision 9275)
+++ src/django_gheat/website/static/heatmap_extensions.js	(revision 9276)
@@ -69,4 +69,11 @@
   }); 
 
+  // toggle layer visibility per categorie
+  $("#togglecat").click(function(){
+    layertype = $(this).closest('div').attr('id');
+    
+
+  });
+
   // remove layer
   $("#rmvlayer").live("click", function(){
@@ -122,5 +129,5 @@
   // add filter per user
   $('#user_filter').click(function(){
-    if(this.value=='Add userfilter'){
+    if(this.text=='(Add all users)'){
       $.each(userlist, function(u, user){
         colour = Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);
@@ -138,10 +145,10 @@
         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');
+        $("#user").append("<span id=\"" + user + "\"><input type=checkbox id=togglelayer checked /><div id='layer_switcher_colour' style='background-color:rgb(" + colour + ")' /><font>" + user + " </font><a id=rmvlayer>X</a><br /></span>");
+      });
+      $(this).text('(Del all users');
     }
     else{
-      $(this).attr('value', 'Add userfilter');
+      $(this).text('(Add all users)');
       $.each(userlist, function(u, user){
         layer = map.getLayersByName(user);
@@ -153,5 +160,5 @@
   // add filter per node
   $('#node_filter').click(function(){
-    if(this.value=='Add nodefilter'){
+    if(this.text=='(Add all nodes)'){
       $.each(nodelist, function(n, node){
         colour = Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);
@@ -169,14 +176,14 @@
         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');
+        $("#node").append("<span class='node' id=\"" + node + "\"><input type=checkbox id=togglelayer checked /><div id='layer_switcher_colour' style='background-color:rgb(" + colour + ")' /><font>" + node + " </font><a id=rmvlayer>X</a><br /></span>");
+      });
+      $(this).text('(Del all nodes)');
     }
     else{
-      $(this).attr('value', 'Add nodefilter');
-      $.each(nodelist, function(n, node){
-        layer = map.getLayersByName(node);
+      $(this).text('(Add all nodes)');
+      $.each($('#node span'), function(s, span){
+        layer = map.getLayersByName(span.id);
         map.removeLayer(layer[0]);
+        $(span).remove();
       });
     }
@@ -251,5 +258,5 @@
     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>");
+    $("#custom").append("<span id=\"" + lname + "\"><input type=checkbox id=togglelayer checked /><div id='layer_switcher_colour' style='background-color:rgb(" + colour + ")' /><font>" + 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 9275)
+++ src/django_gheat/website/static/style.css	(revision 9276)
@@ -94,8 +94,7 @@
   position:absolute;
   right:-2px;
-  top:50%;
-  margin-top:-200px;
-  width:180px;
-  height:400px;
+  top:100px;
+  width:200px;
+  bottom:100px;
   background-color:#FFF;
   border:2px solid #BA0000;
@@ -103,5 +102,5 @@
   padding:0;
   font-size:10px;
-  overflow: auto;
+  overflow:auto;
 }
 
@@ -119,6 +118,5 @@
   position:absolute;
   right:-2px;
-  top:50%;
-  margin-top:-200px;
+  top:101px;
   width:17px;
   height:17px;
@@ -129,4 +127,14 @@
   font-size:15px;
   overflow: auto;
+}
+
+#layer_switcher_colour{
+  margin-top:4px;
+  margin-left:4px;
+  padding:0;
+  width:10px;
+  height:10px;
+  border:1px solid #000;
+  float:left;
 }
 
Index: src/django_gheat/website/templates/home.html
===================================================================
--- src/django_gheat/website/templates/home.html	(revision 9275)
+++ src/django_gheat/website/templates/home.html	(revision 9276)
@@ -59,8 +59,23 @@
   </div>
   <div id="layer_switcher">
-    <div id="layer_switcher_cat">Default 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 id="layer_switcher_cat">
+      <input type=checkbox id=togglecat checked />
+      Default layers
+    </div>
+    <p><span id="default"></span><p>
+    <div id="layer_switcher_cat">
+      <input type=checkbox id=togglecat checked />
+      Nodes <a style="margin-top:4px;font-size:10px;float:right;" id="node_filter">(Add all nodes)</a>
+    </div>
+    <p><span id="node"></span><p>
+    <div id="layer_switcher_cat">
+      <input type=checkbox id=togglecat checked />
+      Users <a style="margin-top:4px;font-size:10px;float:right;" id="user_filter">(Add all users)</a>
+    </div>
+    <p><span id="user"></span><P>
+    <div id="layer_switcher_cat">
+      <input type=checkbox id=togglecat checked />
+      Custom filters
+    </div><p><span id="custom"></span><p>
   </div>
 </body>