Heat map on Google maps based on the intensity of a parameter

Question

I have collected some data of the performance of one Wi-Fi network with a position stamp. Now I can show the position where I have acquired the data on a "local" Google maps. I would like to show an heat maps on Google maps so that the value of the parameter sets the color.
For ex: bandwidth: max value 1000 min value 10
position 1, bandwidth 1000 --> color red
postion 2, bandwidth 15 --> color blue
position 3, bandwidth 500 --> color orange and so on
I need something that can interpolate the data and obtain something like this:

I have tried fusion map of Google but the heat map is based only on the density in terms of position and not on the value of a parameter. Is that correct?
I would like to use Google maps but if there is something simpler to use, I can use it.

Exterritorial

You have a collection of point coordinates with intensities, right? It would be easy to place circles of varying size and color to each coordinate. The Fusion maps examples with area coverage that I saw needs polygon definitions. It would be quite tedious to define that data. Let's see your image. You should be able to add one in editing the question. – Lovejoy

I have the coordinate of a lot of places with each of these parameters: bandwidth, jitter, packet loss. I can normalize them in a range if it is needed and I wuold like to obtain a different map for each parameters. – Exterritorial

I'm curious how you created your image above. If it can be made a static image, I've seen solutions with image overlays. I haven't seen something like your image with Fusion Tables. – Lovejoy

I have found it on web. With Fusion Tables is impossible to create this map because the heat map is created base on the density of the position. I mean: to have red color you need to have a lot of marker in that area. I would like to have red color if the parameter has a high value. I can create a data sheet with a lot of position where the parameter is high and a little very where is low, but is not very elegant. This will be the last solution. – Exterritorial

Answer 1

I have found a solution on how to create a heatmap with Google Maps that works locally: heatmap.js.
I have used and works very well for my scope. Thanks

Exterritorial

Can you explain how you solved your problem? I'm having the same issue. – Mawson

Would love to know how you solved it, I'm having the same issue, too. – Jujutsu

Answer 2

It is not exactly what you want, but you could take a look at the HeatmapApi.

There is a free version for max. 100 datapoints. The main limitation regarding your requirements is that you cannot adapt the color scheme. This feature is announced on their web page but without a date.

I tried the API in the last few days and it works as expected and promised. It is provided as web service and takes parameters in the format [lat, lng, value] to compute the heatmap.

Hamadryad

There is something free? I have more than 300 points. Which is the best way to load this points with javascript? I want to use only in "local", but with internet connection. – Exterritorial

I had some success w/Michael VanDaniker's free heat map component. Used it a couple of years ago w/the GoogleMaps Flash API (which is now deprecated). But there's no reason you can't overlay the heat map on top of any map. – Laster

I don't know a solution that is completely free. And the heatmap api needs a real web server and doesn't run locally. – Hamadryad

I don't know how to do this heatmap locally. This map is very well done and permits to use weights or density. I don't know how to create this. – Exterritorial

This looks great. Thanks for sharing this link. Seems this is a flash based heatmap. – Hamadryad