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>