Changeset 9274 for src/django_gheat/website/static

Timestamp:

Jun 21, 2011, 8:02:44 PM (13 years ago)

Author:

dennisw

Message:

Custom layer switcher has it's own div now. Some visual stuff added like div toggle and categories (Base layers, Users, etc).

Location:

src/django_gheat/website/static

Files:

• OpenStreetMap.js (modified) (3 diffs)
• heatmap.js (modified) (1 diff)
• heatmap_extensions.js (modified) (10 diffs)
• style.css (modified) (1 diff)

src/django_gheat/website/static/OpenStreetMap.js

@@ -149 +149 @@
         OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
     },
-    SWITCHER_CLASS: "default",
+    colour: "0,0,0",
     CLASS_NAME: "OpenLayers.Layer.Overlay"
 });
@@ -162 +162 @@
         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 +175 @@
         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"
 });

src/django_gheat/website/static/heatmap.js

@@ -52 +52 @@
   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>");
+
+
+
+
 }

src/django_gheat/website/static/heatmap_extensions.js

@@ -65 +65 @@
           OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
         },
-      SWITCHER_CLASS: "signal",
       CLASS_NAME: "OpenLayers.Layer.Overlay"
       });
@@ -74 +73 @@
   });
 
-  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 +81 @@
   }); 
 
+  // 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 +97 @@
     $("#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 +146 @@
             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 +157 @@
       $(this).attr('value', 'Add userfilter');
       $.each(userlist, function(u, user){
-        layer = map.getLayersByName('User: ' + user);
+        layer = map.getLayersByName(user);
         map.removeLayer(layer[0]);
       });
@@ -177 +177 @@
             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 +189 @@
       $(this).attr('value', 'Add nodefilter');
       $.each(nodelist, function(n, node){
-        layer = map.getLayersByName('Node: ' + node);
+        layer = map.getLayersByName(node);
         map.removeLayer(layer[0]);
       });
@@ -256 +255 @@
         OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
       },
-    SWITCHER_COLOURL: colour,
-    SWITCHER_CLASS: "custom",
+
     CLASS_NAME: "OpenLayers.Layer.Overlay"
     });
@@ -264 +262 @@
     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>");
   });
 });

src/django_gheat/website/static/style.css

@@ -89 +89 @@
   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;
 }