WiGLE

Click here for the commented JavaScript source code
/* flashNavigator :: WiGLE */
var areaData;
var updateTimer;
var showWC;
var selectAreaTool;
 
 
// sets list of plugins that are used to extend 
// flashNavigator functionality       
flashnavigator.include("slider,scalebar,canvas,marker");
 
flashnavigator.initialize = function()
{ 
  // fnViewer constructor
  fn = new fnViewer("flashcontent");   
 
  // canvas plugin constructor
  canvas = new fnCanvas(fn);  
 
  // canvas plugin constructor
  marker = new fnMarker(fn);
 
  // registers event listeners
  fn.addEventListener("load","fnOnLoad");   
  fn.addEventListener("mouseup","fnOnMouseUp");      
  fn.addEventListener("mousemove","fnOnMouseMove");  
  fn.addEventListener("mousedown","fnOnMouseDown");
  fn.addEventListener("scalechange","fnUpdateScale"); 
 
  // loads map project  
  fn.load("/demos/wigle/maps/chicago.xml");    
}
 
 
 
function fnUpdateScale()
{
  // scalechange event returns information about current scale in internal format
  // this format can be converted to project scale by core API method convertScale()     
  updateWithTimer();
  document.getElementById("scaleInfo").innerHTML = "1:"+Math.round( fn.getScale() );  
}   
 
function fnOnMouseDown(evt)
{ 
  /* on mouse down we store current mouse data 
     like x and y coordinates */
 
  if (selectAreaTool)
    areaData = evt;
}
 
function fnOnMouseUp(evt)
{ 
  /* on mouse up we start loading access point data */
 
  if (selectAreaTool)
  {   
    console("Loading...");
    query  = "&x="+areaData.x+"&y="+areaData.y+"&r="+areaData.radius;
    query += "&s="+fn.getScale();
    xmlhttpPost("/demos/wigle/getAP.php",query,getAP);       
    fn.setTool('DragTool');
    selectAreaTool = 0;       
  }
  else
    updateWithTimer();
}
 
 
function fnOnMouseMove(evt)
{ 
  /* during mouse move we need to calculate circle radius
     and draw the circle using flashNavigator API */
 
  if (!selectAreaTool || !areaData) return;
 
  var xx = areaData.x-evt.x;
  var yy = areaData.y-evt.y;
  var radius = Math.sqrt(xx*xx+yy*yy);
 
  if (radius > 500) radius = 500;
 
  areaData.radius = radius;
 
  if (areaData.circle)
  canvas.remove(areaData.circle);
 
  areaData.circle = canvas.drawCircle(areaData.x, areaData.y, radius, 0x0000ff, 30); 
}
 
//stores visible access points
var visibleAp = new Array();
 
function getAP(ap)
{     
  if (!ap) return;
  /* we go through all received access points.
     if access point isn't already displayed 
     we display it using marker.add method */
 
  var ap = eval(ap);
  var maxCount = 7;
  var frequency = (Math.PI/2)/maxCount; 
  var tmpvisibleAp = new Array();
 
  for (i=0; i < ap.length; i++)
  {
    if (!ap[i]) continue;
 
    if (visibleAp[ap[i].netid])
    {                   
      tmpvisibleAp[ap[i].netid] = visibleAp[ap[i].netid];   
      visibleAp[ap[i].netid] = null; 
      continue;
    }       
 
    var k = ap[i].qos;
    if (k > maxCount) 
      k = maxCount;
 
    ap[i].icon = "/demos/wigle/wifi.swf"; 
    ap[i].color = calculateColor( frequency * (maxCount-k) );
    ap[i].title = ap[i].ssid
    ap[i].content = "QoS: "+ap[i].qos;    
    tmpvisibleAp[ap[i].netid] = marker.add(ap[i]);           
  }
 
  for (h in visibleAp)
  {
    if (visibleAp[h])  
      marker.remove(visibleAp[h]);
  }
 
  visibleAp = tmpvisibleAp;
 
  console("done");
}
 
function enableMarkTool()
{
  areaData = null;
  fn.setTool("notool");
  selectAreaTool = true;
  showWC = false;
  marker.clear();
  canvas.clear();
  visibleAp = new Array();
}
 
