Tag Archives: javascript

ngeohash: node module for geohash algorithm

Posted on by
Reply

ngeohash是一个geohash的javascript实现，之所以叫做ngeohash是因为到了Publish的时候才发现已经有geohash这个module了。这么令人沮丧的事就不多说了。

安装
npm install ngeohash

使用
var geohash = require(‘ngeohash’);
sys.puts(geohash.encode(32.1717, 118.2342));

详细
访问github的相关页面：https://github.com/sunng87/node-geohash

Update on HeatCanvas and gefr

Posted on by
Reply

HeatCanvas的百度地图扩展

感谢@lbt05姐的无私贡献，现在HeatCanvas又增加了百度地图API支持。你可以在你的百度地图中使用heat map了。详情可以参考@lbt05姐撰写的文档，而这里是一个简单的live demo。此外，@lbt05姐还贡献了GoogleMap扩展的patch，帮助我解决了地图拖动后Canvas无法覆盖viewport的bug。再次感谢@lbt05姐。

百度地图支持已经汇入主干，可以在github找到它。

Gefr新增 Jetty WSGI Bridge

昨天为gefr新增了Jetty服务器的支持，这样你可以将自己的Python WSGI程序运行在成熟的Jetty服务器上。性能是大家关心的因素，下面是在我的本机（32位CentOS，双核2.8GHz，4G内存）上一个粗略的测试结果：

100并发，20000请求：

Server Software: gefr-jetty/0.3dev
Server Hostname: localhost
Server Port: 8088

Document Path: /
Document Length: 19 bytes

Concurrency Level: 100
Time taken for tests: 3.120827 seconds
Complete requests: 20000
Failed requests: 0
Write errors: 0
Total transferred: 2584515 bytes
HTML transferred: 380665 bytes
Requests per second: 6408.56 [#/sec] (mean)
Time per request: 15.604 [ms] (mean)
Time per request: 0.156 [ms] (mean, across all concurrent requests)
Transfer rate: 808.44 [Kbytes/sec] received

Connection Times (ms)
min mean[+/-sd] median max
Connect: 0 4 114.1 0 3000
Processing: 0 7 18.5 5 1776
Waiting: 0 6 18.5 4 1776
Total: 0 12 115.8 6 3015

Percentage of the requests served within a certain time (ms)
50% 6
66% 7
75% 8
80% 8
90% 10
95% 13
98% 70
99% 74
100% 3015 (longest request)

如果打开KeepAlive，吞吐量可以达到10000以上：

Server Software: gefr-jetty/0.3dev
Server Hostname: localhost
Server Port: 8088

Document Path: /
Document Length: 19 bytes

Concurrency Level: 100
Time taken for tests: 1.749189 seconds
Complete requests: 20000
Failed requests: 0
Write errors: 0
Keep-Alive requests: 20000
Total transferred: 3062142 bytes
HTML transferred: 380266 bytes
Requests per second: 11433.87 [#/sec] (mean)
Time per request: 8.746 [ms] (mean)
Time per request: 0.087 [ms] (mean, across all concurrent requests)
Transfer rate: 1709.36 [Kbytes/sec] received

Connection Times (ms)
min mean[+/-sd] median max
Connect: 0 0 0.8 0 23
Processing: 0 8 8.0 6 85
Waiting: 0 8 8.0 6 85
Total: 0 8 8.1 6 85

Percentage of the requests served within a certain time (ms)
50% 6
66% 7
75% 8
80% 9
90% 11
95% 20
98% 41
99% 43
100% 85 (longest request)

你可以根据gefr的文档安装它。

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.

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.

用coffeescript重写了首页

Posted on by
3

下午有时间看了一下coffeescript，发现非常优雅。过去对JavaScript的工作，从dojo到jquery主要是在库的层面，这次coffeescript的出现是在语言层面对javascript做了一次加强。现在对语言的加强不再需要mozilla/microsoft/google/apple几家坐下来慢慢聊了，民间的力量就可以实现。

coffeescript的几个特点也属于博采众长：

  • 类似python的，以缩进取代代码块
  • 类似ruby/perl，方法调用括号可选
  • 类似ruby，无须return
  • 正常的类声明语法

在nodejs的环境里可以通过npm安装coffer-script，利用它的命令行程序，可以把coffeescript编译成javascript。不过最给力的是可以在网页里通过引入coffee-script.js来直接执行（其实也是编译一下）coffeescript。

于是我顺手重写了一下首页的js，改写成coffeescript。因为少打很多() {}，手可以控制在键盘中心的，敲字的效率大大提高。用空你也可以尝试一下。