Skip to content

Commit 120f3e5

Browse files
answerquestanswerquest
committed
print update
1 parent 6d399ed commit 120f3e5

File tree

2 files changed

+115
-45
lines changed

2 files changed

+115
-45
lines changed

Diff for: ‎js/print.js

+72-6
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ const start_zoom = 15;
77
const max_zoom = 21;
88
var shapeLayer = L.geoJson(null);
99

10-
10+
const ORIG_W = 1000;
11+
const ORIG_H = 1450;
1112
// ######################################
1213
// LEAFLET MAP
1314

@@ -124,16 +125,70 @@ var bfl_options = {
124125
L.Control.betterFileLayer(bfl_options).addTo(map);
125126

126127
// ###############################################33
127-
function changeDimensions(reset=false) {
128-
129-
var w = parseInt($(`.width`).val());
130-
var h = parseInt($(`.height`).val());
131-
if(reset) {
128+
function changeDimensions(reset=false, preset=false) {
129+
console.log("changing dimensions");
130+
// console.log("chosen preset: " + $('#presets').val(), reset, preset);
131+
var w;
132+
var h;
133+
if(reset) {
134+
console.log("resetting");
135+
$(`.width`).val(ORIG_W);
136+
$(`.height`).val(ORIG_H);
132137
w = ORIG_W;
133138
h = ORIG_H;
139+
}
140+
else if (preset) {
141+
switch ($('#presets').val()) {
142+
case "":
143+
return;
144+
case "A4_300":
145+
w = 2480;
146+
h = 3508;
147+
break;
148+
case "A4_150":
149+
w = 1240;
150+
h = 1754;
151+
break;
152+
case "A3_300":
153+
w = 4960;
154+
h = 7016;
155+
break;
156+
case "A3_150":
157+
w = 1754;
158+
h = 2480;
159+
break;
160+
case "A2_300":
161+
w = 4960;
162+
h = 7016;
163+
break;
164+
case "A2_150":
165+
w = 2480;
166+
h = 3508;
167+
break;
168+
case "A1_300":
169+
w = 7016;
170+
h = 9933;
171+
break;
172+
case "A1_150":
173+
w = 3508;
174+
h = 4967;
175+
break;
176+
case "A0_300":
177+
w = 9933;
178+
h = 14043;
179+
break;
180+
case "A0_150":
181+
w = 4967;
182+
h = 7022;
183+
break;
184+
}
134185
$(`.width`).val(w);
135186
$(`.height`).val(h);
187+
} else {
188+
w = parseInt($(`.width`).val());
189+
h = parseInt($(`.height`).val());
136190
}
191+
137192
$(`.page`).css('width',`${w}px`);
138193
$(`.page`).css('height',`${h}px`);
139194

@@ -180,4 +235,15 @@ document.getElementById("slider3").oninput = function() {
180235
CartoDB_Positron.setOpacity(this.value/100);
181236
}
182237

238+
}
239+
240+
function flip(){
241+
let w = parseInt($(`.width`).val());
242+
let h = parseInt($(`.height`).val());
243+
let temp = w;
244+
w = h;
245+
h = temp;
246+
$(`.width`).val(w);
247+
$(`.height`).val(h);
248+
changeDimensions();
183249
}

Diff for: ‎print.html

+43-39
Original file line numberDiff line numberDiff line change
@@ -6,45 +6,20 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
77

88
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
9-
<!-- <link rel="stylesheet" href="lib/leaflet.css" /> -->
10-
<!-- <link href="lib/jquery-ui.css" rel="stylesheet"> -->
11-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
12-
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
9+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
1310
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
1411
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
1512
<link rel="stylesheet" href="https://unpkg.com/leaflet-better-filelayer@0.1.1/dist/leaflet.betterfilelayer.css" crossorigin="anonymous" referrerpolicy="no-referrer">
1613

17-
<!-- <link rel="stylesheet" href="lib/leaflet-sidebar.css" /> -->
18-
<!-- <link href="lib/tabulator.min.css" rel="stylesheet"> -->
19-
<!-- <link href="lib/simTree.css" rel="stylesheet"> -->
20-
<!-- <link rel="stylesheet" href="lib/Leaflet.BigImage.min.css">
21-
-->
2214
<!-- Put the CSSs first and JSs next -->
2315

24-
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
25-
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
26-
crossorigin="anonymous"></script>
27-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"
28-
integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
29-
crossorigin="anonymous"></script>
30-
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
31-
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
16+
<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>
17+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
18+
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
3219
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
3320
<script type="application/javascript" src="https://unpkg.com/leaflet-better-filelayer@0.1.1/dist/leaflet.betterfilelayer.min.js" crossorigin="anonymous"></script>
3421

35-
<!-- <script src="lib/jquery-3.3.1.min.js" type="text/javascript"></script> -->
36-
<!-- <script src="lib/jquery-ui.min.js" type="text/javascript"></script> -->
37-
<!-- <script src="lib/leaflet.js"></script> -->
38-
<!-- <script src="lib/leaflet-sidebar.min.js"></script> -->
39-
<!-- <script src="lib/papaparse.min.js"></script> -->
40-
<!-- <script src="lib/Leaflet.Control.Custom.js"></script> -->
4122
<script src="lib/leaflet-providers.js"></script>
42-
<!-- <script src="lib/tabulator.min.js" type="text/javascript"></script> -->
43-
<!-- <script src="lib/leaflet-hash.min.js"></script> -->
44-
<!-- <script src="lib/simTree.js"></script> -->
45-
<!-- <script src="lib/Leaflet.BigImage.min.js"></script>
46-
<script src="lib/leaflet.browser.print.min.js"></script>
47-
<script src="https://unpkg.com/leaflet-image@latest/leaflet-image.js"></script> -->
4823

4924
<style>
5025
body {
@@ -93,44 +68,73 @@
9368
}
9469
}
9570

71+
.narrow90 {
72+
width: 90px;
73+
}
9674

75+
.preset_select {
76+
height: 2.5rem;
77+
}
9778
</style>
9879
</head>
9980
<body>
10081
<div class="container-fluid no-print">
10182
<div class="row">
10283
<div class="col-md-4">
10384
<h3>Map Printer</h3>
104-
<p class="mb-0">Instructions</p>
85+
<div class="card card-body mb-4">
10586
<ul>
10687
<li>Drag-drop a shape file (preferably .geojson format) onto this map to display its border.</li>
10788
<li>You can drop multiple files one by one also.</li>
10889
<li>Use the sliders on right to adjust the shape and map background.</li>
10990
<li>Press Print button when ready. It'll only include the map block, all these texts will be hidden away.</li>
11091
</ul>
92+
</div>
11193

11294
<p><button onclick="zoomFit()" class="btn btn-warning">Fit map to Layers</button>
11395
&nbsp;&nbsp;&nbsp;&nbsp;
11496
<button onclick="window.print()" class="btn btn-primary">Print</button></p>
11597

11698

11799
</div>
118-
<div class="col-md-4">
100+
<div class="col-md-5">
119101

120102
<h3>Customize the map</h3>
121-
<p>Change page dimensions: <small>can make it big!</small><br>
122-
Width:<input class="width" size="5" value="1000" type="number" min="100" max="100000" step="10">px,
123-
Height:<input class="height" size="5" value="1450" type="number" min="100" max="100000" step="10">px<br>
124-
<button onclick="changeDimensions()">Apply</button>
125-
&nbsp; | &nbsp;
126-
<a onclick="changeDimensions(true)" href="javascript:;">Reset</a>
127-
| &nbsp; <span id="tileStatus"></span>
103+
<p class="mb-2">Change page dimensions: <small>can make it big!</small></p>
104+
<p class="mb-2">Width:<input class="width narrow90" size="5" value="1000" type="number" min="100" max="100000" step="10"> px,
105+
Height:<input class="height narrow90" size="5" value="1450" type="number" min="100" max="100000" step="10"> px
106+
&nbsp;&nbsp;<button onclick="changeDimensions()" class="btn btn-outline-success">Apply</button>
107+
</p>
108+
109+
<p><select class="preset_select" id="presets" onchange="changeDimensions(reset=false, preset=true)">
110+
<option value="">Preset</option>
111+
<option value="A4_300">A4 300dpi (2480x3508)</option>
112+
<option value="A4_150">A4 150dpi (1240x1754)</option>
113+
114+
<option value="A3_300">A3 300dpi (3508x4961)</option>
115+
<option value="A3_150">A3 150dpi (1754x2480)</option>
116+
117+
<option value="A2_300">A2 300dpi (4960x7016)</option>
118+
<option value="A2_150">A2 150dpi (2480x3508)</option>
119+
120+
<option value="A1_300">A1 300dpi (7016x9933)</option>
121+
<option value="A1_150">A1 150dpi (3508x4967)</option>
122+
123+
<option value="A0_300">A0 300dpi (9933x14043)</option>
124+
<option value="A0_150">A0 150dpi (4967x7022)</option>
125+
126+
</select>
127+
&nbsp;&nbsp;&nbsp;&nbsp;
128+
<button onclick="flip()" class="btn btn-outline-info">Flip</button>
129+
&nbsp;&nbsp;&nbsp;&nbsp;
130+
<button onclick="changeDimensions(reset=true)" class="btn btn-outline-danger">Reset</button>
128131
</p>
132+
<p>Page status: <span id="tileStatus"></span></p>
129133
<!--Presets: <a>A4</a> | <a>A3</a> | <a>A2</a> | <a>A1</a>-->
130134

131135
<br>
132136
</div>
133-
<div class="col-md-4">
137+
<div class="col-md-3">
134138
<h3>Transparency</h3>
135139
<!-- <p>Change color of all layers: <input class="color" value="black" size="8">
136140
<button onclick="changeColor()">Apply</button>

0 commit comments

Comments
 (0)