ソースファイルを表示
sample/sample_maps2.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
<title>Leaflet 地図の表示</title>
<link rel="stylesheet" href="js/leaflet.css" />
<link rel="stylesheet" charset="UTF-8" href="js/leaflet_opacity.css" />
<link rel="stylesheet" charset="UTF-8" href="js/leaflet_cross.css" />
<script type="text/javascript" src="js/leaflet.js"></script>
<script type="text/javascript" charset="UTF-8" src="js/leaflet_opacity.js"></script>
<script type="text/javascript" charset="UTF-8" src="js/leaflet_url.js"></script>
<script type="text/javascript" charset="UTF-8" src="js/L.Map.Sync.js"></script>
<style type="text/css">
#map_base {
position:absolute;
top:0; left:0; right:0; bottom:0;
cursor: default;
display: flex;
flex-direction: row;
}
#map_container1 {
width: 100%;
height: 100%;
cursor: default;
}
#map_container2 {
width: 100%;
height: 100%;
cursor: default;
}
</style>
<script type="text/javascript" charset="UTF-8">
var map1; // Map1の定義
var baseMap1 = [ // ベースマップ1の定義
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png",{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
+ " target='_blank'>地理院標準地図</a>", minZoom: 2, maxZoom: 18}),
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png",{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
+ " target='_blank'>地理院淡色地図</a>", minZoom: 2, maxZoom: 18}),
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{
attribution: "<a href='https://www.openstreetmap.org/copyright'"
+ " target='_blank'>OpenStreetMap</a>", minZoom: 2, maxZoom: 19})
];
var overMap1 = [ // オーバーレイマップ1の定義
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg",{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
+ " target='_blank'>地理院最新写真</a>", minZoom: 2, maxZoom: 18}),
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/gazo1/{z}/{x}/{y}.jpg",{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
+ " target='_blank'>1970年代写真</a>", minZoom: 10, maxZoom: 17}),
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/ort_old10/{z}/{x}/{y}.png",{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
+ " target='_blank'>1960年代写真</a>", minZoom: 2, maxZoom: 17}),
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png",{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
+ " target='_blank'>色別標高図</a>", minZoom: 5, maxZoom: 16, opacity: 0.2}),
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/hillshademap/{z}/{x}/{y}.png",{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
+ " target='_blank'>陰影起伏図</a>", minZoom: 5, maxZoom: 16, opacity: 0.2})
];
var baseCtl1 = { // ベースマップ1切替ボタンの定義
"地理院標準地図": baseMap1[0],
"地理院淡色地図": baseMap1[1],
"OpenStreetMap": baseMap1[2]
};
var overCtl1 = { // オーバーレイマップ1切替ボタンの定義
"地理院最新写真": overMap1[0],
"1970年頃写真": overMap1[1],
"1960年頃写真": overMap1[2],
"色別標高図": overMap1[3],
"陰影起伏図": overMap1[4]
};
var map2; // Map2の定義
var baseMap2 = [ // ベースマップ2の定義
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png",{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
+ " target='_blank'>地理院標準地図</a>", minZoom: 2, maxZoom: 18}),
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png",{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
+ " target='_blank'>地理院淡色地図</a>", minZoom: 2, maxZoom: 18}),
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{
attribution: "<a href='https://www.openstreetmap.org/copyright'"
+ " target='_blank'>OpenStreetMap</a>", minZoom: 2, maxZoom: 19})
];
var overMap2 = [ // オーバーレイマップ2の定義
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg",{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
+ " target='_blank'>地理院最新写真</a>", minZoom: 2, maxZoom: 18}),
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/gazo1/{z}/{x}/{y}.jpg",{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
+ " target='_blank'>1970年代写真</a>", minZoom: 10, maxZoom: 17}),
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/ort_old10/{z}/{x}/{y}.png",{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
+ " target='_blank'>1960年代写真</a>", minZoom: 2, maxZoom: 17}),
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png",{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
+ " target='_blank'>色別標高図</a>", minZoom: 5, maxZoom: 16, opacity: 0.2}),
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/hillshademap/{z}/{x}/{y}.png",{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
+ " target='_blank'>陰影起伏図</a>", minZoom: 5, maxZoom: 16, opacity: 0.2})
];
var baseCtl2 = { // ベースマップ2切替ボタンの定義
"地理院標準地図": baseMap2[0],
"地理院淡色地図": baseMap2[1],
"OpenStreetMap": baseMap2[2]
};
var overCtl2 = { // オーバーレイマップ2切替ボタンの定義
"地理院最新写真": overMap2[0],
"1970年頃写真": overMap2[1],
"1960年頃写真": overMap2[2],
"色別標高図": overMap2[3],
"陰影起伏図": overMap2[4]
};
function init() {
// Map1の設定
map1 = L.map('map_container1', { zoomControl: false });
map1.setView([37,136.5], 6); // 日本を表示
baseMap1[0].addTo(map1);
L.control.scale({imperial:false, position:'bottomright'}).addTo(map1); // 目盛表示
L.control.zoom({position:'bottomright'}).addTo(map1); // ズーム制御
L.control.opacityLayers(baseCtl1, overCtl1, {collapsed:true}).addTo(map1); // 透過付マップ切替
let url = L.urlHandler(map1); // リンク書換機能の追加
if (typeof url._zoom != 'undefined') { // 位置情報付URL
map1.setView([url._lat, url._lng], url._zoom);
}
// Map2の設定
map2 = L.map('map_container2', { zoomControl: false });
map2.setView([37,136.5], 6); // 日本を表示
baseMap2[1].addTo(map2);
L.control.scale({imperial:false, position:'bottomright'}).addTo(map2); // 目盛表示
L.control.zoom({position:'bottomright'}).addTo(map2); // ズーム制御
L.control.opacityLayers(baseCtl2, overCtl2, {collapsed:true}).addTo(map2); // 透過付マップ切替
// Map1とMap2の連動設定
map1.sync(map2);
map2.sync(map1);
}
</script>
</head>
<body onload="init()">
<div id="map_base">
<div id="map_container1" class="cross"></div>
<div id="map_container2" class="cross"></div>
</div>
</body>
</html>