wip

* added stops

html/js/RideLogicAVLS.js

@@ -33,11 +33,6 @@ function _rnd(a,b) {
   return Math.random()*(b-a) + a;
 }
 
-//var vectorSource = new VectorSource({ features: [iconFeature], });
-var vectorSource = new VectorSource();
-
-var _icon = [];
-
 
 function example_change_pos() {
 
@@ -74,6 +69,11 @@ function example_change_image() {
   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;
@@ -83,11 +83,8 @@ for (var ii=0; ii<2; ii++) {
   let merc = fromLonLat(lonlat);
 
   var iconFeature = new Feature({
-    //geometry: new Point([10, 20]),
     geometry: new Point([merc[0], merc[1]]),
-    name: 'Null Island',
-    population: 4000,
-    rainfall: 500,
+    name: 'bus'
   });
 
   var iconStyle = new Style({
@@ -107,9 +104,12 @@ for (var ii=0; ii<2; ii++) {
 
 }
 
+//---
+
+
 const busLayer = new VectorLayer({
   source: vectorSource,
-  zIndex: 1
+  zIndex: 2
 });
 
 //--
@@ -207,7 +207,7 @@ function update_buses(json_gtfs) {
     _icon[ii].style.setImage(_nuimg);
     _icon[ii].style.getImage().setOpacity(1.0);
 
-    console.log(">>", id, lat, lon, bearing);
+    //console.log(">>", id, lat, lon, bearing);
   }
 
   busLayer.getSource().changed();
@@ -218,7 +218,7 @@ function fetch_gtfs_vehicle_position() {
   xhr.onload = function() {
     var ab = xhr.response;
     var json_pb  = pb2json.pb2json(ab);
-    console.log(">>>", json_pb);
+    //console.log(">>>", json_pb);
 
     update_buses(json_pb)
   };
@@ -228,6 +228,8 @@ function fetch_gtfs_vehicle_position() {
   xhr.send();
 }
 
+//--
+
 function update_route_layer(geojson) {
   var route_points = geojson.features[0].geometry.coordinates;
   var merc_points = [];
@@ -256,11 +258,68 @@ function update_route_layer(geojson) {
 
 }
 
-function fetch_geojson_route(url) {
+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";
@@ -269,9 +328,11 @@ function fetch_geojson_route(url) {
 
 }
 
+//--
+
 function init() {
   setInterval(fetch_gtfs_vehicle_position, 1000);
-  setTimeout( function() { fetch_geojson_route("geojson/test_route.geojson"); }, 100);
+  setTimeout( function() { fetch_geojson("geojson/test_route.geojson"); }, 100);
 }
 
 init();