Monthly Archives: June 2011

OpenLayers extension for HeatCanvas

Posted on by
Reply

As the screenshot shows, now you can embed HeatCanavs in your OpenLayers application, as well as OpenSteetMap.

Three steps to create such kind of map:

1. Create HeatCanvas layer:

// constructor params:
// name, OpenLayers map instance, OpenLayers layer options, HeatCanvas options
var heatmap = new OpenLayers.Layer.HeatCanvas("HeatCanvas", map, {},
        {'step':0.3, 'degree':HeatCanvas.QUAD, 'opacity':0.8});

2. Feed some data on layer:

heatmap.pushData(latitude, longitude, value);

3. Add layer to map:

map.addLayer(heatmap);

The live demo is hosted on github:
http://sunng87.github.com/heatcanvas/openstreetmap.html

HeatCanavs is a heat map implementation on HTML5 canvas and WebWorker API.

Take my coffee

Posted on by
11

是coffee不是Java也不是CoffeeScript。买了两个月的咖啡机，到今天才终于把磨豆机和拉花杯都制备齐了。我上周用搪瓷缸打牛奶场面真是残不忍睹。不过我发现其实设备区别不大，蒸汽的掌握还是很重要的；牛奶的选择也很重要，鉴于家里没有其他牛奶可选，这部分跳过。蒸汽喷嘴与牛奶的举例很重要，我的咖啡机上还有个橡胶嘴我今天把它彻底扔掉了，直接用金属的喷嘴即可。按照某视频介绍，蒸汽嘴距离牛奶表面3毫米。这个距离如果太大就会导致牛奶乱喷，如果直接把喷嘴伸进牛奶我还没有尝试。

打好的牛奶就是这个样子，对不住大家的是，焦点跑了。
IMG_0647

加上我们刚喷好的咖啡
IMG_0650

就变成了这个样子
IMG_0651
（我晕，焦点又跑了）

这个算是cappuccino吗。。。

最后还有一点咖啡，不要浪费了，搞点艺术创作：
IMG_0652
焦点你最后终于来了。

HeatCanvas hits 1.0, and public available

Posted on by
8

As described in Wikipedia, a heat map is a graphical representation of data in a two-dimensional table. HeatCanvas enables heat map on HTML5 canvas. With HeatCanvas, you can visualize your data on modern web browser without server-side support.

HeatCanvas is based on the prototype I wrote 15 months ago. I just rewrite the whole with WebWorker API to keep user away from UI frozen and annoying slow-script warning. HeatCanvas is implemented as pixel based, so the image quality is great.

The API is rather simple. There are only three steps to create a basic heat map.

1. Create the heat map object:

var heatmap = new HeatCanvas('canvasId');

2. Add some data to heat map:

heatmap.push(223, 98, 10); // x,y and value for this point

3. Render it:

heatmap.render();

In contrast to the base API, HeatCanvas also supports flexible options to customize the rendering. Even custom colour scheme is allowed. You can refer to the doc for detail.

And for your convenience, we have a GoogleMap plugin, HeatCanvasOverlayView, that wraps HeatCanvas. You can use it in your GoogleMap application.

For live demos, you can find at:
http://sunng87.github.com/heatcanvas/

As always, the project is hosted on github:
https://github.com/sunng87/heatcanvas .

The three javascript files are only necessary in your application, thus, please ignore the htmls in your deployment. Any feedback is welcomed and also please kindly let me know your application using this API.