Wherewolf.js - geocoding demo by veltman

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css" />
<body>
  <div class="container">
    <h2>Find your Congressional District</h2>
    <div id="form"><form><input type="text" id="address" placeholder="Enter your address"/><input type="submit" value="Go!"/></form></div>
    <div id="map"></div>
    <div id="district"></div>
  </div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="//veltman.github.io/wherewolf/wherewolf.js"></script>
<script>

   var options = {center:{lat:39.8,lng:-98.5},zoom: 3},
       map = new google.maps.Map(document.getElementById("map"),options),
       marker = new google.maps.Marker(),
       geocoder = new google.maps.Geocoder(),
       mapFeature;

  map.data.setStyle({
    fillColor: "#e51133",
    strokeColor: "#e51133"
  });

  //Summon a wherewolf
  var ww = Wherewolf();

  //Get the district data
  $.getJSON("congressional-districts.json",function(data){

    //Use .add() to add congressional districts
    ww.add("house",data);

    //When they submit an address...
    $("form").on("submit",function(){

      //Geocode with Google
      geocoder.geocode({ address: $("#address").val() },function(results, status) {

        var houseDistrict,lngLat;

        //For each geocoder result
        for (var i = 0; i < results.length; i++) {

          lngLat = {
            lng: results[0].geometry.location.lng(),
            lat: results[0].geometry.location.lat()
          };

          //Check it with wherewolf
          //Get just the result for the "house" layer
          //Return the whole matching feature,
          //not just its properties
          houseDistrict = ww.find(lngLat,{
            layer:"house",
            wholeFeature: true
          });

          //If it's a match, stop
          if (houseDistrict) {
            return showDistrict(lngLat,houseDistrict);
          }

        }

        //No results
        return showDistrict();

      });

      return false;

    });

  });

  function showDistrict(lngLat,district) {

    //Center the map on their location, or the default
    map.setCenter(lngLat || options.center);
    
    //Zoom the map in if they have a location,
    //Otherwise zoom out to US
    map.setZoom(lngLat ? 8 : options.zoom);

    //If it's not the first search, clear any old district
    map.data.forEach(function(f){
      map.data.remove(f);
    });

    //If there's a match, display it
    if (district) {
      mapFeature = map.data.addGeoJson(district);
      $("#district").text(district.properties.district);
      marker.setMap(map);
      marker.setPosition(lngLat);

    //Otherwise clear the map and show "No district found"
    } else {
      $("#district").text("No district found");
      marker.setMap(null);

    }

  }

</script>

style.css

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: Helvetica, Arial, sans-serif;
}

h2 {
  display: block;
  margin: 0;
  font-size: 20px;
  padding-top: 12px;
}

h3 {
  display: block;
  margin: 0;
  font-size: 12px;
  font-weight: normal;
}

input {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20px;
  padding: 4px 8px;
  outline: 0;
}

input[type='text'] {
  width: 340px;
  border: 1px solid #ccc;
  margin-right: 2px;
}

input[type='submit'] {
  background-color: #e51133;
  color: #fff;
  font-weight: bold;
  border: 0;
  padding: 5px 8px;
  cursor: pointer;
}

input[type='submit']:hover {
  background-color: #fc0;
}

#form {
  text-align: center;
}

#district {
  text-align: center;
  font-weight: bold;
  font-size: 24px;
}

div.container {
  margin: 0 auto;
  max-width: 400px;
}

div.container > div {
  padding: 12px 0;
}

#map {
  height: 250px;
}

strong {
  margin-right: 8px;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 400px) {

  div.container {
    width: 320px;
  }

  input[type='text'] {
    width: 260px;
  }
}