-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
153 lines (138 loc) · 4.58 KB
/
demo.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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MapTiler Vector Tiles Map</title>
<!-- Maplibre GL JS CSS -->
<link
href="https://unpkg.com/[email protected]/dist/maplibre-gl.css"
rel="stylesheet"
/>
<!-- Maplibre GL JS -->
<script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#map {
width: 100%;
height: 100%;
}
#header {
text-align: center;
font-family: monospace;
font-weight: bold;
}
.print-btn {
background-color: #ff6e9e;
border: 2px solid #121b3c;
border-radius: 30px;
box-shadow: #cb3768 4px 4px 0 0;
color: #121b3c;
cursor: pointer;
display: inline-block;
font-weight: 600;
font-size: 12px;
line-height: 35px;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
margin-top: 10px;
margin-left: 10px;
padding: 0px 20px;
}
.print-btn:hover {
background-color: #fff;
}
.print-btn:active {
box-shadow: #422800 2px 2px 0 0;
transform: translate(2px, 2px);
}
@media print {
@page {
size: A4; /* DIN A4 standard, Europe */
margin: 0 !important;
}
html,
body {
width: 210mm;
height: 297mm;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
}
.no-print {
display: none !important;
}
}
</style>
</head>
<body id="print-area">
<button id="printButton" class="print-btn no-print" role="button">
Skriv ut
</button>
<h1 id="header">Gruppenavnet ditt</h1>
<div id="map"></div>
<script>
//senterpunktet for kartet
let senterpunkt = [7.995611, 58.146722];
//grunnstil for kartet
let grunnstil =
"https://api.maptiler.com/maps/basic/style.json?key=2Gpu1OQBPRJaorLakLSs";
//denne må du sette til 'true' for å aktivere fargelegging av kartet
let fargelegg = false;
// Her setter vi fargene til kartet
let bakgrunnsfarge = "green";
let veifarge = "red";
let bygningsfarge = "rgba(70,0,50,0.7)";
let vannfarge = "pink";
let skogfarge = "red";
let gressfarge = "orange";
let jernbanefarge = "black";
let boligfarge = "black";
// Initialiser kartet med MapTiler vektor tiles
var map = new maplibregl.Map({
container: "map", // ID til elementet der kartet skal vises
style: fargelegg ? "https://api.maptiler.com/maps/basic/style.json?key=2Gpu1OQBPRJaorLakLSs" : grunnstil,
center: senterpunkt, // Kristiansand
zoom: 14, // Zoomnivå
preserveDrawingBuffer: true, //settes til true for å printe ut
});
map.on("load", function () {
if (fargelegg) {
map.setPaintProperty(
"background",
"background-color",
bakgrunnsfarge
); // bakgrunn
map.setPaintProperty("building", "fill-color", bygningsfarge); // Bygninger
map.setPaintProperty("water", "fill-color", vannfarge); // Vann
map.setPaintProperty("landcover_wood", "fill-color", skogfarge); // Skog
map.setPaintProperty("landcover_grass", "fill-color", gressfarge); // gress
map.setPaintProperty("landuse_residential", "fill-color", boligfarge); // Boligområder
map.setPaintProperty("landuse_residential", "fill-color", boligfarge); // Boligområder
map.setPaintProperty("road_minor", "line-color", veifarge); // Veier
map.setPaintProperty("road_major", "line-color", veifarge); // Veier
map.setPaintProperty("road_tunnel", "line-color", veifarge); // Veier
map.setPaintProperty("road_motorway", "line-color", veifarge); // Veier
map.setPaintProperty("bridge", "line-color", veifarge); // Veier
map.setPaintProperty("railway", "line-color", jernbanefarge); // Jernbane
}
});
const btn = document.getElementById("printButton");
btn.addEventListener("click", () => {
const defTitle = document.title;
document.title = "print-area";
window.print();
document.title = defTitle;
});
</script>
</body>
</html>