search

Leaflet / Leaflet.heat

A tiny, simple and fast heatmap plugin for Leaflet.
http://leaflet.github.io/Leaflet.heat/demo
BSD 2-Clause "Simplified" License
1.55k stars 525 forks source link

Clickable/hoverable points? #61

Open beastlike opened 8 years ago

beastlike commented 8 years ago

Is it possible to supply a click or hover event on each point drawn, similar to maplarge's "Average Household Incomes" map - http://maplarge.com/demos

rmpestano commented 8 years ago

I also would like to 'interact' with a heat point to show additional information, is it possible?

beastlike commented 8 years ago

Yes. Just not directly through this library. I'll try to post some code soon; I've had to modify both this library and simpleheat.js to do this.. The problem about this library is that it just draws and averages your points onto a canvas. First, once it's done that, it has no knowledge about what's been drawn where. Your points are just pixels on a canvas. Secondly- and you'll see other people complain about this- there's no way of really distinguishing high and low point values from one another. It just all renders as bunch of blobs. I'm sure that has its uses, but it's not useful for things like that demographic map. One really high-value point is indistinguishable from a bunch of low-value points clustered together. I'm wondering if the maplarge demo, and what I need for my map, isn't really a "heat map" by popular definition, but something that looks and feels like a heatmap but retains the functionality of having a large number of individual points.

To do this, keep your latlongs in a kdtree - I'm using ubilabs/kdtree.js - take a look at their demo that follows your mouse and draws the closest points. Basically, you can use their library to do the same thing, so that as you move your mouse around and/or click, it finds the closest lat/long it can find in your list to where your mouse is. I've got this working in complete real-time with 90k+ points, much faster than the maplarge demo. Again, I will try to post code soon, but if you can't wait, my json with the addresses looks like this:

var addressPoints = [ {"latitude":123.456,"longitude":-1.234,"otherstuff":12345,"grad":59,"stuff":20553}, ...

then to give heatLayer something to work with, (I haven't quantified how inefficient this is, but performance is good on all the devices I've tried) coolPoints = addressPoints.map(function (p) { return [p.latitude, p.longitude, p.grad]; });

good luck!

rmpestano commented 8 years ago

Hi @beastlike,

thank you very much for the detailed information, I am not in a hurry for this but if I try it I'll come back here to share results. Thanks.

rmpestano commented 8 years ago

Also just to share our use case. We are using heat to show criminal areas and each crime is a point of course but it has important information like the kind of crime.

Heatmap gives us a nice insight of where the majoroty of crimes are being commited but we have no information about the kind of crimes. For now we are using another layer (using sames crime points) combined with heatmap to show additional information.

GeneralLi95 commented 6 years ago

hi @beastlike， Just want to know where's the code you post? Looking forward to it!

GeneralLi95 commented 6 years ago

@rmpestano Using another layer?