[JS]スムーズなアニメーションで地図（大きい画像）をダイナミックにスクロールさせるスクリプト -CraftMap

サイト構築 -JavaScript

Post on:2011年12月19日

CraftMapのデモ

デモは二つあり、ページ内の一部に配置したものとウインドウいっぱいに配置したものがあります。

地図のスクロール方法は3種類の操作が可能です。

ナビゲーション（左のパネル）の各ラベルをクリック
地図上のマーカーをクリック
地図をドラッグ

各ラベル・マーカーをクリックすると、それに対応した付加情報をパネルで表示します。

Demo 1: ページ内の一部に配置

Demo 2: ウインドウいっぱいに配置

[ad#ad-2]

CraftMapの実装

外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして指定します。

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/craftmap.js" type="text/javascript"></script>

HTML

ベースとなる地図、マーカー、付加情報のパネル、ナビゲーションをdiv要素で内包します。

<div class="map">
<img src="path_to_the_image.jpg" class="imgMap" />
<div class="marker" id="ID" data-coords="x, y">
<!-- HTML CONTENT -->
</div>
<!-- etc. -->
</div>
 
<div class="controls">
<a href="#" rel="ID">text</a>
<!-- etc. -->
</div>

JavaScript

jQueryのセレクタで地図（.map）を指定します。
スクリプトのオプションでは、クッキーの有無、地図のサイズ、全画面表示、マーカーやナビゲーションの設定が可能です。

$('.map').craftmap({
cookies: false, // (bool) remember position
fullscreen: false, // (bool) fullscreen
container: {
name: 'imgContent' // (string) class name for an image container
},
image: {
width: 1475, // (int) image width
height: 1200, // (int) image height
name: 'imgMap' // (string) class name for an image
},
map: {
position: 'center' // (string) map position after loading - 'X Y', 'center', 'top_left', 'top_right', 'bottom_left', 'bottom_right'
},
marker: {
name: 'marker', // (string) class name for a marker
center: true, // (bool) set true to pan the map to the center
popup: true, // (bool) set true to show a popup
popup_name: 'popup', // (string) class name for popup
onClick: function(marker, popup){},
onClose: function(marker, popup){}
},
controls: {
init: true, // (bool) set true to control a map from any place on the page
name: 'controls', // (string) class name for controls container
onClick: function(marker){}
},
preloader: {
init: true, // (bool) set true to preload an image
name: 'preloader', // (string) class name for a preload container
onLoad: function(img, dimensions){}
}
});