Changeset 9276 for src/django_gheat/website/static

Timestamp:

Jun 22, 2011, 1:51:11 PM (13 years ago)

Author:

dennisw

Message:

Colourboxes next to layernames (looks better than coloured layernames).
Adding/removing all user/node layers works again.
Disabled OpenLayer's layer switcher since the custom one works just as well.

Location:

src/django_gheat/website/static

Files:

• heatmap.js (modified) (2 diffs)
• heatmap_extensions.js (modified) (6 diffs)
• style.css (modified) (4 diffs)

src/django_gheat/website/static/heatmap.js

@@ -19 +19 @@
       //new OpenLayers.Control.ScaleLine(),
       new OpenLayers.Control.Permalink(),
-      new OpenLayers.Control.LayerSwitcher(),
+      //new OpenLayers.Control.LayerSwitcher(),
       new OpenLayers.Control.MousePosition({ 'displayProjection' : projection_wgs }),
     ],
@@ -56 +56 @@
   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>");
 }

src/django_gheat/website/static/heatmap_extensions.js

@@ -69 +69 @@
   }); 
 
+  // toggle layer visibility per categorie
+  $("#togglecat").click(function(){
+    layertype = $(this).closest('div').attr('id');
+    
+
+  });
+
   // remove layer
   $("#rmvlayer").live("click", function(){
@@ -122 +129 @@
   // 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 +145 @@
         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 +160 @@
   // 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 +176 @@
         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 +258 @@
     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>");
   });
 });

src/django_gheat/website/static/style.css

@@ -94 +94 @@
   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 +102 @@
   padding:0;
   font-size:10px;
-  overflow: auto;
+  overflow:auto;
 }
 
@@ -119 +118 @@
   position:absolute;
   right:-2px;
-  top:50%;
-  margin-top:-200px;
+  top:101px;
   width:17px;
   height:17px;
@@ -129 +127 @@
   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;
 }