Add BCycle Layer

Gemfile

@@ -6,5 +6,6 @@ git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
 
 gem 'dotenv'
 gem 'sinatra-contrib'
+gem 'sinatra-cors'
 gem 'sinatra'
 gem 'thin'

Gemfile.lock

@@ -22,6 +22,7 @@ GEM
       rack-protection (= 2.1.0)
       sinatra (= 2.1.0)
       tilt (~> 2.0)
+    sinatra-cors (1.2.0)
     thin (1.8.0)
       daemons (~> 1.0, >= 1.0.9)
       eventmachine (~> 1.0, >= 1.0.4)
@@ -35,7 +36,8 @@ DEPENDENCIES
   dotenv
   sinatra
   sinatra-contrib
+  sinatra-cors
   thin
 
 BUNDLED WITH
-   2.1.4
+   2.2.29

app.rb

@@ -5,6 +5,7 @@
 require 'uri'
 require 'fileutils'
 require 'date'
+require 'sinatra/cors'
 
 def api_request(path)
   uri = URI.parse("#{ENV['GTFS_BASE_URL']}#{path}")
@@ -30,6 +31,8 @@ class WeGoBusMap < Sinatra::Base
     ]
   }
 
+  set :allow_origin, 'https://gtfs.transitnownash.org'
+
   configure :development, :test do
     set :force_ssl, (ENV['FORCE_SSL'] == '1')
   end

public/assets/javascript/app.js

@@ -32,13 +32,15 @@ L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x
 const vehiclesLayer = L.layerGroup().addTo(map)
 const routesLayer = L.layerGroup().addTo(map)
 const stopsLayer = L.layerGroup().addTo(map)
+const bcycleLayer = L.layerGroup().addTo(map)
 
 L.control.layers(
   null,
   {
     'Vehicles': vehiclesLayer, // eslint-disable-line
     'Routes': routesLayer,     // eslint-disable-line
-    'Stops': stopsLayer        // eslint-disable-line
+    'Stops': stopsLayer,       // eslint-disable-line
+    'BCycle': bcycleLayer      // eslint-disable-line
   }
 ).addTo(map)
 
