Index: src/django_gheat/website/static/heatmap_extensions.js
===================================================================
--- src/django_gheat/website/static/heatmap_extensions.js	(revision 9212)
+++ src/django_gheat/website/static/heatmap_extensions.js	(revision 9213)
@@ -13,9 +13,16 @@
     if (nodelist.readyState==4 && nodelist.status==200){
       json=eval('(' + nodelist.responseText + ')');
-      var list = '<br>';
-      for (var i=0; i<json.length; i++){
-        list += json[i].fields.ssid + '<br>';
+      var list;
+      if (json.length>0){
+        list = '<center>Wireless Leiden nodes on mouseposition:<br /><b>';
+        for (var i=0; i<json.length; i++){
+          list += json[i].fields.ssid + '<br />';
+        }
+        list += '</b></center>';
       }
-      document.getElementById('nodelist').innerHTML=list;
+      else{
+        list = '<center>No nodes to display.</center>';
+      }
+      document.getElementById('node_list').innerHTML=list;
     }
   }
@@ -25,20 +32,46 @@
 
 
-// Retrieve form values for filter and pass them on to addFilter()
-function filters(){
-  var user = encodeURIComponent(document.getElementById("user").value);
-  var dataset = encodeURIComponent(document.getElementById("dataset").value);
-  var wlnode = encodeURIComponent(document.getElementById("wlnode").value);
-  var enc = encodeURIComponent(document.getElementById("enc").value);
-  var date = encodeURIComponent(document.getElementById("date").value);
-  var colour = encodeURIComponent(document.getElementById("colour").value);
-  var lname = encodeURIComponent(document.getElementById("lname").value);
+// Get filter values from django view and serve as option list
+function getFilters(){
+  var filterlist;
 
-  addFilter(user, dataset, wlnode, enc, date, colour, lname);
+  if (window.XMLHttpRequest){
+    filterlist=new XMLHttpRequest();
+  }
+  else{
+    filterlist=new ActiveXObject("Microsoft.XMLHTTP");
+  }
+
+  filterlist.onreadystatechange=function(){
+    if (filterlist.readyState==4 && filterlist.status==200){
+      json=eval('(' + filterlist.responseText + ')');
+      var list = '<form method="get" action="">';
+      list += '<select id="wlnode" style="width:104px"><option></option>';
+      for (var i=0; i<json.length; i++){
+        list += '<option>' + json[i].fields.ssid + '</option>';
+      }
+      list += '</select> WLnode<br />';
+      list += '<input type="text" id="colour" name="colour" size="10"/> Colour<br />';
+      list += '<input type="text" id="lname" name="lname" size="10"/> Layername<br />';
+      list += '<input type="button" value="Add filter" onClick="addFilter()"/>';
+      list += '</form>';
+      document.getElementById('filter_list').innerHTML=list;
+    }
+  }
+  filterlist.open("GET","/website/filters",true);
+  filterlist.send();
 }
 
 
 // Some value checks, create an overlay using these values and place it on the map.
-function addFilter(user, dataset, wlnode, enc, date, colour, lname){
+function addFilter(){
+
+  var user = '';
+  var dataset = '';
+  var wlnode = encodeURIComponent(document.getElementById("wlnode").value);
+  var enc ='';
+  var date = '';
+  var colour = encodeURIComponent(document.getElementById("colour").value);
+  var lname = encodeURIComponent(document.getElementById("lname").value);
 
   if (user != ''){user='&accespoint__id='+user;} 
Index: src/django_gheat/website/static/style.css
===================================================================
--- src/django_gheat/website/static/style.css	(revision 9212)
+++ src/django_gheat/website/static/style.css	(revision 9213)
@@ -57,5 +57,5 @@
 }
 
-#filters{
+#filter{
   width:100%-10px;
   display:none;
@@ -63,5 +63,5 @@
 }
 
-#filters_text{
+#filter_text{
   height:100%;
   width:570px;
@@ -70,5 +70,5 @@
 }
 
-#filters_list{
+#filter_list{
   padding:5px;
   width:200px;
@@ -76,4 +76,16 @@
   float:right;
   margin-bottom:5px;
+}
+
+#node_list{
+  position:absolute;
+  left:50%;
+  margin-left:-150px;
+  bottom:-2px;
+  width:300px;
+  background-color:#FFF;
+  border:2px solid #BA0000;
+  z-index:1;
+  padding:5px;
 }
 	
@@ -84,4 +96,5 @@
 A:link{
   color:#FFF;
+  padding-left:8px;
 }
 
