2014-07-23 更新
このページでは，シームレス地質図のタイル画像を使って，皆様のWebサイトでシームレス地質図を表示させる方法やサンプルファイルをご紹介します．⇒ 日本シームレス地質図WMTS試験配信サービス仕様
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/static.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>シームレス地質図タイル利用－最小サンプル</title>
</head>
<body>
<h4>シームレス地質図タイル利用－最小サンプル</h4>
<div id="map" style="width: 400px; height: 300px;"></div>
<img src="https://gbank.gsj.jp/seamless/img/aist_logo_l.png" alt="AIST" id="logo"
onclick="location.href='http://www.aist.go.jp/'"
style="width: 50px; height: 18px; opacity: 0.7;" />
<span style="font-size: small;">
<img style="width:36px;" src="https://www.gsj.jp/license/images/GSJ_LOGO_200711_bl.png"></img>
<a href="https://gbank.gsj.jp/seamless/">20万分の1日本シームレス地質図</a>
<a href="http://creativecommons.org/licenses/by-nd/2.1/jp/">
<img src="https://www.gsj.jp/common/images/ccbynd_s.png"></img>
</a>
基本版を使用 (→<a href="https://gbank.gsj.jp/seamless/legend.html">凡例画像</a>)<br />
「シームレス地質図<sup>®</sup>」は産業技術総合研究所の登録商標です
</span>
<script src="http://maps.google.com/maps/api/js?sensor=false®ion=jp"></script>
<script>
// Webアプリの初期化
function initialize() {
var _server = 'https://gbank.gsj.jp/seamless/tilemap/'; // 日本シームレス地質図WMTSサービスURL
var _geolMapType = 'basic'; // 地質図の種類(basic: 基本版, detailed: 詳細版)
var _layer = 'glfn'; // レイヤー(glfn: 地質＋ライン＋断層＋凡例番号）
var _opacity = 0.7; // 地質図の不透明度(0-1, 0が完全に透明)
var _map = new google.maps.Map(document.getElementById('map'), {
zoom: 11, // ズームレベル(5-13, 大きいほど拡大)
center: new google.maps.LatLng(36.22, 140.13), // 中心の緯度・経度(360度法十進数)
mapTypeId: google.maps.MapTypeId.ROADMAP, // 背景地図の種類
// ROADMAP: 道路地図, SATELLITE: 衛星写真
// HYBRID: 衛星写真＋道路, TERRAIN: 地形・植生
minZoom: 5,
maxZoom: 13
} );
_map.overlayMapTypes.insertAt(0, new google.maps.ImageMapType({
getTileUrl: function(_coord, _z) {
return _server+_geolMapType +'/'+_layer +'/'+_z+'/'+_coord.y+'/'+_coord.x+'.png';
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
opacity: _opacity,
minZoom: 8,
maxZoom: 13
}));
var _aistLogo =document.getElementById('logo');
_map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(_aistLogo);
};
// windowロード時に initialize関数を呼び出す
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
function initialize() {
var _server = 'https://gbank.gsj.jp/seamless/tilemap/'; // 日本シームレス地質図WMTS配信サービスURL
var _geolMapType = 'detailed'; // 地質図の種類(basic: 基本版, detailed: 詳細版)
var _layer = 'g'; // レイヤー(glfn: 地質＋ライン＋断層＋凡例番号）
var _opacity = 0.5; // 地質図の不透明度(0-1, 0が完全に透明)
var _map = new google.maps.Map(document.getElementById('map'), {
zoom: 9, // ズームレベル(5-13, 大きいほど拡大)
center: new google.maps.LatLng(34, 135), // 中心の緯度・経度(360度法十進数)
mapTypeId: google.maps.MapTypeId.ROADMAP, // 背景地図の種類
// ROADMAP: 道路地図, SATELLITE: 衛星写真
// HYBRID: 衛星写真＋道路, TERRAIN: 地形・植生
minZoom: 5,
maxZoom: 13
} );
// 地図を合わせる範囲を指定する．この例は淡路島
_map.fitBounds(new google.maps.LatLngBounds(
new google.maps.LatLng(34.19, 134.65),
new google.maps.LatLng(34.61, 135.03)
));
...(中略)...
};
function initialize() {
...(中略)...
var _marker = new google.maps.Marker({
position: new google.maps.LatLng(36.23, 140.10),
map: _map
});
var _info =new google.maps.InfoWindow({
content: '<h4>筑波山</h4>山頂は斑れい岩でできています。<br />' +
'<a href="http://www.gsj.jp/Info/100mt/tsukuba/tsuku_dr.html;→地質で語る百名山</a>'
});
_info.open(_map, _marker);
var _aistLogo =document.getElementById('logo');
_map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(_aistLogo);
};
function initialize() {
...(中略)...
var kmlUrl = 'https://gbank.gsj.jp/seamless/sample/geomeister2011_mini.kmz';
new google.maps.KmlLayer(kmlUrl, {map: _map});
var _aistLogo =document.getElementById('logo');
_map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(_aistLogo);
};
var map; // マップオブジェクト
var clickLatLng; // クリック位置
// Webアプリの初期化
function initialize() {
var _server = 'https://gbank.gsj.jp/seamless/tilemap/'; // 日本シームレス地質図WMTSサービスURL
...(中略)...
google.maps.event.addListener(map, 'click', function(event) { // 地図クリック時の動作を記述
clickLatLng = event.latLng; // show()関数で利用するためにコピー
var _ll = event.latLng.lat()+','+event.latLng.lng();
var _script = document.createElement('script'); // sciprt要素を生成
var _query = _geolMapType + '/g?latlng=' + _ll + '&callback=show';
_script.setAttribute( 'src', _server + _query ); //凡例情報取得APIを指定
document.getElementsByTagName('body')[0].appendChild(_script); // script要素を追加
});
var _aistLogo =document.getElementById('logo');
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(_aistLogo);
};
function show(_data) { // 凡例情報が取得できたときに呼び出される関数
var _infoWnd = new google.maps.InfoWindow({ // 情報ウィンドウを生成
position: clickLatLng,
content: '<div style="font-size:small;width:300px;">No. '+_data.ID+'<br />'
+_data.description+'</div>'
// _dataオブジェクトからは以下のような情報を取得できます
// ID: 凡例番号，description: 説明，title: タイトル，fill: 色(16進6桁), group: グループ
// formationAge: 形成年代，lithology: 岩質, partOf:（詳細版のみ）対応する基本版の凡例番号
});
_infoWnd.open(map);
}