Heatmapをつくる

heatmap.js | Create HTML5 Heatmaps with Canvas and JavaScript
を使ってヒートマップを作る方法。

今回は、Leafletを使って表示した地図上にヒートマップをオーバーレイする。

実はこのExampleのままでは動かない。
heatmap.js | Examples: Leaflet Heatmap Layer

1. 必要なファイルの読み込み

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet-src.js"></script>
<script src="/lib/heatmap/QuadTree.js"></script>
<script src="/lib/heatmap/heatmap.js"></script>
<script src="/lib/heatmap/heatmap-leaflet.js"></script>

2. 地図の読み込み

Leafletで地図を読み込む。

var mapboxTiles = L.tileLayer(
    'https://{s}.tiles.mapbox.com/v3/' + map_id + '/{z}/{x}/{y}.png',
    { attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Mapbox</a>' }
);

3. データの準備

ヒートマップにする点の座標と値を用意する。

var data = [
    {lat: 35.006, lon: 135.769, value: 2},
    {lat: 34.550, lon: 130.233, value: 1}
]

4. Heatmapの作成

var heatmapLayer = L.TileLayer.heatMap({
    radius: { value: 10, absolute: false },
    opacity: 0.8,
});

heatmapLayer.setData(data);

Option

• radius

ドキュメント、Exampleとは違うので注意。

１つの点の大きさを指定する。

    radius: { value: 10, absolute: false }
    radius: { value: 15000, absolute: true }

absolute: falseにするとピクセル単位での指定になり、zoomが変化しても一定の大きさ(px)で表示される。

absolute: trueにするとメートル単位での指定になり、zoomが変化しても一定の大きさ(m)で表示される。

• opacity

透明度。

• gradient

グラデーション。defaultは青→赤の一般的なヒートマップのグラデーション。

5. 表示

地図にヒートマップをオーバレイさせて完成。

var map = new L.Map('map', {
	center: [38.23, 138.933],
	zoom: 6,
	layers: [mapboxTiles, heatmapLayer],
});

Example -> Foursquare - Heatmap

6. Retinaディスプレイへの対応

このままではiPhoneなどのRetinaディスプレイで表示すると少しぼやけてしまう。
Retinaの解像度に合わせるには2倍の大きさで描画して、cssで半分にする操作が必要。
Heatmap.jsで対応するには直接ライブラリを編集しないといけない。一応対応できたが、まだ理解できているか分からないので。。。

参考:
[HTML5] CanvasでRetina対応を行う - YoheiM .NET