After been working sometime with OpenLayers I figure out how to make heatmaps generated in the user browser. Now I’m using OpenStreetMap for both map and data. As is based on OpenLayers you can use any map (including Google Maps) and get data from other places.
There are some similar projects: gheat (server side), Google Maps – Heatmap (server side, not dynamic) and HeatMapAPI (server side and need an API key). If you know another API/Library to make Heatmaps please send me an email.
Currently you can watch the following demo videos (try to watch them on HD and fullscreen):
Videos
- demo_pub_restaurant_santiago_xvid.avi
- demo_pub_restaurant_london_xvid.avi
- demo_hospital_pharmacy_xvid.avi
- demo_firestations_santiago_xvid.avi
- demo_firestations_osorno_xvid.avi
TODO
- Add Heatmap auto-rendering option
- Optimize Code
- Improve compatibility with Chromium (Google Chrome)
- Check compatibility with other browsers
- Improve GUI
- Make a Javascript Library
- Use JSON instead of XML
- Check security on server-side
- Opacity of Features
- Compatibility with polygons (currently only nodes)
Bugs
- Features are rendered more than once (double, triple?)
Limitations
- Don’t work on Microsoft Internet Explorer (maybe it’s a feature!)
9 Comments until now
Very nice demo videos.
This is great! How do you do it? HTML5 / Canvas? Is it all on the client side, or is there some server activity?
Answer: Yes
rendering a vector layer using Canvas (OpenLayers) and then playing with Javascript. On Chrome/Chromium is faster than Firefox, I don’t remember the speed on Opera. I think that working a bit the code I can make the heatmap layer moveable without rendering it again (and without rendering all features on every move). Server side is only to retrieve features and parse them but no graphic processing at all.
[...] This post was mentioned on Twitter by Tim Waters and Martijn van Exel, jonathan rez. jonathan rez said: Give me time! I want to dig into OpenStreetMap Heatmap (using OpenLayers) http://bit.ly/b0YPgV (mentioned by @openstreetmap) [...]
Hi, well pretty cool but your server is currently locked
Can you publish this on the german OSM dev Servers, please? Would be cool to see a heatmap of surveillance 
Answer: There are still security issues that need to be solved before public use (you can generate huge amounts of traffic between my hosting and the XAPI servers of OpenStreetMap. Also I haven’t decided the license of the code. Finally the code is ugly, I need to do some rework because now it’s a collection of little hacks
[I'm going to be embarrassed if someone look it]
Hola Felipe, muy buenos los vídeos !
existe la posibilidad de que puedas compartir algún tutorial?
answer: Todavia nada
tengo que ordenar el codigo y buscar una licencia
I’ve been working on my own heatmap tool for a while, for a slightly different niche. I finally posted the code & some examples today. http://www.sethoscope.net/heatmap/
Answer: Nice, for real data (more than a few points) is very useful and also is a good thing to be able to make automatic videos
hehe I see your point. IMHO it would be best to restrict to a low zoomlevel and to use a pregenerated point only DB of very common features.
Also check out our web service (no programming required) for Google Map heatmaps.
diffent.com/heatmap is the starting point.
Just paste your data in “lat long data” form (XYZ triples), and our site does the rest!
You can also drive it from JavaScript or PHP if you’d like.
Answer: Server side, nice but already free stuff doing the same thing.
[...] to incentive others developers to join and help in the project. Here is the original post showing OLHeatmap working and here is the project link in SourceForge (the guys at savannah.gnu.org take too long to [...]
Add your Comment!