Wherewolf.js demo - New York boundary service by veltman

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css" />
<body>
  <div class="container">
    <h2>New York boundary service</h2>
    <h3>Powered by <a href="https://github.com/veltman/wherewolf">Wherewolf</a></h3>
    <div id="form"><form><input type="text" id="address" placeholder="Enter a New York address"/><input type="submit" value="Go!"/></form></div>
    <div id="map"></div>
    <div id="results"></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:40.8,lng:-73.9},zoom: 10},
       map = new google.maps.Map(document.getElementById("map"),options),
       marker = new google.maps.Marker(),
       geocoder = new google.maps.Geocoder();


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

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

    //Use .addAll to add every
    //TopoJSON object at once
    ww.addAll(data);

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

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

        var districts,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
          districts = ww.find(lngLat);

          //If it's a match, stop
          if (districts.Borough) {
            return showResult(lngLat,districts);
          }

        }

        //No results
        return showResult(lngLat,districts);

      });

      return false;

    });

  });

  function showResult(lngLat,districts) {

    $("#results div").remove();

    //If Google returned no results at all,
    //Make a list of district types with null for each
    if (!districts) {
      districts = {};
      ww.layerNames().forEach(function(type){
        districts[type] = null;
      });
    }

    //For each district type, show the result
    //Show "Not found" if the result is null
    for (var type in districts) {
      var val = (districts[type] ? districts[type].name : "Not found");
      $("#results").append("<div><strong>"+type+":</strong>"+val+"</div>");
    }

    //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 NYC
    map.setZoom(lngLat ? 15 : options.zoom);

    //If they have a location, show a marker
    if (lngLat) {
      marker.setMap(map);
      marker.setPosition(lngLat);
    } else {
      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;
  }
}