forked from answerquest/answerquest.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprint.html
182 lines (154 loc) · 7.83 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
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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html>
<head>
<title>Large Map Printer / Exporter</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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-better-filelayer@0.1.1/dist/leaflet.betterfilelayer.css" crossorigin="anonymous" referrerpolicy="no-referrer">
<!-- Put the CSSs first and JSs next -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script type="application/javascript" src="https://unpkg.com/leaflet-better-filelayer@0.1.1/dist/leaflet.betterfilelayer.min.js" crossorigin="anonymous"></script>
<script src="lib/leaflet-image.js"></script>
<style>
body {
padding: 0;
margin: 0;
min-height: auto;
}
.leaflet-container {
background: white;
}
.nopad {
padding-left: 0px;
padding-right: 0px;
}
.map {
width: 100%;
height: 100%;
}
.page {
border: 1px solid gray;
width: 1000px;
height: 1450px;
padding: 0px;
}
.bi-heart-fill {
color: darkred;
}
/* 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, #topMenu, .collapse, .leaflet-control-layers, .leaflet-control-better-filelayer
{
display: none !important;
}
body{
width: 21cm;
height: 29.7cm;
}
.page {
page-break-after: always;
}
}
.narrow90 {
width: 90px;
}
.preset_select {
height: 2.5rem;
}
.narrow50 {
width: 50px;
}
</style>
</head>
<body>
<div class="container-fluid no-print mt-5">
<div class="row">
<div class="col-md-4">
<h1>Large Map Printer / Exporter</h1>
<div class="card card-body mb-4">
<ul>
<li>Drag-drop a shape file (preferably .geojson format) onto this map to display its border.</li>
<li>You can drop multiple files one by one also.</li>
<li>Use the sliders on right to adjust the shape and map background.</li>
<li>Press Print button when ready. It'll only include the map block, all these texts will be hidden away.</li>
<li>Or, you can use the Save button to download the map as an image.</li>
</ul>
</div>
<p>
<button onclick="save_image('png')" class="btn btn-outline-success">Save Map as .png</button>
<button onclick="save_image('webp')" class="btn btn-outline-success">Save Map as .webp</button>
</p><p>
<span id="save_image_status">(.webp is a new image standard giving smaller size for same quality)</span>
</p>
</div>
<div class="col-md-5">
<h3>Print page size</h3>
<p class="mb-2">Change page dimensions: <small>can make it big!</small></p>
<p class="mb-2">Width:<input class="width narrow90" size="5" value="1000" type="number" min="100" max="100000" step="10"> px,
Height:<input class="height narrow90" size="5" value="1450" type="number" min="100" max="100000" step="10"> px
<button onclick="changeDimensions()" class="btn btn-outline-success">Apply</button>
</p>
<p><select class="preset_select" id="presets" onchange="changeDimensions(reset=false, preset=true)">
<option value="">Preset</option>
<option value="A4_300">A4 300dpi (2480x3508)</option>
<option value="A4_150">A4 150dpi (1240x1754)</option>
<option value="A3_300">A3 300dpi (3508x4961)</option>
<option value="A3_150">A3 150dpi (1754x2480)</option>
<option value="A2_300">A2 300dpi (4960x7016)</option>
<option value="A2_150">A2 150dpi (2480x3508)</option>
<option value="A1_300">A1 300dpi (7016x9933)</option>
<option value="A1_150">A1 150dpi (3508x4967)</option>
<option value="A0_300">A0 300dpi (9933x14043)</option>
<option value="A0_150">A0 150dpi (4967x7022)</option>
</select>
<button onclick="flip()" class="btn btn-outline-info">Flip</button>
<button onclick="changeDimensions(reset=true)" class="btn btn-outline-danger">Reset</button>
</p>
<p>Page status: <span id="tileStatus"></span></p>
<p><b>Note:</b> The presets and css scripting for it are approximations and best-effort attempts. <br>
When you go for the print dialogue and choose your page size etc, there will probably be some mis-match.<br>
Please see the print-preview, then come back here and tweak the width and heigth to get it right. </p>
<p><button onclick="zoomFit()" class="btn btn-warning">Fit map to shape</button>
<button onclick="window.print()" class="btn btn-primary">Print</button></p>
</div>
<div class="col-md-3">
<h3>Shape</h3>
<p>Color: <input id="color" value="black" size="4">
Border size: <input id="weight" value="4" class="narrow50" type="number">
<button onclick="changeColor()" class="btn btn-outline-success">Apply</button>
</p>
<h3>Transparency</h3>
Border Opacity: <div class="slidecontainer"><input type="range" min="0" max="100" value="100" class="slider" id="slider2"></div>
Fill Opacity: <div class="slidecontainer"><input type="range" min="0" max="100" value="0" class="slider" id="slider1"></div>
Map Opacity: <div class="slidecontainer"><input type="range" min="1" max="100" value="100" class="slider" id="slider3"></div>
Change the backround layer with the layer picker over the map.
</div>
</div>
</div>
<div class="page">
<div id="map" class="map nopad"></div>
</div>
<div class="container no-print">
<br><br>
<p>Created with <i class="bi bi-heart-fill"></i> in India, by <a href="https://nikhilvj.co.in">Nikhil VJ</a> </p>
<p>Disclaimer: This map is NOT made for displaying India's political boundaries, it's made for making large full-size printouts of smaller regions inside India or elsewhere.<br>
The India boundary shown is obtained from <a href="https://onlinemaps.surveyofindia.gov.in/Home.aspx">Survey of India website</a>, is kept as fixed on this map to show official India boundary as per GOI and overriding other community-edited Openstreetmap data over which we have no control. If you're looking at border regions, kindly focus on India boundary only and don't pay any attention to others. 🙏 </p>
<p>This page is released open-source under India Geo Spatial Data Guidelines, <a href="https://onlinemaps.surveyofindia.gov.in/GeospatialGuidelines.aspx">click here to know more.</a></p>
<div id="images"></div>
</div>
<script src="js/India_Outline_Map.js"></script>
<script src="js/print.js"></script>
</body>
</html>