easierbycode
10/25/2012 - 12:31 AM
Old map
Old map
e = (id) ->
document.getElementById id
load = ->
getDateSetIndex = (millis, i, isLastReading) ->
dt = getDateObj(millis)
unless dates[dt["dayMonthDateYear"]]
dates[dt["dayMonthDateYear"]] = []
day.setEndIndex i if day?
day = new Day(dt["dayMonthDateYear"])
day.setStartIndex i
if isLastReading
day.setEndIndex i
polyline = new google.maps.Polyline(
path: allPoints
strokeColor: "#0000FF"
strokeOpacity: 1.0
strokeWeight: 2
)
polyline.setMap gmap
dt
resizeApp()
if typeof (google) isnt "undefined"
myLatlng = new google.maps.LatLng()
myOptions =
zoom: zoom
center: myLatlng
mapTypeId: google.maps.MapTypeId.ROADMAP
gmap = new google.maps.Map(e("map_100pct_ht"), myOptions)
gmap.clearOverlays = ->
i = 0
while i < locations.length
locations[i].marker.setMap null
i++
gmap.getMarkerIcon = (icon_url, icon_text) ->
marker_icon = Mda.Map.markerIcon(icon_url, icon_text)
marker_image = new google.maps.MarkerImage(marker_icon, new google.maps.Size(23, 34), new google.maps.Point(0, 0), new google.maps.Point(11, 34))
marker_image
shadow = ""
google.maps.event.addListener infowindow, "closeclick", ->
highlightTextRow null
else
e("map_100pct_ht").innerHTML = "<center>Connection timed out. Please <a href=\"javascript:location.reload(true)\">try again</a>.</center>"
html = ""
i = days.length - 1
while i >= 0
html += days[i].render()
i--
e("map-logo").style.display = "block"
e("mainContent").innerHTML = html
# end load()
highlightTextRow = (id) ->
return if id is `undefined`
row = e("row" + id)
# Set the previous row back to it's default class
prevSelectedRow.className = prevSelectedRowClass if prevSelectedRow
if id isnt null
prevSelectedRow = row
prevSelectedRowClass = row.className
# Highlight the current row
row.className = "yellow-highlight"
setAnimation = (locationIndex, animation) ->
if animation is null
locations[locationIndex].marker.setAnimation null
else locations[locationIndex].marker.setAnimation google.maps.Animation.BOUNCE unless infowindow.anchor?
Day = (day) ->
@day = day
@index = days.length
days.push this
Location = (lat, lng, timestamp, day, time, complete, speed, event_type, address, rd_info) ->
@timestamp = timestamp
@day = day
@time = time
@complete = complete
@speed = speed
@event_type = event_type
@event_name = Mda.Map.eventName(event_type)
@address = address
@rd_info = rd_info
latlng = new google.maps.LatLng(lat, lng)
@marker = new google.maps.Marker(
position: latlng
map: gmap
zIndex: (if (@event_type is "IGNITION_ON") then 1000 else locations.length)
animation: google.maps.Animation.DROP
shadow: shadow
icon: gmap.getMarkerIcon(@event_type, @speed)
)
@isShown = true
index = locations.length
allPoints.push latlng
locations.push this
@index = index
google.maps.event.addListener @marker, "click", ->
highlightTextRow index
locations[index].open()
infowindow.open @map, this
google.maps.event.addListener @marker, "mouseover", ->
highlightTextRow index
google.maps.event.addListener @marker, "mouseout", ->
highlightTextRow null unless infowindow.anchor?
play = ->
infowindow.close()
isPlaying = true
jQuery("#map-control-tr").addClass("ui-state-hover").text "Stop" if jQuery
gmap.clearOverlays()
addMarker 0
stop = ->
isPlaying = false
jQuery("#map-control-tr").removeClass("ui-state-hover").text "Play" if jQuery
gmap.clearOverlays()
i = 0
while i < locations.length
locations[i].marker.setOptions
map: gmap
icon: gmap.getMarkerIcon(locations[i].event_type, locations[i].speed)
locations[i].show locations[i].isShown
i++
highlightTextRow null
addMarker = (i) ->
return unless isPlaying
gmap.panTo locations[i].marker.getPosition()
locations[i].marker.setOptions
zIndex: i
map: gmap
icon: gmap.getMarkerIcon(locations[i].event_type, locations[i].speed)
highlightTextRow i
if i < locations.length - 1
setTimeout "addMarker(" + (i + 1) + ")", 550
else
stop()
createTree = ->
if jQuery
jQuery("#navigation").treeview
animated: "fast"
toggle: ->
infowindow.close()
highlightTextRow null
index = jQuery(this).find(">ul").attr("id").replace("header", "")
days[index].toggle()
getWindowHeight = ->
if jQuery
jQuery(window).height()
else
elem = (if (document.compatMode is "CSS1Compat") then document.documentElement else document.body)
elem.clientHeight
calculateOffsetTop = (element, opt_top) ->
opt_top = opt_top or null
offset = 0
elem = element
while elem and elem isnt opt_top
offset += elem.offsetTop
elem = elem.offsetParent
offset
resizeApp = ->
height = getWindowHeight()
mapElem = e("map_100pct_ht")
mapHeight = height - calculateOffsetTop(mapElem)
panelElem = e("resizable_panel")
panelHeight = height + 4 - calculateOffsetTop(panelElem)
sp = e("mainContent")
resizerHeight = height - calculateOffsetTop(sp)
mapElem.style.height = Math.max(0, mapHeight) + "px"
panelElem.style.height = Math.max(0, panelHeight) + "px"
resizerHeight -= e("bottom_links").offsetHeight
sp.style.height = Math.max(0, resizerHeight) + "px"
e = (id) ->
document.getElementById id
load = ->
getDateSetIndex = (millis, i, isLastReading) ->
dt = getDateObj(millis)
unless dates[dt["dayMonthDateYear"]]
dates[dt["dayMonthDateYear"]] = []
day.setEndIndex i if day?
day = new Day(dt["dayMonthDateYear"])
day.setStartIndex i
if isLastReading
day.setEndIndex i
polyline = new google.maps.Polyline(
path: allPoints
strokeColor: "#0000FF"
strokeOpacity: 1.0
strokeWeight: 2
)
polyline.setMap gmap
dt
resizeApp()
if typeof (google) isnt "undefined"
myLatlng = new google.maps.LatLng()
myOptions =
zoom: zoom
center: myLatlng
mapTypeId: google.maps.MapTypeId.ROADMAP
gmap = new google.maps.Map(e("map_100pct_ht"), myOptions)
gmap.clearOverlays = ->
i = 0
while i < locations.length
locations[i].marker.setMap null
i++
gmap.getMarkerIcon = (icon_url, icon_text) ->
marker_icon = Mda.Map.markerIcon(icon_url, icon_text)
marker_image = new google.maps.MarkerImage(marker_icon, new google.maps.Size(23, 34), new google.maps.Point(0, 0), new google.maps.Point(11, 34))
marker_image
shadow = ""
google.maps.event.addListener infowindow, "closeclick", ->
highlightTextRow null
else
e("map_100pct_ht").innerHTML = "<center>Connection timed out. Please <a href=\"javascript:location.reload(true)\">try again</a>.</center>"
html = ""
i = days.length - 1
while i >= 0
html += days[i].render()
i--
e("map-logo").style.display = "block"
e("mainContent").innerHTML = html
# core/app/helpers/trips_helper.rb
#
# <%= generate_js_locations(@readings) %>
# end load()
highlightTextRow = (id) ->
return if id is `undefined`
row = e("row" + id)
# Set the previous row back to it's default class
prevSelectedRow.className = prevSelectedRowClass if prevSelectedRow
if id isnt null
prevSelectedRow = row
prevSelectedRowClass = row.className
# Highlight the current row
row.className = "yellow-highlight"
setAnimation = (locationIndex, animation) ->
if animation is null
locations[locationIndex].marker.setAnimation null
else locations[locationIndex].marker.setAnimation google.maps.Animation.BOUNCE unless infowindow.anchor?
Day = (day) ->
@day = day
@index = days.length
days.push this
Location = (lat, lng, timestamp, day, time, complete, speed, event_type, address, rd_info) ->
@timestamp = timestamp
@day = day
@time = time
@complete = complete
@speed = speed
@event_type = event_type
@event_name = Mda.Map.eventName(event_type)
@address = address
@rd_info = rd_info
latlng = new google.maps.LatLng(lat, lng)
@marker = new google.maps.Marker(
position: latlng
map: gmap
zIndex: (if (@event_type is "IGNITION_ON") then 1000 else locations.length)
animation: google.maps.Animation.DROP
shadow: shadow
icon: gmap.getMarkerIcon(@event_type, @speed)
)
@isShown = true
index = locations.length
allPoints.push latlng
locations.push this
@index = index
google.maps.event.addListener @marker, "click", ->
highlightTextRow index
locations[index].open()
infowindow.open @map, this
google.maps.event.addListener @marker, "mouseover", ->
highlightTextRow index
google.maps.event.addListener @marker, "mouseout", ->
highlightTextRow null unless infowindow.anchor?
play = ->
infowindow.close()
isPlaying = true
jQuery("#map-control-tr").addClass("ui-state-hover").text "Stop" if jQuery
gmap.clearOverlays()
addMarker 0
stop = ->
isPlaying = false
jQuery("#map-control-tr").removeClass("ui-state-hover").text "Play" if jQuery
gmap.clearOverlays()
i = 0
while i < locations.length
locations[i].marker.setOptions
map: gmap
icon: gmap.getMarkerIcon(locations[i].event_type, locations[i].speed)
locations[i].show locations[i].isShown
i++
highlightTextRow null
addMarker = (i) ->
return unless isPlaying
gmap.panTo locations[i].marker.getPosition()
locations[i].marker.setOptions
zIndex: i
map: gmap
icon: gmap.getMarkerIcon(locations[i].event_type, locations[i].speed)
highlightTextRow i
if i < locations.length - 1
setTimeout "addMarker(" + (i + 1) + ")", 550
else
stop()
createTree = ->
if jQuery
jQuery("#navigation").treeview
animated: "fast"
toggle: ->
infowindow.close()
highlightTextRow null
index = jQuery(this).find(">ul").attr("id").replace("header", "")
days[index].toggle()
getWindowHeight = ->
if jQuery
jQuery(window).height()
else
elem = (if (document.compatMode is "CSS1Compat") then document.documentElement else document.body)
elem.clientHeight
calculateOffsetTop = (element, opt_top) ->
opt_top = opt_top or null
offset = 0
elem = element
while elem and elem isnt opt_top
offset += elem.offsetTop
elem = elem.offsetParent
offset
resizeApp = ->
height = getWindowHeight()
mapElem = e("map_100pct_ht")
mapHeight = height - calculateOffsetTop(mapElem)
panelElem = e("resizable_panel")
panelHeight = height + 4 - calculateOffsetTop(panelElem)
sp = e("mainContent")
resizerHeight = height - calculateOffsetTop(sp)
mapElem.style.height = Math.max(0, mapHeight) + "px"
panelElem.style.height = Math.max(0, panelHeight) + "px"
resizerHeight -= e("bottom_links").offsetHeight
sp.style.height = Math.max(0, resizerHeight) + "px"
gmap = undefined
prevSelectedRow = undefined
prevSelectedRowClass = undefined
zoom = 15
dates = {}
locations = []
allPoints = []
days = []
openLocation = null
isPlaying = false
day = null
infowindow = new google.maps.InfoWindow()
Day::setStartIndex = (index) ->
@startIndex = index
Day::setEndIndex = (index) ->
@endIndex = index
Day::render = ->
html = ""
html += "<ul id=\"navigation\">" if @index is (days.length - 1)
html += "<li><strong style=\"font-size: 13px\">" + @day + "</strong>"
html += "<ul id=\"header" + @index + "\" >"
i = @endIndex
while i >= @startIndex
html += locations[i].render()
i--
html += "</ul>"
html += "</li>"
html += "</ul>" if @index is 0
html
Day::toggle = ->
content = e("header" + @index)
isHide = undefined
if content.style.display is "none"
isHide = false
else
isHide = true
i = @startIndex
while i <= @endIndex
locations[i].show isHide
i++
Location::show = (isShown) ->
@isShown = isShown
imageUrl = ""
unless isShown
imageUrl = "/icons/marker_unselected.png"
else
imageUrl = gmap.getMarkerIcon(@event_type, @speed)
@marker.setIcon imageUrl
Location::open = ->
infowindow.setContent "..loading"
self = this
datetime = @complete
marker = @marker
openLocation = null if openLocation?
if @address isnt `undefined`
infowindow.setContent @address + "<br />" + datetime
else
lat = @marker.getPosition().lat()
lng = @marker.getPosition().lng()
$.get "/geo?lat=" + lat + "&lng=" + lng, (address) ->
if address is ""
infowindow.setContent lat + ", " + lng + "<br />" + datetime
else
infowindow.setContent address + "<br />" + datetime
infowindow.open gmap, marker
openLocation = self
Location::render = ->
html = ""
left_parenthesis = (if (@event_name isnt "") then "(" else "")
right_parenthesis = (if (@event_name isnt "") then ")" else "")
html += "<li style=\"font-family: Arial,sans-serif; font-size: 8pt;\">"
html += "<div id=\"row" + @index + "\">"
html += "<strong>" + @time + "</strong> "
html += "<a href=\"javascript:setAnimation(" + @index + ", null); locations[" + @index + "].open(); highlightTextRow(" + @index + ");\" onmouseover=\"setAnimation(" + @index + ");\" onmouseout=\"setAnimation(" + @index + ", null);\">"
html += "show address"
html += "</a>"
html += "<div style=\"padding: 0 6px 0 4px; float: right; color: #333333;\"><i><div class=\"mph\""
html += ">" + @event_name + left_parenthesis
html += parseFloat(@speed).toFixed(1) + " mph"
html += right_parenthesis + "</div></i></div>"
html += "</div>"
html += "</li>"
html
gmap = undefined
prevSelectedRow = undefined
prevSelectedRowClass = undefined
zoom = 15
dates = {}
locations = []
allPoints = []
days = []
openLocation = null
isPlaying = false
day = null
infowindow = new google.maps.InfoWindow()
Day::setStartIndex = (index) ->
@startIndex = index
Day::setEndIndex = (index) ->
@endIndex = index
Day::render = ->
html = ""
html += "<ul id=\"navigation\">" if @index is (days.length - 1)
html += "<li><strong style=\"font-size: 13px\">" + @day + "</strong>"
html += "<ul id=\"header" + @index + "\" >"
i = @endIndex
while i >= @startIndex
html += locations[i].render()
i--
html += "</ul>"
html += "</li>"
html += "</ul>" if @index is 0
html
Day::toggle = ->
content = e("header" + @index)
isHide = undefined
if content.style.display is "none"
isHide = false
else
isHide = true
i = @startIndex
while i <= @endIndex
locations[i].show isHide
i++
Location::show = (isShown) ->
@isShown = isShown
imageUrl = ""
unless isShown
imageUrl = "/icons/marker_unselected.png"
else
imageUrl = gmap.getMarkerIcon(@event_type, @speed)
@marker.setIcon imageUrl
Location::open = ->
infowindow.setContent "..loading"
self = this
datetime = @complete
marker = @marker
openLocation = null if openLocation?
if @address isnt `undefined`
infowindow.setContent @address + "<br />" + datetime
else
lat = @marker.getPosition().lat()
lng = @marker.getPosition().lng()
$.get "/geo?lat=" + lat + "&lng=" + lng, (address) ->
if address is ""
infowindow.setContent lat + ", " + lng + "<br />" + datetime
else
infowindow.setContent address + "<br />" + datetime
infowindow.open gmap, marker
openLocation = self
Location::render = ->
html = ""
left_parenthesis = (if (@event_name isnt "") then "(" else "")
right_parenthesis = (if (@event_name isnt "") then ")" else "")
html += "<li style=\"font-family: Arial,sans-serif; font-size: 8pt;\">"
html += "<div id=\"row" + @index + "\">"
html += "<strong>" + @time + "</strong> "
html += "<a href=\"javascript:setAnimation(" + @index + ", null); locations[" + @index + "].open(); highlightTextRow(" + @index + ");\" onmouseover=\"setAnimation(" + @index + ");\" onmouseout=\"setAnimation(" + @index + ", null);\">"
html += "show address"
html += "</a>"
html += "<div style=\"padding: 0 6px 0 4px; float: right; color: #333333;\"><i><div class=\"mph\""
html += ">" + @event_name + left_parenthesis
html += parseFloat(@speed).toFixed(1) + " mph"
html += right_parenthesis + "</div></i></div>"
html += "</div>"
html += "</li>"
htmlmodule TripsHelper
# ...
def generate_js_locations(readings)
# javascript Date does not take time zone into account
trip_offset = Time.at(@trip.start_at).in_time_zone(@trip.time_zone).utc_offset * 1000
s = "var local_offset = new Date(#{@trip.start_at}).getTimezoneOffset() * 60000;\n" # js offset is in minutes
# subtract an hour if browser is in DST
s << "if (new Date().dst()) {\n"
s << " local_offset -= 3600000;\n"
s << "}\n"
s << "var offset = #{trip_offset} + local_offset;\n"
unless readings.empty?
total = readings.length
admin_view = params[:action] != 'show'
readings.each_with_index do |r, i|
event = r.event_code
rd_info = ''
if admin_view
rd_info = ", '#{r.id} - #{r.qos_flags_s}'"
if r.display_cloud?
event = 'Cloud'
elsif r.display_hide?
event = 'Hide'
end
end
last = (i == total - 1) ? ', true' : ''
s << "var millis = #{r.update_time * 1000} + offset;\n"
s << "var dt = getDateSetIndex(millis, #{i} #{last});\n"
s << "new Location(#{r.latitude}, #{r.longitude}, millis, dt['dayMonthDateYear'], dt['time'], dt['full'], #{r.speed_in_mph}, '#{event}'#{rd_info});\n"
end
end
s.html_safe
end
end