-
Notifications
You must be signed in to change notification settings - Fork 4
/
print.html
128 lines (111 loc) · 4.1 KB
/
print.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>
<head>
<title>Print</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="lib/leaflet.css" />
<link href="lib/jquery-ui.css" rel="stylesheet">
<link href="lib/bootstrap.v4.0.0.min.css" crossorigin="anonymous" alt="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" rel="stylesheet">
<link rel="stylesheet" href="lib/leaflet-sidebar.css" />
<link href="lib/tabulator.min.css" rel="stylesheet">
<link href="lib/simTree.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="lib/Leaflet.BigImage.min.css">
-->
<!-- Put the CSSs first and JSs next -->
<script src="lib/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="lib/jquery-ui.min.js" type="text/javascript"></script>
<script src="lib/leaflet.js"></script>
<script src="lib/leaflet-sidebar.min.js"></script>
<script src="lib/papaparse.min.js"></script>
<script src="lib/Leaflet.Control.Custom.js"></script>
<script src="lib/leaflet-providers.js"></script>
<script src="lib/tabulator.min.js" type="text/javascript"></script>
<script src="lib/leaflet-hash.min.js"></script>
<script src="lib/simTree.js"></script>
<!-- <script src="lib/Leaflet.BigImage.min.js"></script>
<script src="lib/leaflet.browser.print.min.js"></script>
<script src="https://unpkg.com/leaflet-image@latest/leaflet-image.js"></script> -->
<style>
body {
padding: 0;
margin: 0;
min-height: auto;
}
.nopad {
padding-left: 0px;
padding-right: 0px;
}
.map {
width: 100%;
height: 100%;
}
.page {
border: 1px solid gray;
width: 1000px;
height: 1450px;
}
ul.sim-tree {
padding-inline-start: 0px;
}
/* no print. from https://stackoverflow.com/questions/355313/how-do-i-hide-an-element-when-printing-a-web-page#356123 */
@media print
{
.no-print, .no-print *, .leaflet-control-zoom-in, .leaflet-control-zoom-out, .leaflet-control-attribution, #topMenu, .collapse, .leaflet-control-layers
{
display: none !important;
}
body{
width: 21cm;
height: 29.7cm;
}
.page {
page-break-after: always;
}
}
</style>
</head>
<body>
<div class="row no-print">
<div class="col-md-4">
<br><h5><b>Layers</b></h5>
<div id="tree"></div>
Location: <span id="latlong"></span>
</div>
<div class="col-md-4">
<br>
<h5><b>Customize the map</b></h5>
<p>Change page dimensions: <small>can make it big!</small><br>
Width:<input class="width" size="5" value="1000" type="number" min="100" max="100000" step="10">px,
Height:<input class="height" size="5" value="1450" type="number" min="100" max="100000" step="10">px<br>
<button onclick="changeDimensions()">Apply</button>
|
<a onclick="changeDimensions(true)" href="javascript:;">Reset</a>
| <span id="tileStatus"></span>
</p>
<!--Presets: <a>A4</a> | <a>A3</a> | <a>A2</a> | <a>A1</a>-->
<a onclick="zoomFit()" href="javascript:;">Fit map to Layers</a> |
<button onclick="window.print()" class="btn btn-primary">Print</button>
<br>
</div>
<div class="col-md-4">
<br><h5><b>Transparency</b></h5>
<!-- <p>Change color of all layers: <input class="color" value="black" size="8">
<button onclick="changeColor()">Apply</button>
<br>[Under Construction]
</p> -->
Fill Opacity: <div class="slidecontainer"><input type="range" min="1" max="100" value="50" class="slider" id="slider1"></div>
Border Opacity: <div class="slidecontainer"><input type="range" min="1" max="100" value="50" class="slider" id="slider2"></div>
Change the backround layer with the layer picker over the map.
</div>
</div>
<div class="page">
<div id="map" class="map nopad"></div>
</div>
<div id="images"></div>
<script src="config.js"></script>
<script src="js/map.js"></script>
<script src="js/print.js"></script>
</body>
</html>