commit 687d5974ea1905027315f787db551c9da8eb1257 Author: Matt Huntington Date: Fri Sep 9 17:15:54 2022 -0400 coords to map diff --git a/app.css b/app.css new file mode 100644 index 0000000..e69de29 diff --git a/app.js b/app.js new file mode 100644 index 0000000..1d80c77 --- /dev/null +++ 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) +}); diff --git a/index.html b/index.html new file mode 100644 index 0000000..57d7f71 --- /dev/null +++ b/index.html @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + +