     $scope.warning = null
     $scope.state_district = {state: null, district: null}
     $scope.district_reps = []
+    $scope.map_width = 0
     $scope.FIPS_to_state = {1:'AL', 2:'AK', 4:'AZ', 5:'AR', 6:'CA', 8:'CO', 9:'CT', 10:'DE', 11:'DC', 12:'FL', 13:'GA', 15:'HI', 16:'ID', 17:'IL', 18:'IN', 19:'IA', 20:'KS', 21:'KY', 22:'LA', 23:'ME', 24:'MD', 25:'MA', 26:'MI', 27:'MN', 28:'MS', 29:'MO', 30:'MT', 31:'NE', 32:'NV', 33:'NH', 34:'NJ', 35:'NM', 36:'NY', 37:'NC', 38:'ND', 39:'OH', 40:'OK', 41:'OR', 42:'PA', 44:'RI', 45:'SC', 46:'SD', 47:'TN', 48:'TX', 49:'UT', 50:'VT', 51:'VA', 53:'WA', 54:'WV', 55:'WI', 56:'WY', 60:'AS', 64:'FM', 66:'GU', 68:'MH', 69:'MP', 70:'PW', 72:'PR', 74:'UM', 78:'VI'}
 
     $scope.getLocation = () ->

        $('#map_holder').on("dblclick", () ->
          $scope.zoomOut()
        )
      width = 960
      height = 500
      path = d3.geo.path()
      svg = d3.select("#map_holder").append("svg").attr("width", width).attr("height", height)
      $scope.usMap = svg.append("g").attr("id", "map_with_districts")
      tooltip = d3.select("#map_holder")
        .append("div")
        .attr("class", "map_tooltip")
        .style("z-index", "10")
        .style("visibility", "hidden")
      dialog = d3.select("#map_dialog")
        .style("opacity", 1e-6)
        .style("z-index", "15")

      $scope.makeMapGradients()
      queue().defer(d3.json, "data/us.json").defer(d3.json, "data/us-congress-113.json").await ready

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

          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
