RideLogicAVLS/html/js/RideLogicAVLS.js

//
// Copyright (c) 2021 Clementine Computing LLC.
//
// This file is part of RideLogic.
//
// RideLogic is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// RideLogic is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with RideLogic.  If not, see <https://www.gnu.org/licenses/>.
//


var Feature = ol.Feature;
var Map = ol.Map;
var Overlay = ol.Overlay;
var Point = ol.geom.Point;
var TileJSON = ol.source.TileJSON;
var VectorSource = ol.source.Vector;
var View = ol.View;
var Icon = ol.style.Icon;
var Style = ol.style.Style;
var TileLayer = ol.layer.Tile;
var VectorLayer = ol.layer.Vector;
var OSM = ol.source.OSM;
var fromLonLat =  ol.proj.fromLonLat;

var Control = ol.control.Control;

var LineString = ol.geom.LineString;

//var defaultLonLat = [ -76.5019, 42.4440];
//var defaultLonLat = [ -76.1805, 42.6012 ];
var defaultLonLat = [ -76.2705, 42.5512 ];
var defaultWebMerc = fromLonLat(defaultLonLat);


function _rnd(a,b) {
  a = ((typeof a == "undefined") ? 1.0 : a);
  if (typeof b === "undefined") {
    return Math.random()*a;
  }
  return Math.random()*(b-a) + a;
}


function example_change_pos() {

  let w = 1/16.0;

  let lonlat = [
    defaultLonLat[0] + _rnd(-w,w),
    defaultLonLat[1] + _rnd(-w,w)];
  let merc = fromLonLat(lonlat);


  _icon[0].feature.getGeometry().setCoordinates(merc);
  busLayer.getSource().changed();
}

function example_change_opacity(p) {
  p = ((typeof p === "undefined") ? 0.0 : p);
  _icon[0].style.getImage().setOpacity(p);
  busLayer.getSource().changed();
}

// icon can't change image src dynamically,
// so have to replace.
// See https://stackoverflow.com/questions/57341190/how-can-i-change-icon-source-dynamically
//
function example_change_image() {
  let _nuimg = new Icon({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      src: 'data/bus_gw_90.png',
    });
  _icon[0].style.setImage(_nuimg);
  busLayer.getSource().changed();
}

//---

//var vectorSource = new VectorSource({ features: [iconFeature], });
var vectorSource = new VectorSource();
var _icon = [];
for (let ii=0; ii<2; ii++) {

  let w = 1/32.0;
  let lonlat = [
    defaultLonLat[0] + _rnd(-w,w),
    defaultLonLat[1] + _rnd(-w,w)];
  let merc = fromLonLat(lonlat);

  let iconFeature = new Feature({
    geometry: new Point([merc[0], merc[1]]),
    name: 'bus'
  });

  let iconStyle = new Style({
    image: new Icon({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      src: 'data/icon.png',
    }),
  });

  iconStyle.getImage().setOpacity(0.0);

  _icon.push({ "style": iconStyle, "feature": iconFeature });
  iconFeature.setStyle(iconStyle);
  vectorSource.addFeature(iconFeature);

}

//---


const busLayer = new VectorLayer({
  source: vectorSource,
  zIndex: 2
});

//--

const rasterLayer = new TileLayer({
  //source: ol.source.OSM()
  source: new ol.source.OSM(),
});

//--


//-------------------
//-------------------
//-------------------


const g_map = new Map({
  //layers: [rasterLayer, vectorLayer, routeLayer],
  layers: [rasterLayer, busLayer ],
  target: document.getElementById('map'),

  controls:[],
  view: new View({
    center: defaultWebMerc,
    zoom: 11,
  }),
});

class CustomToggle extends Control {
  constructor(opt) {
    opt = opt || {};
    let ele = document.createElement("button");
    ele.id = 'ui_route_toggle';
    ele.innerHTML = "Route";

    // class="btn" id="sidebarToggle" style='display:float;'
    ele.classList.add("custom-button");

    super({
      element: ele,
      target: opt.target
    });

    ele.addEventListener('click', this.fire.bind(this), false);
  }

  fire() {
    document.body.classList.toggle('sb-sidenav-toggled');
    localStorage.setItem('sb|sidebar-toggle', document.body.classList.contains('sb-sidenav-toggled'));

    // hacky, but functional
    //
    setTimeout(_resize, 250);

  }
}
g_map.addControl(new  CustomToggle({ className: 'custom-zoom' }));

//-------------------
//-------------------
//-------------------


g_map.addControl(new ol.control.Zoom({
  className: 'custom-zoom'
}));

const element = document.getElementById('popup');

const popup = new Overlay({
  element: element,
  positioning: 'bottom-center',
  stopEvent: false,
});
g_map.addOverlay(popup);

// display popup on click
//
g_map.on('click', function (evt) {

  // not working (wip)
  //
  /*
  const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
    return feature;
  });
  */

});

// change mouse cursor when over marker
g_map.on('pointermove', function (e) {
  const pixel = g_map.getEventPixel(e.originalEvent);
  const hit = g_map.hasFeatureAtPixel(pixel);
  g_map.getTarget().style.cursor = hit ? 'pointer' : '';
});
// Close the popup when the map is moved
g_map.on('movestart', function () {
  //$(element).popover('dispose');
});

g_map.on("postrender", function(event) {
  //console.log("bang...");
});


//----
//

