MapLibre_shiga-gsi.html

﻿<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>志賀（奥志賀・一ノ瀬・高天が原・ジャイアント）【地理院】</title>
    <meta name="description" content="サンプルです">
    <link href="style.css" rel="stylesheet">
    <!-- MapLibre -->
    <script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
    <link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }
    #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
</style>

<body>
<div id="map"></div>

<script>
var map = new maplibregl.Map({
    container: 'map',
    style: {
        version: 8,
        sources: {
            rtile: {
                type: 'raster',
                tiles: [
                    'https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg',
                ],
                tileSize: 256,
                attribution:
                    '<a href="https://cyberjapandata.gsi.go.jp" target="_blank">&copy; OpenStreetMap contributors</a>',
            },
            osmtile: {
                type: 'raster',
                tiles: [`https://tile.openstreetmap.jp/{z}/{x}/{y}.png`],
                tileSize: 256,
            },
        },

        layers: [
            {
                id: 'osm-tiles',
                type: 'raster',
                source: 'osmtile',
                minzoom: 0,
                maxzoom: 22,
            },
            {
                id: 'raster-tiles',
                type: 'raster',
                source: 'rtile',
                minzoom: 0,
                maxzoom: 22,
            },
        ],
    },
    center: [138.5141,36.7403], // 中心座標
    zoom: 13, // ズームレベル
});

</script>
</body>
</html>