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

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

Added a colorpicker for the filters.

File size: 3.5 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// set filter values
16$(document).ready(function() {
17
18 // Fastest?: http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery
19 $.getJSON("/website/filters/",
20 function(json) {
21 $.each(json, function(i,json){
22 $("#select_user").append($("<option/>").attr("value",json.gebruiker).text(json.gebruiker));
23 $.each(json.meetrondje, function(m, meetrondje){
24 $("#select_dataset").append($("<option/>").attr({"class":json.gebruiker, "value":meetrondje.naam}).text(meetrondje.naam));
25 $.each(meetrondje.nodes, function(n, nodes){
26 $("#select_node").append($("<option/>").attr({"class":meetrondje.naam, "value":nodes}).text(nodes));
27 });
28 });
29 });
30 // Initiate the chain
31 $("#select_dataset").chained("#select_user");
32 $("#select_node").chained("#select_dataset");
33 }
34 );
35});
36
37// add filter
38$(function(){
39 $('#add_filter').click(function(){
40
41 user = $('#select_user option:selected').text();
42 dataset = $('#select_dataset option:selected').text();
43 wlnode = $('#select_node option:selected').text();
44// enc = $('#select_enc option:selected').text();
45// date = $('#select_date option:selected').text();
46 colour = encodeURIComponent(document.getElementById("colour").value);
47 lname = encodeURIComponent(document.getElementById("lname").value);
48
49 // 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
50 // '#' comes out as '%23', so substr() starts at char 3
51 colour = parseInt((colour.substr(3, 2)),16) + ',' + parseInt((colour.substr(5, 2)),16) + ',' + parseInt((colour.substr(7, 2)),16);
52
53 if (user != ''){user='&meetrondje__gebruiker__naam='+user;}
54 if (dataset != ''){dataset='&meetrondje__naam='+dataset;}
55 if (wlnode != ''){wlnode='&accespoint__ssid='+wlnode;}
56// if (enc != ''){enc='&accespoint__encryptie='+enc;}
57// if (date != ''){date='&meetrondje__datum='+date;}
58 if (colour != ''){colour='colour='+colour;}
59 else {colour = '&colour='+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);}
60 if (lname != ''){lname=lname;}
61 else {lname = 'Custom Filter';}
62
63 var baseurl = "/website/tile/${z}/${x},${y}.png?";
64
65 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
66 initialize: function(name, options) {
67 var url = [
68 baseurl + colour + user + dataset + wlnode /* + enc + date */
69 ];
70 document.getElementById('filter_text').innerHTML+="<br />Added: " + url;
71 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
72 var newArguments = [name, url, options];
73 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
74 },
75 CLASS_NAME: "OpenLayers.Layer.Overlay"
76 });
77
78 filterlayer = new OpenLayers.Layer.OSM.Overlay(lname, {isBaseLayer: false, visibility: true});
79 map.addLayer(filterlayer);
80 });
81});
Note: See TracBrowser for help on using the repository browser.