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

Last change on this file since 9269 was 9269, checked in by dennisw, 14 years ago

Permalink button works. Resets everything though since it refreshes the page. Layers are displayed in the url which doesn't work for custom layers (since they are reset).
File size: 9.0 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=0,255,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 CLASS_NAME: "OpenLayers.Layer.Overlay"
68 });
69 signallayer = new OpenLayers.Layer.OSM.Overlay("Signal strength: " + sig.values[0] + " - " + sig.values[1], {isBaseLayer: false, visibility: true});
70 map.addLayer(signallayer);
71 },
72 });
73
74 // menu toggle
75 $("#menu_filter").click(function(){
76 $("#filter").slideToggle("fast");
77 $("#info").slideUp("fast");
78 });
79 $("#menu_info").click(function(){
80 $("#filter").slideUp("fast");
81 $("#info").slideToggle("fast");
82 });
83
84 // Fastest?: http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery
85 $.getJSON("/website/filters/",
86 function(json) {
87 $.each(json, function(i,json){
88 $("#select_user").append($("<option/>").attr("value",json.gebruiker).text(json.gebruiker));
89 userlist.push(json.gebruiker);
90 $.each(json.meetrondje, function(m, meetrondje){
91 $("#select_dataset").append($("<option/>").attr({"class":json.gebruiker, "value":meetrondje.naam}).text(meetrondje.naam));
92 $.each(meetrondje.nodes, function(n, nodes){
93 $("#select_node").append($("<option/>").attr({"class":meetrondje.naam, "value":nodes}).text(nodes));
94 if(jQuery.inArray(nodes, nodelist)<0){
95 nodelist.push(nodes);
96 }
97 });
98 });
99 });
100 // Initiate the chain
101 $("#select_dataset").chained("#select_user");
102 $("#select_node").chained("#select_dataset");
103 }
104 );
105
106 // add filter per user
107 $('#user_filter').click(function(){
108 if(this.value=='Add userfilter'){
109 $.each(userlist, function(u, user){
110 colour = '&colour='+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);
111 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
112 initialize: function(name, options) {
113 var url = [
114 "/website/tile/${z}/${x},${y}.png?" + colour + "&meetrondje__gebruiker__naam=" + user
115 ];
116 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
117 var newArguments = [name, url, options];
118 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
119 },
120 CLASS_NAME: "OpenLayers.Layer.Overlay"
121 });
122 filterlayer = new OpenLayers.Layer.OSM.Overlay("User: "+ user, {isBaseLayer: false, visibility: true});
123 map.addLayer(filterlayer);
124 });
125 $(this).attr('value', 'Del userfilter');
126 }
127 else{
128 $(this).attr('value', 'Add userfilter');
129 $.each(userlist, function(u, user){
130 layer = map.getLayersByName('User: ' + user);
131 map.removeLayer(layer[0]);
132 });
133 }
134 });
135
136 // add filter per node
137 $('#node_filter').click(function(){
138 if(this.value=='Add nodefilter'){
139 $.each(nodelist, function(n, node){
140 colour = '&colour='+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);
141 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
142 initialize: function(name, options) {
143 var url = [
144 "/website/tile/${z}/${x},${y}.png?" + colour + "&accespoint__ssid=" + node
145 ];
146 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
147 var newArguments = [name, url, options];
148 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
149 },
150 CLASS_NAME: "OpenLayers.Layer.Overlay"
151 });
152 nodefilterlayer = new OpenLayers.Layer.OSM.Overlay("Node: "+ node, {isBaseLayer: false, visibility: true});
153 map.addLayer(nodefilterlayer);
154 });
155 $(this).attr('value', 'Del nodefilter');
156 }
157 else{
158 $(this).attr('value', 'Add nodefilter');
159 $.each(nodelist, function(n, node){
160 layer = map.getLayersByName('Node: ' + node);
161 map.removeLayer(layer[0]);
162 });
163 }
164 });
165
166 // add custom filter
167 $('#add_filter').click(function(){
168 //get values from elements
169 user = $('#select_user option:selected').text();
170 dataset = $('#select_dataset option:selected').text();
171 wlnode = $('#select_node option:selected').text();
172 start_date = $('#start_date').val();
173 end_date = $('#end_date').val();
174 colour = encodeURIComponent(document.getElementById("colour").value);
175 lname = encodeURIComponent(document.getElementById("lname").value);
176
177 // 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
178 // '#' comes out as '%23', so substr() starts at char 3
179 colour = parseInt((colour.substr(3, 2)),16) + ',' + parseInt((colour.substr(5, 2)),16) + ',' + parseInt((colour.substr(7, 2)),16);
180
181 // some checks if values are correct, and adding them to parts of the link
182 if (user != ''){user='&meetrondje__gebruiker__naam='+user;}
183 if (dataset != ''){dataset='&meetrondje__naam='+dataset;}
184 if (wlnode != ''){wlnode='&accespoint__ssid='+wlnode;}
185 if (start_date && end_date){
186 sd_d=start_date.substr(0,2);
187 sd_m=start_date.substr(3,2);
188 sd_y=start_date.substr(6,4);
189
190 ed_d=end_date.substr(0,2);
191 ed_m=end_date.substr(3,2);
192 ed_y=end_date.substr(6,4);
193
194 start_date='&meetrondje__datum__gte=' + sd_y +'-'+ sd_m +'-'+ sd_d;
195 end_date='&meetrondje__datum__lte=' + ed_y +'-'+ ed_m +'-'+ ed_d;
196 }
197 if (start_date && !end_date){
198 sd_d=start_date.substr(0,2);
199 sd_m=start_date.substr(3,2);
200 sd_y=start_date.substr(6,4);
201 start_date='&meetrondje__datum__gte=' + sd_y +'-'+ sd_m +'-'+ sd_d;
202 end_date='';
203 }
204 if (!start_date && end_date){
205 ed_d=end_date.substr(0,2);
206 ed_m=end_date.substr(3,2);
207 ed_y=end_date.substr(6,4);
208 start_date='';
209 end_date='&meetrondje__datum__lte=' + ed_y +'-'+ ed_m +'-'+ ed_d;
210 }
211 if (colour != 'NaN,NaN,NaN'){colour='colour='+colour;}
212 else {colour = '&colour='+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);}
213 if (lname != ''){lname=lname;}
214 else {lname = 'Custom Filter';}
215
216 // setting layer
217 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
218 initialize: function(name, options) {
219 var url = [
220 "/website/tile/${z}/${x},${y}.png?" + colour + user + dataset + wlnode + start_date + end_date
221 ];
222 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
223 var newArguments = [name, url, options];
224 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
225 },
226 CLASS_NAME: "OpenLayers.Layer.Overlay"
227 });
228
229 // adding layer
230 filterlayer = new OpenLayers.Layer.OSM.Overlay(lname, {isBaseLayer: false, visibility: true});
231 map.addLayer(filterlayer);
232 });
233});
Note: See TracBrowser for help on using the repository browser.