Added experimental custom map boundaries

Author: StrawberryMaster

index.html

@@ -249,6 +249,20 @@ <h3>Stage</h3>
                             Upload custom map:</label>
                         <input type="file" id="custom-map-upload" accept="image/*">
                     </div>
+                    <div>
+                        <input type="checkbox" id="enable-custom-bounds" /><label for="enable-custom-bounds"
+                            title="[EXPERIMENTAL] Define custom map boundaries instead of auto-cropping.">Use custom map boundaries</label>
+                    </div>
+                    <div id="custom-bounds-inputs" class="hidden">
+                        <div>
+                            <label for="min-lat">Min lat:</label><input type="number" id="min-lat" step="any" min="-90" max="90">
+                            <label for="max-lat">Max lat:</label><input type="number" id="max-lat" step="any" min="-90" max="90">
+                        </div>
+                        <div>
+                            <label for="min-lng">Min lng:</label><input type="number" id="min-lng" step="any" min="-180" max="180">
+                            <label for="max-lng">Max lng:</label><input type="number" id="max-lng" step="any" min="-180" max="180">
+                        </div>
+                    </div>
                 </fieldset>
                 <fieldset id="custom-scale-section">
                     <legend>Scale settings</legend>

static/css/style.css

@@ -494,6 +494,35 @@ ion-icon+span {
 	margin-right: 0.4em;
 }
 
+#custom-bounds-inputs {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	margin-top: 0.5rem;
+	padding: 0.5rem;
+	background-color: rgba(0, 0, 0, 0.05);
+	border-radius: 0.25rem;
+}
+
+#custom-bounds-inputs>div {
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+}
+
+#custom-bounds-inputs label {
+	font-size: 0.9em;
+	flex-shrink: 0;
+}
+
+#custom-bounds-inputs input[type="number"] {
+	width: 100%;
+	padding: 5px;
+	border: 1px solid #ccc;
+	border-radius: .25rem;
+	font-family: 'Roboto Mono', monospace;
+}
+
 #options-container fieldset label {
 	padding-left: 0.25em;
 	padding-right: 0.1em;

static/js/generate.js

@@ -251,6 +251,14 @@ document.addEventListener("DOMContentLoaded", () => {
         updateScaleSelector();
         showScaleEditor(name);
     });
+
+    const customBoundsCheckbox = document.getElementById("enable-custom-bounds");
+    const customBoundsInputs = document.getElementById("custom-bounds-inputs");
+    if (customBoundsCheckbox && customBoundsInputs) {
+        customBoundsCheckbox.addEventListener("change", (e) => {
+            customBoundsInputs.classList.toggle("hidden", !e.target.checked);
+        });
+    }
 });
 
 class MapManager {
@@ -633,6 +641,8 @@ function createMap(data, accessible) {
     const imageContainer = elements.imageContainer;
     const smallerDotsCheckbox = document.getElementById("smaller-dots");
 
+    const useCustomBounds = document.getElementById("enable-custom-bounds")?.checked;
+
     const computeAceCheckbox = document.getElementById("compute-ace");
     const shouldComputeAce = computeAceCheckbox ? computeAceCheckbox.checked : true;
     const acePanel = document.getElementById("ace-results");
@@ -713,45 +723,66 @@ function createMap(data, accessible) {
                 westernmostLng -= 360; // adjust back if westernmost was shifted
             }
 
-            const centerLng = normalizeLongitude((easternmostLng + westernmostLng) / 2);
-            const centerX = (centerLng + 180) / 360 * FULL_WIDTH;
-
-            const halfLngDist = Math.max(
-                Math.abs(normalizeLongitude(easternmostLng - centerLng)),
-                Math.abs(normalizeLongitude(westernmostLng - centerLng))
-            ) * FULL_WIDTH / 360;
-            const paddingLng = (FULL_WIDTH * 5) / 360;
-            let left = centerX - halfLngDist - paddingLng;
-            let right = centerX + halfLngDist + paddingLng;
-
-            let top = minLat - (FULL_HEIGHT * 5) / 180;
-            let bottom = maxLat + (FULL_HEIGHT * 5) / 180;
-
-            let width = right - left;
-            let height = bottom - top;
-
-            const minWidth = (FULL_HEIGHT * 45) / 180;
-            if (width < minWidth) {
-                const padding = (minWidth - width) / 2;
-                left -= padding;
-                right += padding;
-                width = right - left;
-            }
+            let left, right, top, bottom;
+
+            if (useCustomBounds) {
+                const minLatInput = parseFloat(document.getElementById("min-lat").value);
+                const maxLatInput = parseFloat(document.getElementById("max-lat").value);
+                const minLngInput = parseFloat(document.getElementById("min-lng").value);
+                const maxLngInput = parseFloat(document.getElementById("max-lng").value);
 
-            if (width < height) {
-                const padding = (height - width) / 2;
-                left -= padding;
-                right += padding;
-                width = right - left;
+                if (!isNaN(minLatInput) && !isNaN(maxLatInput) && !isNaN(minLngInput) && !isNaN(maxLngInput)) {
+                    top = FULL_HEIGHT / 2 - (maxLatInput * FULL_HEIGHT / 180);
+                    bottom = FULL_HEIGHT / 2 - (minLatInput * FULL_HEIGHT / 180);
+                    left = (minLngInput + 180) / 360 * FULL_WIDTH;
+                    right = (maxLngInput + 180) / 360 * FULL_WIDTH;
+                }
             }
+            
+            if (left === undefined) { // fallback to auto-cropping if custom bounds are not set or invalid
+                const centerLng = normalizeLongitude((easternmostLng + westernmostLng) / 2);
+                const centerX = (centerLng + 180) / 360 * FULL_WIDTH;
+
+                const halfLngDist = Math.max(
+                    Math.abs(normalizeLongitude(easternmostLng - centerLng)),
+                    Math.abs(normalizeLongitude(westernmostLng - centerLng))
+                ) * FULL_WIDTH / 360;
+                const paddingLng = (FULL_WIDTH * 5) / 360;
+                left = centerX - halfLngDist - paddingLng;
+                right = centerX + halfLngDist + paddingLng;
+
+                top = minLat - (FULL_HEIGHT * 5) / 180;
+                bottom = maxLat + (FULL_HEIGHT * 5) / 180;
+
+                let width = right - left;
+                let height = bottom - top;
+
+                const minWidth = (FULL_HEIGHT * 45) / 180;
+                if (width < minWidth) {
+                    const padding = (minWidth - width) / 2;
+                    left -= padding;
+                    right += padding;
+                    width = right - left;
+                }
+
+                if (width < height) {
+                    const padding = (height - width) / 2;
+                    left -= padding;
+                    right += padding;
+                    width = right - left;
+                }
 
-            if (height < width / 1.618033988749894) {
-                const padding = (width / 1.618033988749894 - height) / 2;
-                top -= padding;
-                bottom += padding;
-                height = bottom - top;
+                if (height < width / 1.618033988749894) {
+                    const padding = (width / 1.618033988749894 - height) / 2;
+                    top -= padding;
+                    bottom += padding;
+                    height = bottom - top;
+                }
             }
 
+            const width = right - left;
+            const height = bottom - top;
+
             canvas.width = width;
             canvas.height = height;