User Input Coordinate

forked from diggetybo's block: User Input Coordinate

<html><head><meta charset="utf-8">
<title>User Input County Selection</title>
<style>
.button {
	font-family: Play;
	color: #ffffff;
	font-size: 16px;
  text-align: center;
  display: inline-block;
  -webkit-user-select: none;
  width: 3.2%;
	background: #303030;
	padding: 10px 20px 10px 20px;
}
.button:hover {
	background: #4c4d4d;
  cursor:default;
}
</style>

</head><body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="d3-polygon.v1.min.js"></script>
<script src="topojson.v1.min.js"></script>
<script>

var width = 960,
    height = 500;

var margins = { left: 0, top: 0, right: 0, bottom: 0 };

var projection = d3.geo.albersUsa()
    .scale(1070)
    .translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
		.attr('class','main_svg')
    .attr("height", height+margins.top);

var g = svg.append("g");

var countiesG = g.append("g")
    .attr("id", "counties");

d3.json("us_ap.json", function(error, us) {
var mapData = topojson.feature(us, us.objects.counties).features;
  
countiesG
   .selectAll("path")
     .data(mapData)
   .enter().append("path")
 .attr("d", path)
 .attr("stroke-width",'.5px')
 .attr('stroke','#fff')
 .attr('fill','#aaa');

var lat = d3.select("#latValue").node();

var long = d3.select("#lonValue").node();

var search = d3.select('#button_search');
 search.on('click', function() {
   console.log(long.value)

var containing_county = mapData.filter(function(polygon) {
     if(polygon.geometry !== null) {
       return d3.polygonContains(polygon.geometry.coordinates[0], [long.value, lat.value]);
     }
   });
   console.log(containing_county)
 });
});

</script>
  <p>
    <label 	for="latValue"
            style="display: inline-block;width:240px;text-align:right;font-size:18px;font-family:Play">
            Latitude:<span id="latValue-value"></span>
    </label>
    <input type="number"min="-360"max="360"step="1"value="0" id="latValue">
    <label 	for="lonValue"
            style="display: inline-block;width:240px;text-align:right;font-size:18px;font-family:Play">
            Longitude:<span id="lonValue-value"></span>
    </label>
    <input type="number"min="-360"max="360"step="1"value="0" id="lonValue">
  </p>
  <div id="button_search" class="button"> Search</div>
</body>
</html>

https://d3js.org/d3.v3.min.js