source: src/django_gheat/website/static/heatmap_extensions.js@ 9297

Last change on this file since 9297 was 9297, checked in by dennisw, 13 years ago

Fixed permalink visibility.
Fixed layer toggle by category.
File size: 10.4 KB
Line 
1// Uses zoomlevel and mouseposition to call the nodelist.py view. View returns nodes in json format which is read and printed in document element.
2function getNodeList(zoomlevel, mousepos){
3 $.getJSON("/website/nodelist/" + zoomlevel + "," + mousepos.lat + "," + mousepos.lon,
4 function(json){
5 content = 'Wireless Leiden nodes on mouseposition:<br /><b>';
6 $.each(json, function(i,json){
7 content += json.fields.ssid + '<br />';
8 });
9 content += '</b>';
10 $("#node_list").html(content);
11 }
12 );
13}
14
15// Right way to get url parameters?: http://stackoverflow.com/questions/1403888/get-url-parameter-with-jquery/1404100#1404100
16function getURLParameter(name) {
17 return decodeURI(
18 (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
19 );
20}
21
22$(document).ready(function() {
23 var signallayer = '';
24 var userlist = new Array();
25 var nodelist = new Array();
26
27 // add colour picker
28 $("#colour").colorPicker();
29
30 // add date picker for start date
31 $("#start_date").datepicker({
32 dateFormat: "dd/mm/yy",
33 onSelect: function(dateValue, inst){
34 $("#end_date").datepicker("option", "minDate", dateValue);
35 }
36 });
37
38 // add date picker for end date
39 $("#end_date").datepicker({
40 dateFormat: "dd/mm/yy",
41 });
42
43 // add slider for signal strength filter
44 $("#slider").slider({
45 range: true,
46 min: 0,
47 max: 100,
48 values: [0, 100],
49 // while sliding, it changes the text above the slider to show the values realtime
50 slide: function(event, sig){
51 $("#sig_value").text("Signal strength: " + sig.values[0] + " - " + sig.values[1]);
52 $("#signallayer font").text("Signal strength: " + sig.values[0] + " - " + sig.values[1]);
53 },
54 // on slider stop, it sets a new URL with updated values and redraws the layer
55 stop: function(event, sig){
56 signallayer = map.getLayersByName('signallayer');
57 console.log(signallayer[0]);
58 signallayer[0].setUrl("/website/tile/${z}/${x},${y}.png?colour=250,250,0&signaal__gte=" + sig.values[0] + "&signaal__lte=" + sig.values[1]);
59 signallayer[0].redraw();
60 },
61 });
62
63 // toggle layer visibility
64 $("#togglelayer").live('click', function(){
65 status = $(this).attr("checked");
66 layername = $(this).parents('span').attr('id');
67 layer = map.getLayersByName(layername);
68 layer[0].setVisibility(status);
69 });
70
71 // toggle layer visibility per category
72 $("#togglecat").live("click", function(){
73 if($(this).attr("checked")){
74 status = true;
75 }
76 else{
77 status = false;
78 }
79 layertype = $(this).attr('class');
80 layers = new Array();
81 layers = $('#' + layertype).children('span');
82 $.each(layers, function(l, layer){
83 layer = map.getLayersByName(layer.id);
84 layer[0].setVisibility(status);
85 $(this).children('input').attr('checked', status);
86 });
87 });
88
89 // remove layer
90 $("#rmvlayer").live("click", function(){
91 layername = $(this).closest('span').attr('id');
92 layer = map.getLayersByName(layername);
93 map.removeLayer(layer[0]);
94 $(this).closest('span').remove();
95 });
96
97 // menu toggle
98 $("#menu_filter").click(function(){
99 $("#filter").slideToggle("fast");
100 $("#info").slideUp("fast");
101 });
102 $("#menu_info").click(function(){
103 $("#filter").slideUp("fast");
104 $("#info").slideToggle("fast");
105 });
106
107 // switcher toggle
108 $("#layer_switcher_toggle").click(function(){
109 $("#layer_switcher").toggle();
110 if($(this).text() == '+'){
111 $(this).html('-');
112 }
113 else{
114 $(this).html('+');
115 }
116 });
117
118 // Fastest?: http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery
119 $.getJSON("/website/filters/",
120 function(json) {
121 $.each(json, function(i,json){
122 $("#select_user").append($("<option/>").attr("value",json.gebruiker).text(json.gebruiker));
123 userlist.push(json.gebruiker);
124 $.each(json.meetrondje, function(m, meetrondje){
125 $("#select_dataset").append($("<option/>").attr({"class":json.gebruiker, "value":meetrondje.naam}).text(meetrondje.naam));
126 $.each(meetrondje.nodes, function(n, nodes){
127 $("#select_node").append($("<option/>").attr({"class":meetrondje.naam, "value":nodes}).text(nodes));
128 if(jQuery.inArray(nodes, nodelist)<0){
129 nodelist.push(nodes);
130 }
131 });
132 });
133 });
134 // Initiate the chain
135 $("#select_dataset").chained("#select_user");
136 $("#select_node").chained("#select_dataset");
137 }
138 );
139
140 // add filter per user
141 $('#user_filter').click(function(){
142 if(this.text=='(Add all users)'){
143 $.each(userlist, function(u, user){
144 colour = Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);
145 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
146 initialize: function(name, options) {
147 var url = [
148 "/website/tile/${z}/${x},${y}.png?&colour=" + colour + "&meetrondje__gebruiker__naam=" + user
149 ];
150 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
151 var newArguments = [name, url, options];
152 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
153 },
154 CLASS_NAME: "OpenLayers.Layer.Overlay"
155 });
156 filterlayer = new OpenLayers.Layer.OSM.Overlay(user, {isBaseLayer: false, visibility: true});
157 map.addLayer(filterlayer);
158 $("#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>");
159 });
160 $(this).text('(Del all users');
161 }
162 else{
163 $(this).text('(Add all users)');
164 $.each(userlist, function(u, user){
165 layer = map.getLayersByName(user);
166 map.removeLayer(layer[0]);
167 });
168 }
169 });
170
171 // add filter per node
172 $('#node_filter').click(function(){
173 if(this.text=='(Add all nodes)'){
174 $.each(nodelist, function(n, node){
175 colour = Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);
176 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
177 initialize: function(name, options) {
178 var url = [
179 "/website/tile/${z}/${x},${y}.png?&colour=" + colour + "&accespoint__ssid=" + node
180 ];
181 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
182 var newArguments = [name, url, options];
183 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
184 },
185 CLASS_NAME: "OpenLayers.Layer.Overlay"
186 });
187 nodefilterlayer = new OpenLayers.Layer.OSM.Overlay(node, {isBaseLayer: false, visibility: true});
188 map.addLayer(nodefilterlayer);
189 $("#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>");
190 });
191 $(this).text('(Del all nodes)');
192 }
193 else{
194 $(this).text('(Add all nodes)');
195 $.each($('#node span'), function(s, span){
196 layer = map.getLayersByName(span.id);
197 map.removeLayer(layer[0]);
198 $(span).remove();
199 });
200 }
201 });
202
203 // add custom filter
204 $('#add_filter').click(function(){
205 //get values from elements
206 user = $('#select_user option:selected').text();
207 dataset = $('#select_dataset option:selected').text();
208 wlnode = $('#select_node option:selected').text();
209 start_date = $('#start_date').val();
210 end_date = $('#end_date').val();
211 colour = encodeURIComponent(document.getElementById("colour").value);
212 lname = encodeURIComponent(document.getElementById("lname").value);
213
214 // HEX to RGB: http://stackoverflow.com/questions/5798868/need-some-tips-with-how-to-convert-a-hexadecimal-color-value-to-a-rgb-one/5798900#5798900
215 // '#' comes out as '%23', so substr() starts at char 3
216 colour = parseInt((colour.substr(3, 2)),16) + ',' + parseInt((colour.substr(5, 2)),16) + ',' + parseInt((colour.substr(7, 2)),16);
217
218 // some checks if values are correct, and adding them to parts of the link
219 if (user != ''){user='&meetrondje__gebruiker__naam='+user;}
220 if (dataset != ''){dataset='&meetrondje__naam='+dataset;}
221 if (wlnode != ''){wlnode='&accespoint__ssid='+wlnode;}
222 if (start_date && end_date){
223 sd_d=start_date.substr(0,2);
224 sd_m=start_date.substr(3,2);
225 sd_y=start_date.substr(6,4);
226
227 ed_d=end_date.substr(0,2);
228 ed_m=end_date.substr(3,2);
229 ed_y=end_date.substr(6,4);
230
231 start_date='&meetrondje__datum__gte=' + sd_y +'-'+ sd_m +'-'+ sd_d;
232 end_date='&meetrondje__datum__lte=' + ed_y +'-'+ ed_m +'-'+ ed_d;
233 }
234 if (start_date && !end_date){
235 sd_d=start_date.substr(0,2);
236 sd_m=start_date.substr(3,2);
237 sd_y=start_date.substr(6,4);
238 start_date='&meetrondje__datum__gte=' + sd_y +'-'+ sd_m +'-'+ sd_d;
239 end_date='';
240 }
241 if (!start_date && end_date){
242 ed_d=end_date.substr(0,2);
243 ed_m=end_date.substr(3,2);
244 ed_y=end_date.substr(6,4);
245 start_date='';
246 end_date='&meetrondje__datum__lte=' + ed_y +'-'+ ed_m +'-'+ ed_d;
247 }
248 if (colour != 'NaN,NaN,NaN'){colour=colour;}
249 else {colour = Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);}
250 if (lname != ''){lname=lname;}
251 else {lname = 'Custom Filter';}
252
253 // setting layer
254 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
255 initialize: function(name, options) {
256 var url = [
257 "/website/tile/${z}/${x},${y}.png?&colour=" + colour + user + dataset + wlnode + start_date + end_date
258 ];
259 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
260 var newArguments = [name, url, options];
261 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
262 },
263
264 CLASS_NAME: "OpenLayers.Layer.Overlay"
265 });
266
267 // adding layer
268 filterlayer = new OpenLayers.Layer.OSM.Overlay(lname, {isBaseLayer: false, visibility: true});
269 map.addLayer(filterlayer);
270
271 $("#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>");
272 });
273});
Note: See TracBrowser for help on using the repository browser.