MapBox_Shiga_all-gsi-seamless.html

﻿<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>志賀全山【地理院】</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
<style type="text/css">
		html{height:100%; margin: 0px;}
		body { margin: 0; padding: 0; height:100%;}
		#main {
			position:relative;
			transition: margin-left .5s;
			padding: 16px;
			height:96%;
		}
		#map { 
   			position: absolute; 
   			top: 0; right: 0; 
   			bottom: 0; left: 0;
  			width:100%;
   			height:100%; 
		}
	</style> 
</head>
<body>
<div id="main">
 	<div id='map'></div>
</div>
<script>
const data={"version": 8, 
"sources": {
		"t_pale": {"type": "raster","tiles": ["https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg"], "tileSize": 256, }
		},
		"layers": [{ "id": "t_pale", "type": "raster", "source": "t_pale",
			"minzoom": 9,"maxzoom": 18}]
		};

mapboxgl.accessToken = 'pk.eyJ1IjoibWFzYXRhIiwiYSI6ImNsa2hueXN5bTAxOTIzZG1nMDFxMTk4NjIifQ.LrUwW0ONKom7uKZqEonwXQ';
	const map = new mapboxgl.Map({
		container: 'map', zoom: 13.5,
		maxZoom: 18, minZoom: 9,
		center: [138.4991,36.7223],
		pitch: 70, bearing: 0,
		antialias: true,
		style: data
	});

	map.on('load', () => {
 		map.addLayer({
			'id': 'sky',
			'type': 'sky',
			'paint': {
				'sky-type': 'atmosphere',
				'sky-atmosphere-sun': [0.0, 0.0],
				'sky-atmosphere-sun-intensity': 15
			}
		});
		
		map.addControl(new mapboxgl.FullscreenControl());
		map.addControl(new mapboxgl.NavigationControl());
		map.addSource('mapbox-dem', {
			'type': 'raster-dem',
			'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
			'tileSize': 512,
			'maxzoom': 14
		});
		map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.0 });
	});
</script>
</body>
</html>