New map

trips.coffee

#= require date-utils
#= require map
#= require hamlcoffee
#= require underscore
#= require backbone
#= require_tree ../templates

@e = (id) -> document.getElementById(id)

@resizeApp = ->
  height = $(window).height()
  mapElem = e('map_100pct_ht')
  mapHeight = height - $('#map_100pct_ht').offset().top
  $(mapElem).css height: mapHeight

$(window).resize -> resizeApp()

class Gmap

  constructor: (options) ->
    window.resizeApp()

    opts =
      zoom: 15
      center: new google.maps.LatLng(options.center.lat, options.center.lng)
      mapTypeId: 'roadmap'

    map = new google.maps.Map(e(options.mapDiv), opts)

    _.extend map,
      createPolyline: (points) ->
        new google.maps.Polyline
          path: _.flatten([points])
          strokeColor: '#0000FF'
          strokeOpacity: 1.0
          strokeWeight: 2
          map: map

    window.geocoder = new google.maps.Geocoder
    window.infowindow = new google.maps.InfoWindow

    return map

class @Location extends Backbone.Model

  defaults:
    isShown: true

  initialize: ->
    @set
      time: getLocalTime( new Date(@get('timestamp') + localOffset), true )
      eventName: Mda.Map.eventName(@get('event_type'))
      point: new google.maps.LatLng(@get('lat'), @get('lng'))
      marker: @createMarkerUnlessHidden()
      index: @collection?.counter

    @collection?.counter++

    if @get 'marker'
      google.maps.event.addListener @get('marker'), 'click', => @trigger 'click'
      google.maps.event.addListener @get('marker'), 'mouseover', => @trigger 'mouseoverIcon'
      google.maps.event.addListener @get('marker'), 'mouseout', => @trigger 'mouseoutIcon'

  isLastLocation: -> @get('index') is @collection.last().get('index')

  eventIsHidden: -> events_to_hide.test(@get('event_type'))

  createMarkerUnlessHidden: ->
    unless @eventIsHidden()
      new google.maps.Marker
        position: new google.maps.LatLng(@get('lat'), @get('lng'))
        map: map
        zIndex: if @get('event_type') is 'IGNITION_ON' then 1000 else @collection.counter
        animation: google.maps.Animation.DROP
        icon: Mda.Map.markerIcon(@get('event_type'), @get('speed'))

class @Locations extends Backbone.Collection
  model: Location

  initialize: (options) ->
    @counter = 0

    window.map = new Gmap
      center: { lat:33.675908, lng:-111.8866777 }
      mapDiv: 'map_100pct_ht'

    @on 'reset', ->
      window.allPoints = @pluck('point')

      window.tripPath = map.createPolyline(allPoints)

      map.setCenter @last().get('point')

  toggleAll: (map = null) ->
    window.tripPath.setMap map
    _.each @pluck('marker'), (marker) -> marker.setMap map

  showAll: ->
    window.tripPath.setMap null
    _.each @pluck('marker'), (marker) -> marker.setMap null

class @LocationListItem extends Backbone.View
  className: => 'last' if @model.isLastLocation()
  tagName: 'li'
  events: ->
    events = {}

    events['click a'] = 'openInfowindow'

    if @model.get 'marker'
      events['mouseenter']  = -> @model.get('marker').setAnimation google.maps.Animation.BOUNCE
      events['mouseleave']  = -> @model.get('marker').setAnimation null

    events

  initialize: ->
    @model.on 'click', @openInfowindow
    @model.on 'mouseoverIcon', => @$el.addClass('yellow-highlight')
    @model.on 'mouseoutIcon', => @$el.removeClass()
    @$el.html JST['locations/list_item'](@model.toJSON())

  openInfowindow: =>
    geocoder.geocode location: @model.get('point'), (results, status) =>
      if status is 'OK'
        infowindow.setContent results[0].formatted_address
        infowindow.open(map, @model.get('marker'))

class @LocationList extends Backbone.View
  el: '#location_list'

  initialize: ->
    @collection.on 'reset', @render, @

  render: ->
    @$el.html JST['locations/list'](@collection.first().toJSON())
    $('ul', @el).append _.map @collection.models.reverse(), (model) ->
      (new LocationListItem model: model).el