addexample

Kanahiro · Kanahiro · commit 574b2f92eba3 · 2025-01-04T03:44:07.000+09:00
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>maplibre-gl-gsi-terrain</title>
+	</head>
+	<body style="margin: 0">
+		<div id="app" style="height: 100vh"></div>
+		<script type="module" src="./index.ts"></script>
+	</body>
+</html>
diff --git a/example/index.ts b/example/index.ts
@@ -0,0 +1,50 @@
+import maplibregl from 'maplibre-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { useGsiTerrainSource } from '../src/terrain.ts';
+
+const gsiTerrainSource = useGsiTerrainSource(maplibregl.addProtocol, {
+	tileUrl: 'https://tiles.gsj.jp/tiles/elev/mixed/{z}/{y}/{x}.png',
+	maxzoom: 17,
+	attribution:
+		'<a href="https://gbank.gsj.jp/seamless/elev/">産総研シームレス標高タイル</a>',
+});
+
+new maplibregl.Map({
+	container: 'app',
+	zoom: 13,
+	center: [138.7, 35.3],
+	minZoom: 5,
+	maxZoom: 18,
+	pitch: 70,
+	maxPitch: 100,
+	style: {
+		version: 8,
+		projection: {
+			type: 'globe',
+		},
+		sources: {
+			seamlessphoto: {
+				type: 'raster',
+				tiles: [
+					'https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg',
+				],
+				maxzoom: 18,
+				tileSize: 256,
+				attribution:
+					'<a href="https://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>',
+			},
+			terrain: gsiTerrainSource,
+		},
+		layers: [
+			{
+				id: 'seamlessphoto',
+				source: 'seamlessphoto',
+				type: 'raster',
+			},
+		],
+		terrain: {
+			source: 'terrain',
+			exaggeration: 1.2,
+		},
+	},
+});
