realtime maps

server.js

const log = console.log.bind(this)
const has = require('lodash/has')
const request = require('request')
const { decode } = require('gtfs-realtime-bindings').FeedMessage

const requestOptions = {
  method: 'GET',
  url: 'https://api.transport.nsw.gov.au/v1/gtfs/vehiclepos/buses',
  encoding: null,
  headers: { Authorization: 'apikey 63rwMFYCmptgwCPXSsmWSMqDeT1MQDNbdY6r' }
}

const getPosition = entity => {
  const latitude = has(entity, 'vehicle.position.latitude')
    ? entity.vehicle.position.latitude
    : ''
  const longitude = has(entity, 'vehicle.position.longitude')
    ? entity.vehicle.position.longitude
    : ''

  return [latitude, longitude]
}

const getInfo = arr => {
  return arr.reduce((a, e) => {
    const [latitude, longitude] = getPosition(e)

    return a.concat({
      id: e.id,
      position: [latitude, longitude]
    })
  }, [])
}

const req = cb => {
  request(requestOptions, (err, response, body) => {
    const { entity } = decode(body)
    const vehicles = getInfo(entity)
    cb(vehicles)
  })
}

const sec = int => int * 1000

const timer = (fn, cb) => {
	fn(cb)
	setInterval(() => fn(cb), sec(15))
}

const getVehicles = cb => timer(req, cb)

module.exports = { getVehicles }

ui.js

const log = console.log.bind(this)
import React, { Component } from 'react'
import io from 'socket.io-client'
import { Map, Marker, Popup, TileLayer } from 'react-leaflet'
import data from './data'

export default class App extends Component {
  constructor() {
    super()
    this.state = {
      lat: -33.9098,
      lng: 151.1621,
      zoom: 13,
      data
    }
  }
  componentDidMount() {
    const socket = io('http://localhost:8888')
    socket.on('data', (data) => this.setState({ data }))
  }
  render() {
    const { data } = this.state
    const position = [this.state.lat, this.state.lng]
    return (
      <Map center={position} zoom={this.state.zoom}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        { data.map(e => {
            const [lt, lg] = e.position
            return (<Marker key={e.id} position={e.position}>
              <Popup>
                <span>
                  <strong>ID:</strong> {e.id} <br />
                  <strong>Latitude</strong>: {lt} <br />
                  <strong>Longitude</strong>: {lg}
                </span>
              </Popup>
            </Marker>)
          }) }
      </Map>
    )
  }
}