今日の人気記事

  1. テーブルのヘッダーを固定してデータ行をスクロール表示「tbodyScroll」
  2. JSONデータからテーブルを表示「Columns」 - ソート - 検索 - ページャー
  3. テキストの手動入力っぽいアニメーションを実装「TypeType」
  4. レスポンシブ・グリッドを実装「Awesome Grid」
  5. 六角形のカラーピッカー 「Hex Colorpicker」

Google マップにヒートマップを追加「Heat Map」

スポンサーリンク

Google マップにヒートマップを追加するプラグイン「Heat Map」を紹介します。

jQueryプラグイン「Heat Map」

このプラグインを使えば、都市名と暑さの値を入力するだけで簡単にヒートマップを作成することができます。しかも!Google マップ上に。

スクリプトでどこからか温度を取得することができれば、自動でヒートマップを更新することも可能かもしれませんね。

スポンサーリンク

それではデモページのヒートマップをご覧ください。

「Heat Map」のデモ

ソース( HTML + jQuery )



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Heat Map のデモでーす。">
<title>Heat Map - jQueryプラグイン</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="heatmap.js"></script>
<style>
#target {
  width: 600px;
  height: 400px;
}
</style>
</head>
<body>
<h1>Heat Map のデモでーす。</h1>
<div id="target"></div>

<table id="source">
<tbody>
<tr>
  <th class="source">Tokyo</td>
  <td class="value">2.5</td>
</tr>
<tr>
  <th class="source">Kyoto</td>
  <td class="value">1.5</td>
</tr>
<tr>
  <th class="source">Nagano</td>
<td class="value">3.2</td>
</tr>
<tr>
<th class="source">Osaka</td>
<td class="value">2.2</td>
</tr>
<tr>
<th class="source">Nagoya</td>
<td class="value">5.2</td>
</tr>
</tbody>
</table>

<script type="text/javascript">
	$(function() {
		$('#source').heatmap('target', 15);
	});
</script>

</body>
</html>
スポンサーリンク

関連記事(一部広告含む)