       d3.select('.districts').selectAll('path').classed('selected', false)
       district_element = d3.select(d3.select('.districts').selectAll('path').filter((d, i) -> return this.textContent == "#{$scope.state_district.state}-#{$scope.state_district.district}")[0][0])
       district_element.attr('class', 'selected')
-      district_element.call($scope.zoomIn)
+      if $scope.map_width is 960 then district_element.call($scope.zoomIn)
 
     $scope.drawMap = () ->
       ready = (error, us, congress) ->

    $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")
