Minimalist Library to draw temperature maps (heat maps) using WebGL in pure Javascript. Except a O(N) pre-process step which is done in Javascipt, all calculations and drawing are done with shaders in WebGL, so it is pretty fast. It is also very small (~3kB minified and gzipped)

'OES_texture_float' extension is required.

Using the library

HTML

...
<script type='text/javascript' src='temperature-map-gl.min.js'></script>
...
<div class='map-container' style='position:relative;'>
	<img id='map-image0' src='symi.png'/>
</div>

Javascript

var image = document.getElementById("map-image0");
var temperature_map = new temperature_map_gl(image);
temperature_map.set_points(points);
temperature_map.draw();

points are in this format:

var points = [
	[x0,y0,v0],
	[x1,y1,v1],
	...
	[xN,yN,vN]
]

Available options (the defaults are shown)

var temperature_map = new temperature_map_gl(image), {
	p: 3, // used in calculating the IDW values, see wikipedia article mentioned at the bottom of this
	canvas: null, //use this canvas element and don't create a new one
	opacity: 0.5,// opacity of the canvas
	range_factor: 0.00390625,//used in scaling the values so they don't clip when storing them as channels of the framebuffer texture
	gamma: 2.2,//used in altering the color during draw pass
	brightness: 0.00,//used in brightening the color during draw pass
	show_points: false,//add 
	framebuffer_factor: 1.0,//the ratio of the dimensions of the calculation framebuffer in relation to the actual canvas
	image_zindex: 0,//style z-index given to the image
	point_text: function(val) {//used when the show_points is true of the draw_points() method is called explicitly. It returns the text on the points shown for given value val
		var v;
		if(val < 1)
			v = val.toFixed(2);
		else if(val < 10)
			v = val.toFixed(1);
		else
			v = Math.round(val);
		return v + "°C";
	}
};

Methods

//constructor
temperature_map_gl(image_element[, options]);

//update some options, not all constructor options will have an effect..
temperature_map.update_options(options);

//sets points in the format mentioned above
//the optional arguments determine what is min = blue, what is max = red, normal = green
temperature_map.set_points(points[, min, max, normal_val]);

//performs a calculation and draw given the points set
temperature_map.draw();

//explicitly draw markers on points, like using the show_points option
temperature_map.draw_points()

//explicitly hide markers
temperature_map.hide_points();

//resize canvas
temperature_map.resize(width, height);

//removes all created elements
temperature_map.destroy();

//returns if all the requirements are met (webgl and OES_texture_float), if this returns false, draws are no-ops
is_supported();

Examples

You can check it out live at chpetrou.net

Technical explanation

Values are calculated using 'Inverse Distance Weighting (IDW)' algorithm:

Wikipedia - Inverse Distance Weighting

The rest of the explanation makes sense only in the context of the wikipedia article above...

For every point, we perform a render pass to a texture. Using IDW, we calculate the point "influence" to every fragment using a fragment shader. We store the ui*wi at the r channel of the texture and w_i at the g channel. Using blending with "accumulator" configuration, we end end up with a texture, where we have the top sum of IDW in r channel, and the bottom sum at the g channel. Since channels WebGL are clamped in [0,1], we multiply both channels with range_factor to avoid clamping.

At last, we perform a last pass where we get the IDW value by reading the calculation texture and do a r/g at every fragment. We then use this value to determine the color of the fragment.

More on the technical side on my website

Used on HAM Systems IoT platform for heatmaps over floorplans for visualization