@@ -202,7 +204,7 @@ const formatVehicleSpeed = function (speed) {
 
 const updateMap = function () {
   // Delete very outdated markers (likely no longer in the feed)
-  $.each(markers, function (i, marker) {
+  $.each(markers, function (i) {
     if (Math.round(((Date.now() / 1000) - markers[i].data.updated) / 60) >= 10) {
       map.removeLayer(markers[i])
       markers[i].remove()
@@ -305,7 +307,7 @@ const checkForAlerts = function () {
         plural: data.length !== 1 ? 's' : ''
       }
     ))
-    alertIndicator.on('click', function (e) {
+    alertIndicator.on('click', function () {
       displayAlerts(data)
     })
   })
@@ -393,7 +395,7 @@ const displayLocationButton = function () {
   const locationButton = $(L.Util.template(
     $('#location_button_template').html()
   ))
-  $(locationButton).on('click', function (e) {
+  $(locationButton).on('click', function () {
     map.locate()
   })
   $(mapToolsContainer).append(locationButton)
@@ -438,7 +440,7 @@ const displayRoute = function (tripData) {
     if (!L.Browser.mobile) {
       routeShapes[shapeId].bindTooltip('Route ' + routeData.route_short_name + ' (click to remove)')
     }
-    routeShapes[shapeId].on('click', function (e) {
+    routeShapes[shapeId].on('click', function () {
       stopsLayer.removeLayer(stopLayer)
       routesLayer.removeLayer(routeLayer)
       // Allows the shape to be redrawn

public/assets/javascript/bcycle.js

@@ -0,0 +1,69 @@
+/* global $, L, bcycleLayer, moment */
+
+const GBFS_REFRESH_TTL = 20 * 1000
+const GBFS_BASE_URL = 'https://gbfs.bcycle.com/bcycle_nashville'
+
+var BCycleIcon = L.Icon.extend({
+  options: {
+    iconUrl: 'assets/images/bcycle.svg',
+    iconSize: [32, 32],
+    shadowUrl: null,
+  }
+})
+
+let stationInfo = {}
+let gbfsMarkers = {}
+
+// Main Loop
+$.get(GBFS_BASE_URL + '/station_information.json', function (station_information) {
+  $(station_information.data.stations).each(function(i) {
+    var station = station_information.data.stations[i]
+    stationInfo[station.station_id] = station
+    gbfsMarkers[station.station_id] = L.marker([station.lat, station.lon], {icon: new BCycleIcon()}).addTo(bcycleLayer)
+  })
+  updateBCycleMarkers()
+})
+
+// Format BCycle Tooltip
+const formatBCyclePopup = function (station) {
+  return L.Util.template(
+    $('#bcycle_popup_template').html(),
+    {
+      station_name: station.name || 'Not Set',
+      station_address: station.address || 'Not Set',
+      lat: station.lat || null,
+      lon: station.lon || null,
+      is_renting: station.status.is_renting == '1' ? 'Yes' : 'No',
+      is_returning: station.status.is_returning == '1' ? 'Yes' : 'No',
+      num_bikes_available: station.status.num_bikes_available || 'Unknown',
+      num_docks_available: station.status.num_docks_available || 'Unknown',
+      last_reported: moment.unix(station.status.last_reported).format('h:mm a')
+    }
+  )
+}
+
+// Format BCycle Tooltip
+const formatBCycleTooltip = function (station) {
+  return L.Util.template(
+    $('#bcycle_tooltip_template').html(),
+    {
+      station_name: station.name || 'Not Set',
+      num_bikes_available: station.status.num_bikes_available || 'Unknown',
+      num_docks_available: station.status.num_docks_available || 'Unknown'
+    }
+  )
+}
+
+// Update BCycle Markers
+const updateBCycleMarkers = function () {
+  $.get(GBFS_BASE_URL + '/station_status.json', function (station_status) {
+    $(station_status.data.stations).each(function (i) {
+      var status = station_status.data.stations[i]
+      stationInfo[status.station_id]['status'] = status
+      gbfsMarkers[status.station_id].bindPopup(formatBCyclePopup(stationInfo[status.station_id]))
+      gbfsMarkers[status.station_id].bindTooltip(formatBCycleTooltip(stationInfo[status.station_id]))
+    })
+  })
+  console.log('refresh called')
+  setTimeout(updateBCycleMarkers, GBFS_REFRESH_TTL)
+}

views/index.erb

@@ -250,6 +250,37 @@
   </div>
 </template>
 
+<template id="bcycle_popup_template">
+  <div style="width: 300px;">
+    <div class="stop-label">{station_name}</div>
+    <p><i class="fas fa-map-marked-alt fa-fw" aria-hidden="true"></i> <a href="https://www.google.com/maps/dir/?api=1&travelmode=transit&destination={lat}%2C{lon}" target="_blank">{station_address}</a></p>
+    <dl class="row">
+      <dt class="col-7"><i class="fas fa-exchange-alt fa-fw" aria-hidden="true"></i> Renting?</dt>
+      <dd class="col-5">{is_renting}</dd>
+      <dt class="col-7"><i class="fas fa-inbox fa-fw" aria-hidden="true"></i> Allows Returns?</dt>
+      <dd class="col-5">{is_returning}</dd>
+      <dt class="col-7"><i class="fas fa-biking fa-fw" aria-hidden="true"></i> Bikes Available</dt>
+      <dd class="col-5">{num_bikes_available}</dd>
+      <dt class="col-7"><i class="fas fa-bicycle fa-fw" aria-hidden="true"></i> Docks Available</dt>
+      <dd class="col-5">{num_docks_available}</dd>
+      <dt class="col-7"><i class="fas fa-clock fa-fw" aria-hidden="true"></i> Last Updated</dt>
+      <dd class="col-5">{last_reported}</dd>
+    </dl>
+  </div>
+</template>
+
+<template id="bcycle_tooltip_template">
+  <div style="width: 300px;">
+    <div class="stop-label">{station_name}</div>
+    <dl class="row">
+      <dt class="col-7"><i class="fas fa-biking fa-fw" aria-hidden="true"></i> Bikes Available</dt>
+      <dd class="col-5">{num_bikes_available}</dd>
+      <dt class="col-7"><i class="fas fa-bicycle fa-fw" aria-hidden="true"></i> Docks Available</dt>
+      <dd class="col-5">{num_docks_available}</dd>
+    </dl>
+  </div>
+</template>
+
 <%= erb 'partials/alert'.to_sym %>
 
 <template id="alert_empty_template">

views/layouts/app.erb

@@ -30,6 +30,7 @@
     <script src="/assets/javascript/leaflet.rotatedMarker.js"></script>
     <script src="/assets/javascript/leaflet.textpath.js"></script>
     <script src="/assets/javascript/app.js"></script>
+    <script src="/assets/javascript/bcycle.js"></script>
     <script>
       $(function () {
         $('[data-toggle="tooltip"]').tooltip()