print update

answerquest · answerquest · commit 947465282ee8 · 2024-02-22T11:22:34.000+05:30
diff --git a/js/print.js b/js/print.js
@@ -125,11 +125,16 @@ var bfl_options = {
 L.Control.betterFileLayer(bfl_options).addTo(map);
 
 map.on("bfl:layerloaded", (ev) => {
-	console.log("Your file was read successfully!! Event: ", ev);
+	// console.log("Your file was read successfully!! Event: ", ev);
+	let color = $(`#color`).val();
+	let weight = parseFloat($(`#weight`).val());
 	shapeLayer.eachLayer(r => {
 		r.setStyle({ 
 			opacity: $('#slider2').val()/100,
 			fillOpacity: $('#slider1').val()/100,
+			color: color, 
+			fillColor: color, 
+			weight:weight
 		});
 	});
 });
@@ -209,10 +214,10 @@ function changeDimensions(reset=false, preset=false) {
 }
 
 function changeColor() {
-	var color = $(`#color`).val();
-
+	let color = $(`#color`).val();
+	let weight = parseFloat($(`#weight`).val());
 	shapeLayer.eachLayer(r => {
-		r.setStyle({ color: color, fillColor: color });
+		r.setStyle({ color: color, fillColor: color, weight:weight });
 	});
 
 }
diff --git a/print.html b/print.html
@@ -75,13 +75,17 @@
 .preset_select {
     height: 2.5rem;
 }
+
+.narrow50 {
+    width: 50px;
+}
 </style>
 </head>
 <body>
-<div class="container-fluid no-print">
+<div class="container-fluid no-print mt-5">
 <div class="row">
 <div class="col-md-4">
-    <h3>Map Printer</h3>
+    <h1>Map Printer</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>
@@ -99,7 +103,7 @@ <h3>Map Printer</h3>
 </div>
 <div class="col-md-5">
     
-    <h3>Customize the map</h3>
+    <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
@@ -131,9 +135,10 @@ <h3>Customize the map</h3>
     </p>
     <p>Page status: <span id="tileStatus"></span></p>
     
-    <p>Change color: <input id="color" value="black" size="8">
-        &nbsp;&nbsp;&nbsp;&nbsp; 
-    <button onclick="changeColor()" class="btn btn-info">Apply</button>
+    <h3>Shape</h3>
+    <p>Color: <input id="color" value="black" size="4">
+    &nbsp;Border size: <input id="weight" value="4" class="narrow50" type="number">
+    &nbsp;<button onclick="changeColor()" class="btn btn-outline-success">Apply</button>
     </p>
 
     <br>
