From a8fd9b91452c607db1fcc7b5dfe9983fe836a86a Mon Sep 17 00:00:00 2001
From: Matt Huntington <matt.huntington@gmail.com>
Date: Fri, 9 Sep 2022 17:34:57 -0400
Subject: [PATCH] print coordinates to page from drag action

---
 app.js     | 18 +++++++++++++++++-
 index.html | 14 ++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/app.js b/app.js
index 1d80c77..e0969ac 100644
--- a/app.js
+++ b/app.js
@@ -22,9 +22,25 @@ d3.selectAll('svg').on('click', function(datum){
 	console.log(worldProjection.invert(d3.mouse(this)));
 });
 
+var dragBehavior = d3.drag() //create a drag behavior
+	.on('start', function(){
+		d3.select('table tr:nth-child(2) td:first-child')
+			.html(worldProjection.invert(d3.mouse(this))[0])
+		d3.select('table tr:nth-child(2) td:last-child')
+			.html(worldProjection.invert(d3.mouse(this))[1])
+	})
+	.on('drag', function(){
+		d3.select('table tr:nth-child(3) td:first-child')
+			.html(worldProjection.invert(d3.mouse(this))[0])
+		d3.select('table tr:nth-child(3) td:last-child')
+			.html(worldProjection.invert(d3.mouse(this))[1])
+	})
+
+d3.select('svg').call(dragBehavior);
+
 d3.select('form').on('submit', function(){
 	d3.event.preventDefault();
-	
+
 	const lat1 = d3.select('input:first-child').node().value
 	const lng1 = d3.select('input:nth-child(2)').node().value
 	const location1 = worldProjection([lat1, lng1]);
diff --git a/index.html b/index.html
index 57d7f71..e01f6cc 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,20 @@
 
 		<input type="submit"/>
 	</form>
+	<table border="1">
+		<tr>
+			<th>lat</th>
+			<th>lng</th>
+		</tr>
+		<tr>
+			<td></td>
+			<td></td>
+		</tr>
+		<tr>
+			<td></td>
+			<td></td>
+		</tr>
+	</table>
     <script src="app.js" charset="utf-8"></script>
 </body>
 </html>