OL3 Heatmap

demo for http://www.pocketmagic.net/voronoi-diagrams-openlayers-3/

by Radu Motisan

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ol3/3.8.2/ol.js"></script>
<div id="map-container" class="map"></div>

CSS

.map {
  height: 400px;
  width: 100%;
}

JavaScript

/* three color gradient, starting from color1(0%) to color2(50%) and color3(100%)*/
function gradient(color1, color2, color3, alpha, percent) {
    var newColor = {};
    
    if (percent > 100) percent = 100;

    function makeChannel(a, b, c) { 
		if (percent < 50)
			return(a + Math.round((b-a)*(percent/50))); 
		else 
			return(b + Math.round((c-b)*((percent-50)/50))); 
    }

    var r = makeChannel(color1.r, color2.r, color3.r);
    var g = makeChannel(color1.g, color2.g, color3.g);
    var b = makeChannel(color1.b, color2.b, color3.b);

    return "rgba(" +r + ", " + g + ", " + b + ", " + alpha + ")";
}

/* helper function to get equivalent dose rate aproximation out of CPM */
function getDoseRate(cpm, factor) {
	var dose = cpm * factor;
	return dose.toFixed(2);
}

/* init two source layers: one made of a features array and another one made of cluster. The latter uses the former as a source */
function initSource() {
	var vectorSource = new ol.source.Vector({}); // empty vector

	jQuery.getJSON("http://data.uradmonitor.com/api/v1/devices", function(data) {
		for(var index in data) {
			if(!data.hasOwnProperty(index)) continue;
			// get all unit parameters	
			var device = data[index];
			// ignore devices without coordinates, these also include those in shipping
			if (device.latitude == null || device.longitude == null) continue;			

			// add to map	
			var feature = new ol.Feature({
				geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(device.longitude), parseFloat(device.latitude)])),
				id: device.id,
				timefirst: device.timefirst,
				timelast: device.timelast,
				timelocal: device.timelocal,
				latitude: device.latitude,
				longitude: device.longitude,
				altitude: device.altitude,
				city: device.city,
				country: device.country,
				versionhw: device.versionhw,
				versionsw: device.versionsw,
				status: device.status,
				averagecpm: device.averagecpm,
				detector: device.detector,
				factor:...