Merge pull request #1 from DanielJWood/gh-pages

change default visuals, add textarea with parameters
DanielJWood · Aug 23, 2024 · 3b8f408 · 3b8f408
2 parents 96ad562 + e2ee335
commit 3b8f408
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -49,16 +49,22 @@
 	</head>
 	<body>
 		<div id="container">
+			<div id="intro">
+				Hello! 👋 This is a fork of the wonderful <a href="https://projectionwizard.org/#">Projection Wizard</a>. I have modified it slightly, and added a section at the bottom where output parameters can easily be copied for use in a vector-clipping tool I am developing.<br>
+				<br>
+				Cheers!<br>
+				Dan from NPR
+			</div>
 			<div id="inputUIarea">
 				<img id="settings" src="figures/opts.png" height="22" align="left" title="Customize">
 				<div id="options_dialog" class="dialogtext" title="Projection Wizard Options">
 					<fieldset>
 						<legend><h4>&nbsp;Angular units format&nbsp;</h4></legend>
 						<form id="ang_format">
 							<div id="ang_ops">
-								<input type="radio" name="ang_format" id="DMS" value="DMS" checked="checked" />
+								<input type="radio" name="ang_format" id="DMS" value="DMS"/>
 								<label for="DMS">	44&deg; 30' 15'' W&nbsp;&nbsp;&nbsp;&nbsp;</label>
-								<input type="radio" name="ang_format" id="DD" value="DD"/>
+								<input type="radio" name="ang_format" id="DD" value="DD" checked="checked"/>
 								<label for="DD">	–44.754305&deg;<br></label>
 							</div>
 						</form>
@@ -88,7 +94,7 @@
 					<fieldset>
 						<legend><h4>&nbsp;Preview map&nbsp;</h4></legend>
 						<div id="check_ops">
-							<input type="checkbox" id="showEextent" name="showEextent" />
+							<input type="checkbox" id="showEextent" name="showEextent" checked="checked" />
 							<label for="showEextent">Show geographic extent</label>
 						</div>
 						<div>
@@ -281,6 +287,7 @@ <h4 class="inputSection">Geographic Extent</h4>
 				<div id="map"></div>
 			</div>
 			<div id="output">
+
 				<div id="printout"></div>
 				<div id="result" class="results"></div>
 				<div id="previewMap">
@@ -290,6 +297,12 @@ <h4 class="inputSection">Geographic Extent</h4>
 				<div id="PROJ" class="dialogtext" title="PROJ string"></div>
 				<div id="WKT" class="dialogtext" title="Well-Known Text"></div>
 			</div>
+			<div id="output-for-clipping">
+				<h1>Vector clipping parameters</h1>
+				<p>Copy the below into your variables.txt file</p>
+				<textarea id='textAreaParams'>
+				</textarea>
+			</div>
 		</div>
 	</body>
 </html>
diff --git a/page.css b/page.css
@@ -155,10 +155,15 @@ legend {
 	border: 1px solid #600;
 }
 
+
+#intro {
+margin-bottom: 20px;
+}
+
 #output {
 	width: 100%;
 	float: left;
-	margin-top: 10px;
+	margin-top: 30px;
 }
 
 .outputText {
@@ -323,3 +328,20 @@ canvas {
 	color: steelblue;
 	font-weight: bold;
 }
+
+#output-for-clipping {	
+    width: 100%;
+
+    textarea {
+    	padding: 16px 8px;
+	    background: #ccc;
+	    font-family: monospace;
+	    display: block;
+	    border: none;
+	    width: 100%;
+	    max-width: 800px;	
+	    height: 100px;
+    }
+}
+
+
diff --git a/previewMap.js b/previewMap.js
@@ -11,6 +11,8 @@ var world110m, world50m;
 
 /***MAP DRAW FUNCTION FOR SMALL-SCALE***/
 function addWorldMapPreview(center, projection, currentlyDragging) {
+	var textAreaParams = document.getElementById("textAreaParams");
+	textAreaParams.innerHTML = "";
 	var activeDistortion = $('input[name=distortion]:checked').val();
 
 	// Updates the active projection
@@ -90,6 +92,7 @@ function addMapPreview(center, currentlyDragging) {
 
 	//adding class to split text and map preview
 	$("#result").addClass("results");
+	addClippingParams();
 }
 
 /* Setting a new projection with D3 */
@@ -592,3 +595,21 @@ function continueDrawingCanvasMap(world110m, world50m, lat0, lon0, projectionStr
 		}
 	}
 }
+
+function addClippingParams() {
+
+    var lonmin = document.getElementById('lonmin').value;
+    var latmin = document.getElementById('latmin').value;
+    var lonmax = document.getElementById('lonmax').value;
+    var latmax = document.getElementById('latmax').value;
+    var coordinatesArray = `${lonmin}, ${latmin}, ${lonmax}, ${latmax}`;
+
+    var proj = document.getElementsByClassName("linkPROJ4")[0].getAttribute("onclick");
+    var match = proj.match(/"([^"]+)"/);
+    match = match ? match[1] : null;
+
+    var text = `PROJECTION = "${match}"\nRAWBBOX = ${JSON.stringify(coordinatesArray)}`;
+
+	var textAreaParams = document.getElementById("textAreaParams");
+	textAreaParams.innerHTML = text;
+}