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) 
});