Changeset 9316

Timestamp:

Jun 30, 2011, 3:26:19 PM (13 years ago)

Author:

dennisw

Message:

Set Leiden as center of map.
Layerswitcher categories can be toggled now. Small changes to css.

Location:

src/django_gheat/website

Files:

• static/heatmap.js (modified) (1 diff)
• static/heatmap_extensions.js (modified) (3 diffs)
• static/img/down.png (added)
• static/img/up.png (added)
• static/style.css (modified) (4 diffs)
• templates/home.html (modified) (1 diff)

src/django_gheat/website/static/heatmap.js

@@ -11 +11 @@
 
   if(lat=='null' || lon=='null' || zoom=='null'){
-    var lat   = 52.14068;
-    var lon   = 4.48319;
-    var zoom  = 16;
+    var lat   = 52.15514;
+    var lon   = 4.48959;
+    var zoom  = 13;
   }
   var projection_wgs = new OpenLayers.Projection("EPSG:4326"); // WGS 1984

src/django_gheat/website/static/heatmap_extensions.js

@@ -68 +68 @@
     stop: function(event, sig){
       signallayer = map.getLayersByName('signallayer');
-      console.log(signallayer[0]);
       signallayer[0].setUrl("/website/tile/${z}/${x},${y}.png?colour=250,250,0&signaal__gte=" + sig.values[0] + "&signaal__lte=" + sig.values[1]);
       signallayer[0].redraw();
@@ -144 +143 @@
 
   /**
+   * Toggles layerswitcher visibility.
+   * On 'off', toggler shows a '+'.
+   * On 'on', toggler shows a '-'.
+   */
+  $("#cat_hide").live("click", function(){
+    cat = $(this).parent('div').next('p').children('span')
+    cat.toggle();
+    if(cat.is(":visible")){
+      //FIXME: images are getting loaded the hard way. Replace '/static/'. '{{ STATIC_URL }}' doesn't seem to work here.
+      $(this).css('background-image', "url(/static/img/up.png)");
+    }
+    else{
+      $(this).css('background-image', "url(/static/img/down.png)");
+    }
+  });
+
+  /**
    * Fastest?
    * http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery
@@ -153 +169 @@
         userlist.push(json.gebruiker);
         $.each(json.meetrondje, function(m, meetrondje){
-          console.log(meetrondje.datum);
           $("#select_dataset").append($("<option/>").attr({"class":json.gebruiker, "value":meetrondje.naam}).text(meetrondje.naam));
           $.each(meetrondje.nodes, function(n, nodes){

src/django_gheat/website/static/style.css

@@ -102 +102 @@
   position:absolute;
   right:-2px;
-  top:100px;
+  top:50px;
   width:200px;
-  bottom:100px;
+  max-height:80%;
   background-color:#FFF;
   border:2px solid #BA0000;
@@ -117 +117 @@
   top:0px;
   background-color:#BA0000;
-  padding-left:5px;
+  padding-left:0px;
   padding-right:5px;
   font-size:18px; 
@@ -123 +123 @@
 }
 
+#cat_container{
+
+}
+
 #layer_switcher_toggle{
   position:absolute;
   right:-2px;
-  top:101px;
+  top:51px;
   width:17px;
   height:17px;
@@ -146 +150 @@
   float:left;
 }
+
+#cat_hide{
+  margin-top:4px;
+  margin-left:4px;
+  padding-left:-4px;
+  padding-top:-10px;
+  width:10px;
+  height:10px;
+  border:1px solid #000;
+  float:left;
+  background:url(img/up.png) no-repeat top left;
+  color:#000;
+  font-size:13px;
+  text-align:center;
+}
+
 
 #sig_slider{

src/django_gheat/website/templates/home.html

@@ -59 +59 @@
   </div>
   <div id="layer_switcher">
-    <div id="layer_switcher_cat">
-      <input type=checkbox id=togglecat class=default checked />
-      Default layers
+    <div id="cat_container">
+      <div id="layer_switcher_cat">
+        <div id="cat_hide"></div>
+        <input type=checkbox id=togglecat class=default checked />Default layers
+      </div>
+      <p><span id="default"></span></p>
     </div>
-    <p><span id="default"></span><p>
-    <div id="layer_switcher_cat">
-      <input type=checkbox id=togglecat class=node checked />
-      Nodes <a style="margin-top:4px;font-size:10px;float:right;" id="node_filter">(Add all nodes)</a>
+    <div id="cat_container">
+      <div id="layer_switcher_cat">
+        <div id="cat_hide"></div>
+        <input type=checkbox id=togglecat class=node 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>
-    <p><span id="node"></span><p>
-    <div id="layer_switcher_cat">
-      <input type=checkbox id=togglecat class=user checked />
-      Users <a style="margin-top:4px;font-size:10px;float:right;" id="user_filter">(Add all users)</a>
+    <div id="cat_container">
+      <div id="layer_switcher_cat">
+        <div id="cat_hide"></div>
+        <input type=checkbox id=togglecat class=user 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>
-    <p><span id="user"></span><P>
-    <div id="layer_switcher_cat">
-      <input type=checkbox id=togglecat class=custom checked />
-      Custom filters
-    </div><p><span id="custom"></span><p>
+    <div id="cat_container">
+      <div id="layer_switcher_cat">
+        <div id="cat_hide"></div>
+        <input type=checkbox id=togglecat class=custom checked />Custom filters
+      </div><p><span id="custom"></span></p>
+    </div>
   </div>
 </body>