coords to map

3 years ago · 687d5974ea
commit 687d5974ea
3 changed files with 73 additions and 0 deletions
--- a/app.css
+++ b/app.css
--- a/app.js
+++ b/app.js
@ -0,0 +1,48 @@
+var width = 960;
+var height = 490;
+
+d3.select('svg')
+    .attr('width', width)
+    .attr('height', height);
+
+var worldProjection = d3.geoEquirectangular();
+
+d3.select('svg').selectAll('path')
+    .data(map_json.features)
+    .enter()
+    .append('path')
+    .attr('fill', '#099');
+
+var dAttributeFunction = d3.geoPath()
+    .projection(worldProjection);
+
+d3.selectAll('path').attr('d', dAttributeFunction);
+
+d3.selectAll('svg').on('click', function(datum){
+	console.log(worldProjection.invert(d3.mouse(this)));
+});
+
+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]);
+	const x1 = location1[0];
+	const y1 = location1[1];
+	console.log(x1, y1);
+
+	const lat2 = d3.select('input:nth-child(4)').node().value
+	const lng2 = d3.select('input:nth-child(5)').node().value
+	const location2 = worldProjection([lat2, lng2]);
+	const x2 = location2[0];
+	const y2 = location2[1];
+	console.log(x2, y2);
+
+	d3.select('svg').append('rect')
+		.attr('fill', '#000')
+		.attr('x', x1)
+		.attr('y', y1)
+		.attr('width', x2-x1)
+		.attr('height', y2-y1) 
+});
--- a/index.html
+++ b/index.html
@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+    <meta charset="utf-8">
+    <title></title>
+    <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
+    <!--  this loads the data of the various country boundires -->
+    <script src="https://cdn.rawgit.com/mahuntington/mapping-demo/master/map_data3.js" charset="utf-8"></script>
+</head>
+<body>
+    <svg></svg>
+	<form>
+		Top Left:
+		<input type="text" placeholder="latitude"/>
+		<input type="text" placeholder="longitude"/>
+		<br/>
+		Bottom Right:
+		<input type="text" placeholder="latitude"/>
+		<input type="text" placeholder="longitude"/>
+
+		<input type="submit"/>
+	</form>
+    <script src="app.js" charset="utf-8"></script>
+</body>
+</html>