-
Notifications
You must be signed in to change notification settings - Fork 16
/
maplibre-v3.html
128 lines (126 loc) · 3.61 KB
/
maplibre-v3.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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Display a map</title>
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/[email protected]/dist/index.min.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 demSource = new mlcontour.DemSource({
url: "https://elevation-tiles-prod.s3.amazonaws.com/terrarium/{z}/{x}/{y}.png",
encoding: "terrarium",
maxzoom: 13,
});
// calls maplibregl.addProtocol for the shared cache and contour protocols
demSource.setupMaplibre(maplibregl);
var map = new maplibregl.Map({
container: "map",
zoom: 12.55,
center: [86.92731, 27.97797],
hash: true,
style: {
version: 8,
glyphs: "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf",
sources: {
dem: {
type: "raster-dem",
encoding: "terrarium",
tiles: [demSource.sharedDemProtocolUrl], // share cached DEM tiles with contour layer
maxzoom: 13,
tileSize: 256,
},
contours: {
type: "vector",
tiles: [
demSource.contourProtocolUrl({
// meters to feet
multiplier: 3.28084,
thresholds: {
// zoom: [minor, major]
11: [200, 1000],
12: [100, 500],
13: [100, 500],
14: [50, 200],
15: [20, 100],
},
elevationKey: "ele",
levelKey: "level",
contourLayer: "contours",
}),
],
maxzoom: 16,
},
},
layers: [
{
id: "hills",
type: "hillshade",
source: "dem",
paint: {
"hillshade-exaggeration": 0.25,
},
},
{
id: "contours",
type: "line",
source: "contours",
"source-layer": "contours",
paint: {
"line-color": "rgba(0,0,0, 50%)",
"line-width": ["match", ["get", "level"], 1, 1, 0.5],
},
layout: {
"line-join": "round",
},
},
{
id: "contour-text",
type: "symbol",
source: "contours",
"source-layer": "contours",
filter: [">", ["get", "level"], 0],
paint: {
"text-halo-color": "white",
"text-halo-width": 1,
},
layout: {
"symbol-placement": "line",
"text-anchor": "center",
"text-size": 10,
"text-field": [
"concat",
["number-format", ["get", "ele"], {}],
"'",
],
"text-font": ["Noto Sans Bold"],
},
},
],
},
});
</script>
</body>
</html>