RideLogicAVLS/html/js/RideLogicAVLS.js

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 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() {

  var 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() {
  var _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 (var ii=0; ii<2; ii++) {

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

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

  var 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 map = new Map({
  //layers: [rasterLayer, vectorLayer, routeLayer],
  layers: [rasterLayer, busLayer ],
  target: document.getElementById('map'),
  view: new View({
    center: defaultWebMerc,
    zoom: 11,
  }),
});

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

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

// display popup on click
map.on('click', function (evt) {
  const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
    return feature;
  });
});

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

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


//----
//

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


//-----
//

function update_buses(json_gtfs) {

  var 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);


    _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; }

    var _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() {
    var ab = xhr.response;
    var 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) {
  var route_points = geojson.features[0].geometry.coordinates;
  var merc_points = [];
  for (let ii=0; ii<route_points.length; ii++) {
    merc_points.push(ol.proj.transform(route_points[ii], 'EPSG:4326', 'EPSG:3857'));
  }

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

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


  var 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
  });

  map.addLayer(routeLayer);

}

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

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

  console.log("...");

  var stopVectorSource = new VectorSource();

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

    let _stop_name = _stop.stop_name;

    console.log(merc_points[ii]);

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

    var 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);

  }

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

  map.addLayer(stopLayer);


  console.log(stop_points);


}

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

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

}

//--

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

init();