This repository has been archived by the owner on Sep 16, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
maplibre.html
50 lines (44 loc) · 1.66 KB
/
maplibre.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test WMS layer</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="https://ioalexei.github.io/tur_adm2/js/index.js"></script>
<script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/[email protected]/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>
var map = new maplibregl.Map({
container: 'map',
style: 'https://tiles.stadiamaps.com/styles/alidade_smooth.json?api_key=4c2104b1-b9f9-49bf-bb6a-b5103c46ad85', // stylesheet location
center: [0, 51], // starting position [lng, lat]
zoom: 6 // starting zoom
});
// Add navigation widget https://maplibre.org/maplibre-gl-js-docs/example/navigation/
map.addControl(new maplibregl.NavigationControl());
map.on('load', function () {
map.addSource('wms-test-source', {
'type': 'raster',
// use the tiles option to specify a WMS tile source URL
// https://maplibre.org/maplibre-gl-js-docs/style-spec/sources/
'tiles': ["https://api.mapbox.com/styles/v1/go-ifrc/ckrfe16ru4c8718phmckdfjh0/wmts?crs=EPSG:3857&dpiMode=7&format=image/png&layers=ckrfe16ru4c8718phmckdfjh0&styles=default&tileMatrixSet=GoogleMapsCompatible&access_token=pk.eyJ1IjoiZ28taWZyYyIsImEiOiJjamlybHUzNmMwZDUxM3Fwa215YjJ1dzk5In0.OhqEybDX303sHjHzq3nFYQ"],
'tileSize': 512
});
map.addLayer(
{
'id': 'wms-test-layer',
'type': 'raster',
'source': 'wms-test-source',
'paint': {}
});
});
</script>
</body>
</html>