D3 Examples - User Input Coordinate

xxxxxxxxxx
 
<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>
​
    