etoyoda/map-sample.html

## map-sample.html
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>作図例</title>


<!--
Leaflet のプログラム読み込み。integrityはCDNでの改ざんを防ぐための情報セキュリティ対策
 -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"
  integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ=="
  crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"
  integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg=="
  crossorigin=""></script>

<!-- このページでの描画ロジック -->
<script type="text/javascript">

function init() {

 // タイル背景地図（１）淡色地図

 var tile1 = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
  attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>(淡色)',

  maxZoom: 14

 });

 // タイル背景地図（２）標高

 var tile2 = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png', {

  attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>(標高)',

  maxZoom: 14

 });

 // タイル背景地図（３）写真

 var tile3 = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', {

  attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>(写真)',

  maxZoom: 18

 });

 // 松戸にマーカーを置く

 var marker = L.marker([35.78742, 139.90342]);

 marker.bindPopup('松戸市役所')

 // ポリゴンの例として、東京、船橋、越谷に頂点を置く三角形を描く

 var polygon = L.polygon([

  [35.6916, 139.7500], // 東京
  [35.7117, 140.0433], // 船橋
  [35.8833, 139.7567]
, // 越谷
 ]);

 polygon.bindPopup('ポリゴンの例（東京、船橋、越谷を頂点とする三角形');

 // 背景地図以外のもの（マーカーとポリゴン）を一気に消せるようグループ化
 var overlays = L.layerGroup([marker, polygon]);

 // 地図作成、中心位置決め

 var mymap = L.map('mapid', {

  center: [35.78742, 139.90342],

  zoom: 10,

  layers: [tile1, overlays]

 });
 // 背景地図まとめ
 var basemaps = {
 "淡色地図": tile1,
 "標高": tile2, "写真": tile3
 };

 L.control.layers(basemaps, {"データ": overlays}).addTo(mymap);
}
</script>
</head>

<body onLoad="init();">

<h1>作図例</h1>

これは Leaflet による地図張り込みの例です。
さらなる機能については <a href="http://leafletjs.com/">http://leafletjs.com/</a> をさんこうにしてください。
<div id="mapid" style="width:300px;height:240px;">このテキストが見えるとき、描画がうまくいっていません。</div>

</body>
</html>
	<html>
	<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title>作図例</title>


	<!--
	Leaflet のプログラム読み込み。integrityはCDNでの改ざんを防ぐための情報セキュリティ対策
	-->
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"
	integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ=="
	crossorigin=""/>
	<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"
	integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg=="
	crossorigin=""></script>

	<!-- このページでの描画ロジック -->
	<script type="text/javascript">

	function init() {

	// タイル背景地図（１）淡色地図

	var tile1 = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
	attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>(淡色)',

	maxZoom: 14

	});

	// タイル背景地図（２）標高

	var tile2 = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png', {

	attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>(標高)',

	maxZoom: 14

	});

	// タイル背景地図（３）写真

	var tile3 = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', {

	attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>(写真)',

	maxZoom: 18

	});

	// 松戸にマーカーを置く

	var marker = L.marker([35.78742, 139.90342]);

	marker.bindPopup('松戸市役所')

	// ポリゴンの例として、東京、船橋、越谷に頂点を置く三角形を描く

	var polygon = L.polygon([

	[35.6916, 139.7500], // 東京
	[35.7117, 140.0433], // 船橋
	[35.8833, 139.7567]
	, // 越谷
	]);

	polygon.bindPopup('ポリゴンの例（東京、船橋、越谷を頂点とする三角形');

	// 背景地図以外のもの（マーカーとポリゴン）を一気に消せるようグループ化
	var overlays = L.layerGroup([marker, polygon]);

	// 地図作成、中心位置決め

	var mymap = L.map('mapid', {

	center: [35.78742, 139.90342],

	zoom: 10,

	layers: [tile1, overlays]

	});
	// 背景地図まとめ
	var basemaps = {
	"淡色地図": tile1,
	"標高": tile2, "写真": tile3
	};

	L.control.layers(basemaps, {"データ": overlays}).addTo(mymap);
	}
	</script>
	</head>

	<body onLoad="init();">

	<h1>作図例</h1>

	これは Leaflet による地図張り込みの例です。
	さらなる機能については <a href="http://leafletjs.com/">http://leafletjs.com/</a> をさんこうにしてください。
	<div id="mapid" style="width:300px;height:240px;">このテキストが見えるとき、描画がうまくいっていません。</div>

	</body>
	</html>