function showWirelessConcentration()
{
  marker.clear();
  showWC = true;
  selectAreaTool = false;
  getWirelessConcentration();
}
 
function getWirelessConcentration ()
{ 
  if (!showWC) return;
  // we get current bound and send it to PHP script
  console("Loading...");
  var b = fn.getViewBound();
  var query = "&xmin="+b.xMin+"&xmax="+b.xMax+"&ymin="+b.yMin+"&ymax="+b.yMax;
  xmlhttpPost("/demos/wigle/getAP2.php",query,drawWirelessDistribution);
}
 
function drawWirelessDistribution (grid)
{ 
  if (!grid) return;
  // first we clear everything that is displayed on canvas
  canvas.clear();
 
  // Json data needs to be evaluated before we can use it
  grid = eval(grid);
 
  // we truncate maximal number of wireless network per cell
  var maxCount = 2000;
 
  var frequency = (Math.PI/2)/maxCount;
  for (i=0; i < grid.length; i++)
  {
    k = grid[i].count;
 
    if (k > maxCount)
      k = maxCount;
 
    grid[i].color = calculateColor(frequency*k);
    grid[i].alpha = 60;
 
    canvas.deserializeGeometryOpenGIS(grid[i]);
  }
  console("done");
}
 
function calculateColor(frequency)
{
  r = Math.sin(frequency + 0) * 127 + 128;
  g = Math.sin(frequency + 2) * 127 + 128;
  b = Math.sin(frequency + 4) * 127 + 128;
 
  return (r & 0xff)*0x10000 | (g & 0xff)*0x100 | (b & 0xff);
}
 
function clearAll()
{
  canvas.clear();
  marker.clear();
}
 
function Update()
{ 
  /*
    if access points are displayed then we refresh them
    by using current visible bound.
 
    if scale if less then 50000 then we refresh wireless
    concentration too.
  */
 
  var scale = fn.getScale();
  if (areaData)
  { 
    var b = fn.getViewBound();
    var query  = "&x="+areaData.x+"&y="+areaData.y+"&r="+areaData.radius+"&s="+fn.getScale();
        query += "&xmin="+b.xMin+"&xmax="+b.xMax+"&ymin="+b.yMin+"&ymax="+b.yMax;
 
    xmlhttpPost("/demos/wigle/getAP.php",query,getAP);
  }
  if (scale < 50000)
  getWirelessConcentration();
}
 
function updateWithTimer()
{ 
  window.clearTimeout(updateTimer);
  updateTimer = window.setTimeout(Update,500);
}
 
var overlay = null;
 
function disableDiv(elm) 
{
 
  if (overlay)
  {
    overlay.style.display = "block";
    return;
  }
   _width = elm.offsetWidth;
  _height = elm.offsetHeight; 
 
 
  overlay = document.createElement("div")
  overlay.style.width = _width + "px" 
  overlay.style.height = _height + "px" 
  overlay.style.position = "absolute" 
  overlay.style.background = "#dedede"  
  overlay.style.top = 0 + "px"  
  overlay.style.left = 0 + "px"   
  overlay.style.filter = "alpha(opacity=50)"  
  overlay.style.opacity = "0.5" 
  overlay.style.mozOpacity = "0.5"
 
  elm.appendChild(overlay)
 
}
 
function login()
{
  var query = "&user="+document.getElementById("w_user").value+"&pass="+document.getElementById("w_pass").value;
  xmlhttpPost("/demos/wigle/wigle_login.php",query,check_wigle_login);       
}
 
function logout()
{
  xmlhttpPost("/demos/wigle/wigle_login.php","&logout=1",wigle_logout);         
}
 
function wigle_logout(r)
{
	clearAll();
  disableDiv(document.getElementById("wifi_tools"));
  document.getElementById("logout_form").style.display = "none";
  document.getElementById("login_form").style.display = "block";  
}
 
function check_wigle_login(r)
{
  if (r == "ok")
  {
    overlay.style.display = "none";
    document.getElementById("login_form").style.display = "none";
    document.getElementById("logout_form").style.display = "block";
  } 
  else
  	alert("Unable to login");
}
 

Console

Please enter your WiGLE credentials to enable tools above. If you don't have WiGLE account you can register here.


Username:

Password:

Notice: Your credentials will be used only for querying WiGLE database.