           else console.log "Error, Senator/Rep not found."
       else console.log "No parameter"
 
+    $scope.drawMapByState = (state_FIPS) ->
+      state_districts = []
+      ready = (error, us, congress) ->
+        for obj in topojson.feature(congress, congress.objects.districts).features
+          if obj.id and JSON.stringify(obj.id).slice(0, -2) is state_FIPS
+            state_districts.push(obj)
+        #find min top/left, find width/height
+        district = $scope.usMap.append("g").attr("class", "districts").attr("clip-path", "url(#clip-land)").selectAll("path").data(state_districts).enter().append("path").attr("d", path).text (d) ->
+          "#{$scope.FIPS_to_state[d.id / 100 | 0]}-#{d.id % 100}"
+        district_boundaries = $scope.usMap.append("path").attr("class", "district-boundaries").attr("clip-path", "url(#clip-land)").datum(topojson.mesh(congress, congress.objects.districts, (a, b) ->
+          (a.id / 1000 | 0) is (b.id / 1000 | 0) and (a.id and JSON.stringify(a.id).slice(0, -2) is state_FIPS)
+        )).attr "d", path
+        district.on("mouseover", () ->
+          return tooltip.style("visibility", "visible").text(d3.select(this).text())
+        ).on("mousemove", () -> 
+          return tooltip.style("top", (event.pageY-27)+"px").style("left", (event.pageX+"px"))
+        ).on("mouseout", () -> 
+          return tooltip.style("visibility", "hidden")
+        ).on("click", () ->
+          if !$scope.district_reps.length and $scope.zoomed
+            $scope.usMap.transition().duration(750).attr("transform", "translate(0,0)scale(1)").style "stroke-width", 1 + "px"
+            d3.select('#map_dialog').transition().duration(750).style("opacity", 1e-6)
+            $scope.state_district = {state: null, district: null}
+            $scope.district_reps = []
+          else
+            district_id = d3.select(this).text()
+            $scope.state_district = {state: district_id.slice(0, 2), district: district_id.slice(3, 6)}
+            $scope.$apply()
+        )
+        $('#map_holder').on("dblclick", () ->
+          $scope.zoomOut()
+        )
+        # The below is based off zoom code, maybe refactor to call zoom or related func
+        bbox = d3.select("#map_with_districts").node().getBBox()
+        o_x = bbox.x + bbox.width/2
+        o_y = bbox.y + bbox.height/2
+        # scale = 100/Math.sqrt(Math.pow(bbox.width, 2) + Math.pow(bbox.height,2))
+        scale = 1
+        $scope.usMap.attr("transform", "translate(" + 220 / 2 + "," + 220 / 2 + ")scale(" + scale + ")translate(" + -o_x + "," + -o_y + ")").style "stroke-width", 1.5
+
+
+      #    element = d.node()
+      # bbox = element.getBBox()
+      # x = bbox.x + bbox.width/2
+      # y = bbox.y + bbox.height/2
+      # if y < 106 and (bbox.height > 53 or bbox.width > 53) then y += (106 - y)
+      # scale = 200/Math.sqrt(Math.pow(bbox.width, 2) + Math.pow(bbox.height,2))
+      # $scope.usMap.transition().duration(750).attr("transform", "translate(" + 960 / 2 + "," + 600 / 2 + ")scale(" + scale + ")translate(" + -x + "," + -y + ")").style "stroke-width", 1.5 / scale + "px"
+
+      $scope.map_width = 220
+      height = 220
+      path = d3.geo.path()
+      svg = d3.select("#map_holder").append("svg").attr("width", $scope.map_width).attr("height", height)
+      $scope.usMap = svg.append("g").attr("id", "map_with_districts")
+      dialog = d3.select("#map_dialog").style("opacity", 1e-6).style("z-index", "15")
+      tooltip = $scope.makeTooltip()
+      $scope.makeMapGradients()
+      queue().defer(d3.json, "data/us.json").defer(d3.json, "data/us-congress-113.json").await ready
+
     $scope.drawMap()
     $scope.defaultFocus()
+    # $scope.drawMapByState("49")
 
     $scope.$watch('state_district', (newVals, oldVals) ->
       if $scope.state_district.state

    $scope.defaultFocus = () ->
      # TODO: refactor this to not use an API call but only scope variables if possible.
      if $routeParams.bioguide_id.length > 0
        console.log $routeParams.bioguide_id
        ApiGet.congress "legislators?bioguide_id=#{$routeParams.bioguide_id}", (error, data) ->
          if not error
            if not data[0].district 

        $('#map_holder').on("dblclick", () ->
          $scope.zoomOut()
        )

      $scope.map_width = 960
      height = 500
      path = d3.geo.path()
      svg = d3.select("#map_holder").append("svg").attr("width", $scope.map_width).attr("height", height)
      $scope.usMap = svg.append("g").attr("id", "map_with_districts")
      tooltip = $scope.makeTooltip()
      dialog = d3.select("#map_dialog")
        .style("opacity", 1e-6)
        .style("z-index", "15")
      $scope.makeMapGradients()
      $scope.makeMapGradients()      
      queue().defer(d3.json, "data/us.json").defer(d3.json, "data/us-congress-113.json").await ready

    $scope.makeTooltip = () ->
      return d3.select("#map_holder")
        .append("div")
        .attr("class", "map_tooltip")
        .style("z-index", "10")
        .style("visibility", "hidden")

    $scope.makeMapGradients = () ->
      d3.select("#map_holder").select("svg")
