Changeset 9276 for src/django_gheat


Ignore:
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
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • src/django_gheat/website/static/heatmap.js

    r9275 r9276  
    1919      //new OpenLayers.Control.ScaleLine(),
    2020      new OpenLayers.Control.Permalink(),
    21       new OpenLayers.Control.LayerSwitcher(),
     21      //new OpenLayers.Control.LayerSwitcher(),
    2222      new OpenLayers.Control.MousePosition({ 'displayProjection' : projection_wgs }),
    2323    ],
    … …  
    5656  map.addLayer(signallayer);
    5757
    58   $("#default").append("<span id=\"" + layerHeatmap.name + "\"><input type=checkbox id=togglelayer /><font style='color:rgb(" + layerHeatmap.colour + ")'>" + layerHeatmap.name + " </font><br /></span>");
     58  $("#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>");
    5959
    60   $("#default").append("<span id=\"" + layerHeatmap2.name + "\"><input type=checkbox id=togglelayer checked/><font style='color:rgb(" + layerHeatmap2.colour + ")'>" + layerHeatmap2.name + " </font><br /></span>");
     60  $("#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>");
    6161
    62   $("#default").append("<span id=\"" + layerHeatmap3.name + "\"><input type=checkbox id=togglelayer checked/><font style='color:rgb(" + layerHeatmap3.colour + ")'>" + layerHeatmap3.name + " </font><br /></span>");
     62  $("#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>");
    6363
    64   $("#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>");
     64  $("#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>");
    6565}

  • src/django_gheat/website/static/heatmap_extensions.js

    r9275 r9276  
    6969  });
    7070
     71  // toggle layer visibility per categorie
     72  $("#togglecat").click(function(){
     73    layertype = $(this).closest('div').attr('id');
     74   
     75
     76  });
     77
    7178  // remove layer
    7279  $("#rmvlayer").live("click", function(){
    … …  
    122129  // add filter per user
    123130  $('#user_filter').click(function(){
    124     if(this.value=='Add userfilter'){
     131    if(this.text=='(Add all users)'){
    125132      $.each(userlist, function(u, user){
    126133        colour = Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);
    … …  
    138145        filterlayer = new OpenLayers.Layer.OSM.Overlay(user, {isBaseLayer: false, visibility: true});
    139146        map.addLayer(filterlayer);
    140         $("#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>");
    141       });
    142       $(this).attr('value', 'Del userfilter');
     147        $("#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>");
     148      });
     149      $(this).text('(Del all users');
    143150    }
    144151    else{
    145       $(this).attr('value', 'Add userfilter');
     152      $(this).text('(Add all users)');
    146153      $.each(userlist, function(u, user){
    147154        layer = map.getLayersByName(user);
    … …  
    153160  // add filter per node
    154161  $('#node_filter').click(function(){
    155     if(this.value=='Add nodefilter'){
     162    if(this.text=='(Add all nodes)'){
    156163      $.each(nodelist, function(n, node){
    157164        colour = Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);
    … …  
    169176        nodefilterlayer = new OpenLayers.Layer.OSM.Overlay(node, {isBaseLayer: false, visibility: true});
    170177        map.addLayer(nodefilterlayer);
    171         console.log(nodefilterlayer);
    172         $("#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>");
    173       });
    174       $(this).attr('value', 'Del nodefilter');
     178        $("#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>");
     179      });
     180      $(this).text('(Del all nodes)');
    175181    }
    176182    else{
    177       $(this).attr('value', 'Add nodefilter');
    178       $.each(nodelist, function(n, node){
    179         layer = map.getLayersByName(node);
     183      $(this).text('(Add all nodes)');
     184      $.each($('#node span'), function(s, span){
     185        layer = map.getLayersByName(span.id);
    180186        map.removeLayer(layer[0]);
     187        $(span).remove();
    181188      });
    182189    }
    … …  
    251258    map.addLayer(filterlayer);
    252259
    253     $("#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>");
     260    $("#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>");
    254261  });
    255262});

  • src/django_gheat/website/static/style.css

    r9274 r9276  
    9494  position:absolute;
    9595  right:-2px;
    96   top:50%;
    97   margin-top:-200px;
    98   width:180px;
    99   height:400px;
     96  top:100px;
     97  width:200px;
     98  bottom:100px;
    10099  background-color:#FFF;
    101100  border:2px solid #BA0000;
    … …  
    103102  padding:0;
    104103  font-size:10px;
    105   overflow: auto;
     104  overflow:auto;
    106105}
    107106
    … …  
    119118  position:absolute;
    120119  right:-2px;
    121   top:50%;
    122   margin-top:-200px;
     120  top:101px;
    123121  width:17px;
    124122  height:17px;
    … …  
    129127  font-size:15px;
    130128  overflow: auto;
     129}
     130
     131#layer_switcher_colour{
     132  margin-top:4px;
     133  margin-left:4px;
     134  padding:0;
     135  width:10px;
     136  height:10px;
     137  border:1px solid #000;
     138  float:left;
    131139}
    132140

  • src/django_gheat/website/templates/home.html

    r9275 r9276  
    5959  </div>
    6060  <div id="layer_switcher">
    61     <div id="layer_switcher_cat">Default layers</div><p><span id="default"></span><p>
    62     <div id="layer_switcher_cat">Nodes</div><p><span id="node"></span><input type="button" id="node_filter" value="Add nodefilter"/><br /><p>
    63     <div id="layer_switcher_cat">Users</div><p><span id="user"></span><input type="button" id="user_filter" value="Add userfilter"/><br /><P>
    64     <div id="layer_switcher_cat">Custom filters</div><p><span id="custom"></span><p>
     61    <div id="layer_switcher_cat">
     62      <input type=checkbox id=togglecat checked />
     63      Default layers
     64    </div>
     65    <p><span id="default"></span><p>
     66    <div id="layer_switcher_cat">
     67      <input type=checkbox id=togglecat checked />
     68      Nodes <a style="margin-top:4px;font-size:10px;float:right;" id="node_filter">(Add all nodes)</a>
     69    </div>
     70    <p><span id="node"></span><p>
     71    <div id="layer_switcher_cat">
     72      <input type=checkbox id=togglecat checked />
     73      Users <a style="margin-top:4px;font-size:10px;float:right;" id="user_filter">(Add all users)</a>
     74    </div>
     75    <p><span id="user"></span><P>
     76    <div id="layer_switcher_cat">
     77      <input type=checkbox id=togglecat checked />
     78      Custom filters
     79    </div><p><span id="custom"></span><p>
    6580  </div>
    6681</body>
Note: See TracChangeset for help on using the changeset viewer.