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

Legend:

Unmodified
Added
Removed

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

    r9273 r9274  
    149149        OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
    150150    },
    151     SWITCHER_CLASS: "default",
     151    colour: "0,0,0",
    152152    CLASS_NAME: "OpenLayers.Layer.Overlay"
    153153});
    … …  
    162162        OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
    163163    },
    164     SWITCHER_COLOUR: "90,90,90",
    165     SWITCHER_CLASS: "default",
     164    colour: "90,90,90",
    166165    CLASS_NAME: "OpenLayers.Layer.Overlay"
    167166});
    … …  
    176175        OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
    177176    },
    178     SWITCHER_COLOUR: "255,0,0",
    179     SWITCHER_CLASS: "default",
     177    colour: "255,0,0",
    180178    CLASS_NAME: "OpenLayers.Layer.Overlay"
    181179});

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

    r9269 r9274  
    5252  var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
    5353  map.setCenter (lonLat, zoom);
     54
     55  $("#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>");
     56
     57  $("#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>");
     58
     59  $("#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>");
     60
     61
     62
     63
    5464}

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

    r9273 r9274  
    6565          OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
    6666        },
    67       SWITCHER_CLASS: "signal",
    6867      CLASS_NAME: "OpenLayers.Layer.Overlay"
    6968      });
    … …  
    7473  });
    7574
    76   var testarray = new Array();
    77   $("#filter_text").append("<a id=remove>Get layers</a><br />");
    78   $("#remove").click(function(){
    79     testarray = map.getLayersByClass("OpenLayers.Layer.Overlay");
    80     $.each(testarray, function(v, value){
    81       colour = value.SWITCHER_COLOUR;
    82       $("#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>");
    83     });
    84   });
    85 
     75  // toggle layer visibility
    8676  $("#togglelayer").live("click", function(){
    8777    status = $(this).attr("checked");
    … …  
    9181  });
    9282
     83  // remove layer
    9384  $("#rmvlayer").live("click", function(){
    94     layername = $(this).parents('span').attr('id');
     85    layername = $(this).closest('span').attr('id');
    9586    layer = map.getLayersByName(layername);
    96     $("#filter_text").append("<br />Removed " + layername);
    9787    map.removeLayer(layer[0]);
    98     $(this).parents('span').remove();
     88    $(this).closest('span').remove();
    9989  });
    10090
    … …  
    10797    $("#filter").slideUp("fast");
    10898    $("#info").slideToggle("fast");
     99  });
     100
     101  // switcher toggle
     102  $("#layer_switcher_toggle").click(function(){
     103    $("#layer_switcher").toggle();
     104    if($(this).text() == '+'){
     105      $(this).html('-');
     106    }
     107    else{
     108      $(this).html('+');
     109    }
    109110  });
    110111
    … …  
    145146            OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
    146147          },
    147         SWITCHER_COLOUR: colour,
    148         SWITCHER_CLASS: "user",
    149148        CLASS_NAME: "OpenLayers.Layer.Overlay"
    150149        });
    151         filterlayer = new OpenLayers.Layer.OSM.Overlay("User: "+ user, {isBaseLayer: false, visibility: true});
     150        filterlayer = new OpenLayers.Layer.OSM.Overlay(user, {isBaseLayer: false, visibility: true});
    152151        map.addLayer(filterlayer);
     152        $("#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>");
    153153      });
    154154      $(this).attr('value', 'Del userfilter');
    … …  
    157157      $(this).attr('value', 'Add userfilter');
    158158      $.each(userlist, function(u, user){
    159         layer = map.getLayersByName('User: ' + user);
     159        layer = map.getLayersByName(user);
    160160        map.removeLayer(layer[0]);
    161161      });
    … …  
    177177            OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
    178178          },
    179         SWITCHER_COLOUR: colour,
    180         SWITCHER_CLASS: "node",
    181179        CLASS_NAME: "OpenLayers.Layer.Overlay"
    182180        });
    183         nodefilterlayer = new OpenLayers.Layer.OSM.Overlay("Node: "+ node, {isBaseLayer: false, visibility: true});
     181        nodefilterlayer = new OpenLayers.Layer.OSM.Overlay(node, {isBaseLayer: false, visibility: true});
    184182        map.addLayer(nodefilterlayer);
    185183        console.log(nodefilterlayer);
     184        $("#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>");
    186185      });
    187186      $(this).attr('value', 'Del nodefilter');
    … …  
    190189      $(this).attr('value', 'Add nodefilter');
    191190      $.each(nodelist, function(n, node){
    192         layer = map.getLayersByName('Node: ' + node);
     191        layer = map.getLayersByName(node);
    193192        map.removeLayer(layer[0]);
    194193      });
    … …  
    256255        OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
    257256      },
    258     SWITCHER_COLOURL: colour,
    259     SWITCHER_CLASS: "custom",
     257
    260258    CLASS_NAME: "OpenLayers.Layer.Overlay"
    261259    });
    … …  
    264262    filterlayer = new OpenLayers.Layer.OSM.Overlay(lname, {isBaseLayer: false, visibility: true});
    265263    map.addLayer(filterlayer);
     264
     265    $("#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>");
    266266  });
    267267});

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

    r9269 r9274  
    8989  padding:5px;
    9090  font-size:10px;
     91}
     92
     93#layer_switcher{
     94  position:absolute;
     95  right:-2px;
     96  top:50%;
     97  margin-top:-200px;
     98  width:180px;
     99  height:400px;
     100  background-color:#FFF;
     101  border:2px solid #BA0000;
     102  z-index:1;
     103  padding:0;
     104  font-size:10px;
     105  overflow: auto;
     106}
     107
     108#layer_switcher_cat{
     109  width:100%-2px;
     110  top:0px;
     111  background-color:#BA0000;
     112  padding-left:5px;
     113  padding-right:5px;
     114  font-size:18px;
     115  color:white;
     116}
     117
     118#layer_switcher_toggle{
     119  position:absolute;
     120  right:-2px;
     121  top:50%;
     122  margin-top:-200px;
     123  width:17px;
     124  height:17px;
     125  background-color:#FFF;
     126  border:2px solid #BA0000;
     127  z-index:2;
     128  text-align:center;
     129  font-size:15px;
     130  overflow: auto;
    91131}
    92132

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

    r9270 r9274  
    4545          <input type="text" id="colour" name="colour"/> Colour<br /><br />
    4646          <input type="button" id="add_filter" value="Add filter"/><br />
    47           <input type="button" id="user_filter" value="Add userfilter"/><br />
    48           <input type="button" id="node_filter" value="Add nodefilter"/><br />
    4947        </form>
    5048      </div>
    … …  
    5856    <div id="slider"></div>
    5957  </div>
     58  <div id="layer_switcher_toggle">-
     59  </div>
     60  <div id="layer_switcher">
     61    <div id="layer_switcher_cat">Base 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>
     65  </div>
    6066</body>
    6167</html>
Note: See TracChangeset for help on using the changeset viewer.