Leaflet.heat icon indicating copy to clipboard operation
Leaflet.heat copied to clipboard

Possibility to set each point radius

Open AndradeB91 opened this issue 6 years ago • 1 comments

Is this possible, nowadays?

AndradeB91 avatar Mar 06 '18 17:03 AndradeB91

Unfortunately it seems like nobody is working on it yet.

Just wanted to propose leaflet hexbins to anyone looking for the possibility to visualize two things at the same time. Pretty similar to leaflet heat, hexbins have two main attributes, radius and color/opcaity so one could set the radius to counted features (points) in a bin and opacity to a value, let's say i.e. aggregated population counts.

In case anyone wants to give it a try, these few lines are the crucial part. Leave the radius to the point count but set the color based on the array value.

data = [
       // lat, long, some value
	[50.0001, 8.0001, 10],
	[50.001, 8.001, 10],
	[50.2, 8.2, 20]
]

// Create the hexlayer
var hexLayer = L.hexbinLayer({ duration: 200, radiusRange: [0, 20] })
	.radiusValue(function (d) {
		return d.length;
	})
	.colorValue(function (d, i) {
		var hexsum = d.reduce(function (acc, obj) { return acc + obj["o"][2]; }, 0);
		console.log(hexsum)
		return hexsum
	})

Another less elegant solution would be to aggregate points and their values and afterwards calculate an index consisting of i.e. counted features divided by a value for centroids. However, as I do not want to lose any information, I prefer hexbins for my use case.

Did anyone find any other good alternative repos or methods for this problem?

do-me avatar Feb 06 '21 13:02 do-me