[Mapboxライブラリ] マウスホイールで地図を拡大／縮小表示する
説明
Mapboxライブラリでマウスホイールで地図を拡大／縮小表示するには表示する地図全体を囲むdivタグを用意します。このdivタグにID名を割り当てておきます。さらに内側にdivタグを記述し最初のdivタグには最もズームアウトした状態の地図（画像）をCSSの背景画像として定義します。次に少しズームインした地図（画像）をdivタグ内のimgタグで指定します。そのimgタグと同じ階層にdivタグを記述しclass="mapcontent"を指定します。ズームインする地図（画像）の枚数分だけdiv〜imgを用意します。サンプルのように大きな画像を1枚だけ用意しておくことも可能です。
ページが読み込まれたら全体を囲むdivタグを$()で指定しmapbox()メソッドを呼び出します。このmapbox()メソッドのオプションパラメータのmousewheelにtrueを指定すればマウスホイールで地図（画像）を拡大縮小することができるようになります。
サンプルプログラム
【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/mapbox.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/mapbox.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>Mapbox</h1>
<div id="viewport">
<div style="background: url(images/thumb.jpg) no-repeat; width: 561px; height: 374px;"></div>
<div style="height: 5616px; width: 3744px;">
<img src="images/1.jpg">
<div class="mapcontent"></div>
</div>
</div>
</body>
</html>
【sample.js】
$(function(){
$("#viewport").mapbox({
mousewheel: true
});
});