API Tutorial

To be able to start to configure your visualization you need at first to load your data set. See the /examples/birmingham/js/DataLoader.js for example. Let's assume that we have loaded object 'data' that consist of e.g. 4 equal size array where each array corresponds to one column of the dataset and includes two columns that express the position of the record.

The position of a map coordinates must be in the pixel coordinates of tile level 0 of Mercator projection. The equation for that is:

X_p = (x_m + 20037508.34) / (20037508.34 * 2) * 256

Y_p = (-y_m - 20037508.34) / (20037508.34 * 2) * 256 + 256 ;

Example of coordinates of the same point in various systems

• POINT(14 50) in WGS84 (EPSG:4326)
• POINT(1558472.87110583, 6446275.84101716) in Mercator (EPSG:3857)
• POINT(137.955555556941, 86.8210622972998) in pixels. These coordinates need to be used.

Once the data are loaded we can prepare the visualization.

• WGL.addMapDimension(pts, map) - where data.pts is an array of coordinates and map is ID of the div of the map.

Setup your non-spatial visualization using this structure:

var sev   = {data: data.sev,  domain: ['1','2','3'] ,  name: 'sev'  };			
var dayes = {data: data.dayes,  min:0, max: 7, num_bins: 7,  name: 'dayes'};		
var hours = {data: data.hours,  min:0, max:24, num_bins: 24, name: 'hours'} ;

And now use it to configure add this configuration to visualization

WGL.addOrdinalHistDimension(sev);
WGL.addLinearHistDimension(dayes);

And and configure the filters for each configuration. The second parameter is filter granularity so it means how many steps will the final filter have.

WGL.addLinearFilter(dayes,7, 'dayesF');		
WGL.addLinearFilter(hours,24*4, 'hoursF');

Finally, we can add the histograms:

	var charts = [];
	charts['sev']   = new StackedBarChart(sev, "chart1", "accident servelity",'servelity');
	charts['dayes'] = new StackedBarChart(dayes, "chart2", "day of the week", 'dayes');
	charts['hours'] = new StackedBarChart(hours, "chart3", "hour of the day", 'hours');
	
	WGL.addCharts(charts);

The last thing to do is to connect the background map with the map rendered by WebGLayer. To do so we must call the WGL.mcontroller.zoommove function when move or zoom events are triggered in the hosting map view. Considering the OpenLayers as a hosting library we do that using this code:

map.events.register("move", map, onMove);

where

function getTopLeftTC() {

	var tlwgs = (new OpenLayers.LonLat(-180, 90)).transform(
			new OpenLayers.Projection("EPSG:4326"),
		 	new OpenLayers.Projection("EPSG:900913"));
	
	var s = Math.pow(2, map.getZoom());
	tlpixel = map.getViewPortPxFromLonLat(tlwgs);
	res = {
			x : -tlpixel.x / s,
			y : -tlpixel.y / s
	}
	//console.log(res);
	return res;
}
	
function onMove() {			
		WGL.mcontroller.zoommove(map.getZoom(), getTopLeftTC(), WGL.filterByExt);
}

And render all the data first time

		WGL.render();

For setting up the background map see the examples/birmingham/js/map.js as an example of OpenLayers usage. Configure similarity Leaflet or GoogleMaps API is also feasible.