setInterval( function() {
  //console.log("bang");
  //map.render();
}, 1000);


//-----
//

function update_buses(json_gtfs) {

  let bearingIdxLookup = [ "0", "45", "90", "135", "180", "225", "270", "315" ];

  for (let ii=0; ii<json_gtfs.entityList.length; ii++) {
    let id = json_gtfs.entityList[ii].id;
    let p = json_gtfs.entityList[ii].vehicle.position;
    let lat = p.latitude;
    let lon = p.longitude;
    let bearing = p.bearing;


    let lonlat = [ lon , lat ];
    let merc = fromLonLat(lonlat);

    if (typeof _icon[ii] === "undefined") { continue; }

    _icon[ii].feature.getGeometry().setCoordinates(merc);

    bearing = (bearing % 360 );
    if (bearing < 0) { bearing += 360.0; }
    let iheading = Math.floor( (parseInt( bearing ) + 23) / 45 );
    if (iheading > 7) { iheading = 0; }

    let _nuimg = new Icon({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: 'data/bus_gw_' + bearingIdxLookup[iheading] + '.png',
      });
    _icon[ii].style.setImage(_nuimg);
    _icon[ii].style.getImage().setOpacity(1.0);

    //console.log(">>", id, lat, lon, bearing);
  }

  busLayer.getSource().changed();
}

function fetch_gtfs_vehicle_position() {
  let xhr = new XMLHttpRequest();
  xhr.onload = function() {
    let ab = xhr.response;
    let json_pb  = pb2json.pb2json(ab);
    //console.log(">>>", json_pb);

    update_buses(json_pb)
  };

  xhr.responseType = "arraybuffer";
  xhr.open("GET", "VehiclePosition.pb");
  xhr.send();
}

//--

function update_route_layer(geojson) {
  if (!geojson) { return; }
  let route_points = geojson.features[0].geometry.coordinates;
  let merc_points = [];
  for (let ii=0; ii<route_points.length; ii++) {
    merc_points.push(ol.proj.transform(route_points[ii], 'EPSG:4326', 'EPSG:3857'));
  }

  let routeLine = new ol.Feature({
    geometry: new ol.geom.LineString(merc_points)
  });

  let routeLineVector = new ol.source.Vector({});
  routeLineVector.addFeature(routeLine);

  let routeLayer = new VectorLayer({
    source: routeLineVector,
    style: new ol.style.Style({
      fill: new ol.style.Fill({ color: 'rgb(0,0,255,0.25)', weight: 4, opacity: 0.5 }),
      stroke: new ol.style.Stroke({ color: 'rgb(0,0,255,0.25)', width: 6, opacity: 0.5 })
    }),
    zIndex: 0
  });

  g_map.addLayer(routeLayer);
}

function update_stop_layer(geojson) {
  if (!geojson) { return; }
  let stop_points = geojson.features[0].properties.route_stops;

  if (!stop_points) { return; }

  let merc_points = [];
  for (let ii=0; ii<stop_points.length; ii++) {
    let pnt = stop_points[ii].stop.geometry.coordinates;
    merc_points.push(ol.proj.transform(pnt, 'EPSG:4326', 'EPSG:3857'));
  }

  let stopVectorSource = new VectorSource();

  for (let ii=0; ii<merc_points.length; ii++) {
    let _stop = stop_points[ii].stop;

    let _stop_name = _stop.stop_name;

    let iconFeature = new Feature({
      geometry: new Point([merc_points[ii][0], merc_points[ii][1]]),
      name: _stop_name
    });

    let iconStyle = new Style({
      image: new Icon({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: 'data/star-3.png',
      }),
    });

    iconStyle.getImage().setOpacity(0.8);
    iconFeature.setStyle(iconStyle);
    stopVectorSource.addFeature(iconFeature);

  }

  let stopLayer = new VectorLayer({
    source: stopVectorSource,
    zIndex: 0
  });

  g_map.addLayer(stopLayer);
}

function fetch_geojson(url) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function() {
    let geojson = xhr.response;
    update_route_layer(geojson);
    update_stop_layer(geojson);
  };

  xhr.responseType = "json";
  xhr.open("GET", url, true);
  xhr.send();

}

//---


function _resize() {

  let h = $(window).height();
  let m = document.getElementById("map");
  m.style.height = (h-10) + "px";
  g_map.updateSize();
}

function init() {
  setInterval(fetch_gtfs_vehicle_position, 1000);
  setTimeout( function() { fetch_geojson("geojson/test_route.geojson"); }, 100);

  $(window).on('resize', _resize);
}

window.addEventListener('DOMContentLoaded', event => {

    // Toggle the side navigation
    const sidebarToggle = document.body.querySelector('#sidebarToggle');
    if (sidebarToggle) {
      // Uncomment Below to persist sidebar toggle between refreshes
      // if (localStorage.getItem('sb|sidebar-toggle') === 'true') {
      //     document.body.classList.toggle('sb-sidenav-toggled');
      // }
      sidebarToggle.addEventListener('click', event => {
        event.preventDefault();
        document.body.classList.toggle('sb-sidenav-toggled');
        localStorage.setItem('sb|sidebar-toggle', document.body.classList.contains('sb-sidenav-toggled'));


        // hacky, but functional
        //
        setTimeout(_resize, 250);
      });


    }
  //init();
  //_resize();

});

$(document).ready(function() {
  init();
  _resize();
});