Receiving and Displaying Vehicle Data with Automatic and MapBox

1.js

var fs = require('fs');
var coffee = require('coffee-script');

10.coffee

main = ->
  L.mapbox.accessToken = '<your-mapbox-api-key>'
  map = L.mapbox.map('map', '<your-map-code>')

  map.setView [lat, lng], 5
  marker = L.marker [lat, lng],
    icon: L.mapbox.marker.icon('marker-color': '#f86767')

  marker.addTo map

11.coffee

if navigator.geolocation
  navigator.geolocation.getCurrentPosition (position) ->
    if locationMarker?
      # return if there is a locationMarker bug
      return
    # sets default position to your position
    lat = position.coords['latitude']
    lng = position.coords['longitude']

    pubs()
    main()

  (error) ->
    console.log 'Error: ', error,
    enableHighAccuracy: true

2.js

app.get('/app.css', function(req, res) {
  res.header('Content-Type', 'text/css');
  file = fs.readFileSync(__dirname + '/client/styles/css/app.css', 'ascii');
  res.send(file);
})

3.js

app.get('/:script.js', function(req, res) {
  res.header('Content-Type', 'application/x-javascript');
  cs = fs.readFileSync(__dirname + '/client/js/' +
       req.params.script + '.coffee', 'ascii');
  js = coffee.compile(cs);
  res.send(js);
})

4.jade

title= title
script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js")
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js")
...
body
  block content

  script(src="/map_box_example.js")

5.jade

extends layout_template

block content

  .container
    h1 Application online
    a.btn.btn-primary(href="/login").
      Login

6.jade

extends layout_template

block content
  .container
    h1 MapBox Example
    div#map

7.css

html, body, #map {
  height: 700px;
  margin: 0px;
  padding: 0px
}

8.coffee

lat = null
lng = null
map = undefined
marker = undefined
notificationType = undefined
vehicle = undefined

9.coffee

pubs = ->
  pubnub = PUBNUB.init(
    publish_key: 'publish_key_here'
    subscribe_key: 'subscribe_key_here')

  pubnub.subscribe
    channel: 'automaticChannel'
    message: (message, channel) ->
      console.log message
      lat = message.location.lat
      lng = message.location.lon
      notificationType = message.type
      vehicle = message.vehicle.display_name
      map.setView [lat,lng]
      marker.setLatLng L.latLng(lat, lng)
      marker.bindPopup("<p>#{notificationType}</p>" +
      "<p>Vehicle: #{vehicle}</p>")