WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

世界地図をベクターデータで表示するjQuery Vector Maps

f:id:mmmmofu:20161130132015p:plain

デモはこちら

http://efu.sakura.ne.jp/web/vectormaps/

jqvmap.com
公式サイトからファイルをダウンロードする

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery Vector Maps</title>
  <link rel="stylesheet" href="css/jqvmap.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="js/jquery.vmap.js"></script>
  <script src="js/jquery.vmap.world.js"></script>
  <script src="js/jquery.vmap.sampledata.js"></script>
  <script src="js/script.js"></script>
</head>
<body>
  <div id="map"></div>
</body>
</html>

「jqvmap.css」と「jquery.vmap.js」と「jquery.vmap.sampledata.js」と「jquery.vmap.world.js」を読みこむ
地図を表示するためのdivを用意

jqvmap.css

.jqvmap-label
{
	position: absolute;
	display: none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background: #292929;
	color: white;
	font-family: sans-serif, Verdana;
	font-size: smaller;
	padding: 3px;
  pointer-events:none;
}
.jqvmap-pin {
  pointer-events:none;
}
.jqvmap-zoomin, .jqvmap-zoomout
{
	position: absolute;
	left: 10px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background: #533834;
	padding: 3px;
	color: white;
	width: 20px;
	height: 20px;
	cursor: pointer;
	line-height: 20px;
	text-align: center;
}
.jqvmap-zoomin
{
	top: 10px;
}
.jqvmap-zoomout
{
	top: 40px;
}
.jqvmap-region
{
  cursor: pointer;
}
.jqvmap-ajax_response
{
  width: 100%;
  height: 500px;
}

style.css

body {
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
}

#map {
  width: 780px;
  height: 540px;
  margin: 50px auto;
}

HTMLで設定した地図を表示したいエリアに横幅と縦幅を設定する

script.js

$(function() {
  $('#map').vectorMap({
    map: 'world_en', //ロードしたいマップエリア world_en, usa_en, europe_en,germany_en
    backgroundColor: '#B9D3C2', //背景色
    borderColor: '#FFFFFF',//ボーダーの色
    borderOpacity: 1,//ボーダーの透明度
    borderWidth: 1,//ボーダーの幅
    color: '#EBE3CD', //地域の色
    hoverOpacity: 0.7, //マウスオーバー時の透過度
    selectedColor: '#A5B076', //選択された時の色
    enableZoom: true, //ズームさせるか
    showTooltip: true, //吹き出しをだすか
    values: sample_data, //色を付けたいエリア
    scaleColors: ['#EBE3CD', '#DFD2AE'], //上記で指定した場所の色
    normalizeFunction: 'polynomial' //色の分布
  });
});

HTMLで用意した地図を表示させる要素に地図の設定