maplibrary/single.html at main · yohman/maplibrary · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <script src="https://unpkg.com/maplibre-gl@3.1.0/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl@3.1.0/dist/maplibre-gl.css" rel="stylesheet">
    <style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
 </head>
 <body>
 <div id="map"></div>
<script>
// Initialize the map
var map = new maplibregl.Map({
    container: 'map',
    style: {
        version: 8,
        sources: {
            'google-satellite': {
                'type': 'raster',
                'tiles': [
                    'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}'
                ],
                'tileSize': 256
            }
        },
        layers: [
            {
                'id': 'google-satellite',
                'type': 'raster',
                'source': 'google-satellite'
            }
        ]
    },
    center: [139.63230124809792,35.48472475948621],
    zoom: 13
});

map.on('load', function() {
    map.addSource('tokyo-1945', {
        'type': 'raster',
        'tiles': [
            'https://tiles.ats.ucla.edu/tiles/Tokyo_1945_1/{z}/{x}/{y}.png'
        ],
        'tileSize': 256
    });
    map.addLayer({
        'id': 'tokyo-1945-layer',
        'type': 'raster',
        'source': 'tokyo-1945',
        'paint': {
            'raster-opacity': 0.8
        }
    });
});
 </script>

 </body>
 </html>