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

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

Added SWITCHER_COLOUR & SWITCHER_CLASS to layers. The colour part is to give the layernames their corresponding map colours. The class part is more of a test for something else I'm trying.
File size: 10.2 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 },
53 // on slider stop, it tries to delete the old layer and creates a new layer with the slider values
54 stop: function(event, sig){
55 if(signallayer){
56 map.removeLayer(signallayer);
57 }
58 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
59 initialize: function(name, options) {
60 var url = [
61 "/website/tile/${z}/${x},${y}.png?colour=250,250,0&signaal__gte=" + sig.values[0] + "&signaal__lte=" + sig.values[1]
62 ];
63 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
64 var newArguments = [name, url, options];
65 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
66 },
67 SWITCHER_CLASS: "signal",
68 CLASS_NAME: "OpenLayers.Layer.Overlay"
69 });
70 lname = "Signal strength: " + sig.values[0] + " - " + sig.values[1];
71 signallayer = new OpenLayers.Layer.OSM.Overlay(lname, {isBaseLayer: false, visibility: true});
72 map.addLayer(signallayer);
73 },
74 });
75
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
86 $("#togglelayer").live("click", function(){
87 status = $(this).attr("checked");
88 layername = $(this).parents('span').attr('id');
89 layer = map.getLayersByName(layername);
90 layer[0].setVisibility(status);
91 });
92
93 $("#rmvlayer").live("click", function(){
94 layername = $(this).parents('span').attr('id');
95 layer = map.getLayersByName(layername);
96 $("#filter_text").append("<br />Removed " + layername);
97 map.removeLayer(layer[0]);
98 $(this).parents('span').remove();
99 });
100
101 // menu toggle
102 $("#menu_filter").click(function(){
103 $("#filter").slideToggle("fast");
104 $("#info").slideUp("fast");
105 });
106 $("#menu_info").click(function(){
107 $("#filter").slideUp("fast");
108 $("#info").slideToggle("fast");
109 });
110
111 // Fastest?: http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery
112 $.getJSON("/website/filters/",
113 function(json) {
114 $.each(json, function(i,json){
115 $("#select_user").append($("<option/>").attr("value",json.gebruiker).text(json.gebruiker));
116 userlist.push(json.gebruiker);
117 $.each(json.meetrondje, function(m, meetrondje){
118 $("#select_dataset").append($("<option/>").attr({"class":json.gebruiker, "value":meetrondje.naam}).text(meetrondje.naam));
119 $.each(meetrondje.nodes, function(n, nodes){
120 $("#select_node").append($("<option/>").attr({"class":meetrondje.naam, "value":nodes}).text(nodes));
121 if(jQuery.inArray(nodes, nodelist)<0){
122 nodelist.push(nodes);
123 }
124 });
125 });
126 });
127 // Initiate the chain
128 $("#select_dataset").chained("#select_user");
129 $("#select_node").chained("#select_dataset");
130 }
131 );
132
133 // add filter per user
134 $('#user_filter').click(function(){
135 if(this.value=='Add userfilter'){
136 $.each(userlist, function(u, user){
137 colour = Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);
138 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
139 initialize: function(name, options) {
140 var url = [
141 "/website/tile/${z}/${x},${y}.png?&colour=" + colour + "&meetrondje__gebruiker__naam=" + user
142 ];
143 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
144 var newArguments = [name, url, options];
145 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
146 },
147 SWITCHER_COLOUR: colour,
148 SWITCHER_CLASS: "user",
149 CLASS_NAME: "OpenLayers.Layer.Overlay"
150 });
151 filterlayer = new OpenLayers.Layer.OSM.Overlay("User: "+ user, {isBaseLayer: false, visibility: true});
152 map.addLayer(filterlayer);
153 });
154 $(this).attr('value', 'Del userfilter');
155 }
156 else{
157 $(this).attr('value', 'Add userfilter');
158 $.each(userlist, function(u, user){
159 layer = map.getLayersByName('User: ' + user);
160 map.removeLayer(layer[0]);
161 });
162 }
163 });
164
165 // add filter per node
166 $('#node_filter').click(function(){
167 if(this.value=='Add nodefilter'){
168 $.each(nodelist, function(n, node){
169 colour = Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);
170 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
171 initialize: function(name, options) {
172 var url = [
173 "/website/tile/${z}/${x},${y}.png?&colour=" + colour + "&accespoint__ssid=" + node
174 ];
175 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
176 var newArguments = [name, url, options];
177 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
178 },
179 SWITCHER_COLOUR: colour,
180 SWITCHER_CLASS: "node",
181 CLASS_NAME: "OpenLayers.Layer.Overlay"
182 });
183 nodefilterlayer = new OpenLayers.Layer.OSM.Overlay("Node: "+ node, {isBaseLayer: false, visibility: true});
184 map.addLayer(nodefilterlayer);
185 console.log(nodefilterlayer);
186 });
187 $(this).attr('value', 'Del nodefilter');
188 }
189 else{
190 $(this).attr('value', 'Add nodefilter');
191 $.each(nodelist, function(n, node){
192 layer = map.getLayersByName('Node: ' + node);
193 map.removeLayer(layer[0]);
194 });
195 }
196 });
197
198 // add custom filter
199 $('#add_filter').click(function(){
200 //get values from elements
201 user = $('#select_user option:selected').text();
202 dataset = $('#select_dataset option:selected').text();
203 wlnode = $('#select_node option:selected').text();
204 start_date = $('#start_date').val();
205 end_date = $('#end_date').val();
206 colour = encodeURIComponent(document.getElementById("colour").value);
207 lname = encodeURIComponent(document.getElementById("lname").value);
208
209 // 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
210 // '#' comes out as '%23', so substr() starts at char 3
211 colour = parseInt((colour.substr(3, 2)),16) + ',' + parseInt((colour.substr(5, 2)),16) + ',' + parseInt((colour.substr(7, 2)),16);
212
213 // some checks if values are correct, and adding them to parts of the link
214 if (user != ''){user='&meetrondje__gebruiker__naam='+user;}
215 if (dataset != ''){dataset='&meetrondje__naam='+dataset;}
216 if (wlnode != ''){wlnode='&accespoint__ssid='+wlnode;}
217 if (start_date && end_date){
218 sd_d=start_date.substr(0,2);
219 sd_m=start_date.substr(3,2);
220 sd_y=start_date.substr(6,4);
221
222 ed_d=end_date.substr(0,2);
223 ed_m=end_date.substr(3,2);
224 ed_y=end_date.substr(6,4);
225
226 start_date='&meetrondje__datum__gte=' + sd_y +'-'+ sd_m +'-'+ sd_d;
227 end_date='&meetrondje__datum__lte=' + ed_y +'-'+ ed_m +'-'+ ed_d;
228 }
229 if (start_date && !end_date){
230 sd_d=start_date.substr(0,2);
231 sd_m=start_date.substr(3,2);
232 sd_y=start_date.substr(6,4);
233 start_date='&meetrondje__datum__gte=' + sd_y +'-'+ sd_m +'-'+ sd_d;
234 end_date='';
235 }
236 if (!start_date && end_date){
237 ed_d=end_date.substr(0,2);
238 ed_m=end_date.substr(3,2);
239 ed_y=end_date.substr(6,4);
240 start_date='';
241 end_date='&meetrondje__datum__lte=' + ed_y +'-'+ ed_m +'-'+ ed_d;
242 }
243 if (colour != 'NaN,NaN,NaN'){colour=colour;}
244 else {colour = Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);}
245 if (lname != ''){lname=lname;}
246 else {lname = 'Custom Filter';}
247
248 // setting layer
249 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
250 initialize: function(name, options) {
251 var url = [
252 "/website/tile/${z}/${x},${y}.png?&colour=" + colour + user + dataset + wlnode + start_date + end_date
253 ];
254 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
255 var newArguments = [name, url, options];
256 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
257 },
258 SWITCHER_COLOURL: colour,
259 SWITCHER_CLASS: "custom",
260 CLASS_NAME: "OpenLayers.Layer.Overlay"
261 });
262
263 // adding layer
264 filterlayer = new OpenLayers.Layer.OSM.Overlay(lname, {isBaseLayer: false, visibility: true});
265 map.addLayer(filterlayer);
266 });
267});
Note: See TracBrowser for help on using the repository browser.