bugfix to allow for station lat and lng to be of type float or string

in certain cuircumstances, station's lat and lng are improperly stored as strings
the-nemz · Oct 16, 2022 · 5d266b6 · 5d266b6
1 parent 2be6017
commit 5d266b6
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 22 deletions.
diff --git a/app/src/js/components/Line.js b/app/src/js/components/Line.js
@@ -7,7 +7,7 @@ import 'react-dropdown/style.css';
 import { lineString as turfLineString } from '@turf/helpers';
 import turfLength from '@turf/length';
 
-import { checkForTransfer, getMode, partitionSections, LINE_MODES } from '../util.js';
+import { checkForTransfer, getMode, partitionSections, stationIdsToCoordinates, LINE_MODES } from '../util.js';
 export class Line extends React.Component {
 
   constructor(props) {
@@ -314,7 +314,7 @@ export class Line extends React.Component {
 
       const sections = partitionSections(this.props.line, this.props.system.stations);
       for (const section of sections) {
-        const sectionCoords = section.map(id => [this.props.system.stations[id].lng, this.props.system.stations[id].lat]);
+        const sectionCoords = stationIdsToCoordinates(this.props.system.stations, section);
         const routeDistance = turfLength(turfLineString(sectionCoords));
         const accelDistance = mode.speed / mode.acceleration;
         if (routeDistance < accelDistance * 2) { // route is shorter than distance accelerating to top speed + distance delelerating from top speed

diff --git a/app/src/js/components/Map.js b/app/src/js/components/Map.js
@@ -5,7 +5,7 @@ import turfCircle from '@turf/circle';
 import { lineString as turfLineString } from '@turf/helpers';
 import turfLength from '@turf/length';
 
-import { checkForTransfer, getMode, partitionSections } from '../util.js';
+import { checkForTransfer, getMode, partitionSections, stationIdsToCoordinates, floatifyStationCoord } from '../util.js';
 
 mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
 const LIGHT_STYLE = 'mapbox://styles/mapbox/light-v10';
@@ -157,7 +157,7 @@ export function Map(props) {
     let existingLayer = map.getLayer(focusLayerId);
 
     if (props.focus && props.focus.line && (props.focus.line.stationIds || []).length) {
-      const coords = props.focus.line.stationIds.map(id => [props.system.stations[id].lng, props.system.stations[id].lat]);
+      const coords = stationIdsToCoordinates(props.system.stations, props.focus.line.stationIds);
       const focusFeature = {
         "type": "Feature",
         "properties": {
@@ -386,7 +386,7 @@ export function Map(props) {
 
       const sections = partitionSections(line, props.system.stations);
       let sectionIndex = getSectionIndex(sections, vehicleValues.prevStationId, vehicleValues.prevSectionIndex, vehicleValues.forward);
-      let sectionCoords = sections[sectionIndex].map(id => [props.system.stations[id].lng, props.system.stations[id].lat]);
+      let sectionCoords = stationIdsToCoordinates(props.system.stations, sections[sectionIndex]);
       let backwardCoords = sectionCoords.slice().reverse();
 
       if (!(sectionCoords || []).length) {
@@ -543,7 +543,7 @@ export function Map(props) {
             vehicleValues.forward = vehicleValues.isCircular ? vehicleValues.forward : !vehicleValues.forward; // circular lines do not switch direction
           }
 
-          vehicleValues.sectionCoords.forwards = vehicleValues.sections[vehicleValues.sectionIndex].map(id => [props.system.stations[id].lng, props.system.stations[id].lat]);
+          vehicleValues.sectionCoords.forwards = stationIdsToCoordinates(props.system.stations, vehicleValues.sections[vehicleValues.sectionIndex]);
           vehicleValues.sectionCoords.backwards = vehicleValues.sectionCoords.forwards.slice().reverse();
           vehicleValues.routeDistance = turfLength(turfLineString(vehicleValues.sectionCoords.forwards));
 
@@ -602,16 +602,17 @@ export function Map(props) {
         const pin = document.getElementById('js-Map-station--' + id);
         const circleId = 'js-Map-focusCircle--' + id;
         if (stationKeys.includes(id) || props.initial) {
+          const station = floatifyStationCoord(stations[id]);
           if (pin) {
             pin.parentNode.removeChild(pin);
           }
 
-          if (props.viewOnly && stations[id].isWaypoint) {
+          if (props.viewOnly && station.isWaypoint) {
             // do not show waypoints in viewonly mode
             continue;
           }
 
-          const { lng, lat } = stations[id];
+          const { lng, lat } = station;
 
           let color = '#888';
           let hasTransfer = false;
@@ -646,7 +647,7 @@ export function Map(props) {
           let el = document.createElement('button');
           el.id = 'js-Map-station--' + id;
           el.className = 'js-Map-station Map-station';
-          if (stations[id].isWaypoint) {
+          if (station.isWaypoint) {
             el.className += ' Map-station--waypoint';
           } else if (hasTransfer) {
             el.className += ' Map-station--interchange';
@@ -655,7 +656,7 @@ export function Map(props) {
           if (id === focusedId) {
             el.className += ' js-Map-station--focused Map-station--focused';
 
-            if (!stations[id].isWaypoint && !map.getLayer(circleId)) {
+            if (!station.isWaypoint && !map.getLayer(circleId)) {
               const circleData = turfCircle([parseFloat(lng), parseFloat(lat)], 0.5, {units: 'miles'});
               const circleLayer = {
                 "type": "line",
@@ -677,7 +678,7 @@ export function Map(props) {
               circleLayer.id = circleId;
               circleLayer.source.data = circleData;
               map.addLayer(circleLayer);
-            } else if (stations[id].isWaypoint && map.getLayer(circleId)) {
+            } else if (station.isWaypoint && map.getLayer(circleId)) {
               map.removeLayer(circleId);
               map.removeSource(circleId);
             }
@@ -686,8 +687,8 @@ export function Map(props) {
             map.removeSource(circleId);
           }
 
-          el.dataset.tip = stations[id].isWaypoint ? 'Waypoint' : stations[id].name || 'Station';
-          el.innerHTML = stations[id].isWaypoint ? svgWaypoint : (hasTransfer ? svgInterchange : svgStation);
+          el.dataset.tip = station.isWaypoint ? 'Waypoint' : station.name || 'Station';
+          el.innerHTML = station.isWaypoint ? svgWaypoint : (hasTransfer ? svgInterchange : svgStation);
 
           el.addEventListener('click', (e) => {
             props.onStopClick(id);
@@ -732,7 +733,7 @@ export function Map(props) {
           continue;
         }
 
-        const coords = lines[lineKey].stationIds.map(id => [stations[id].lng, stations[id].lat]);
+        const coords = stationIdsToCoordinates(stations, lines[lineKey].stationIds);
         if (coords.length > 1) {
           const feature = {
             "type": "Feature",
@@ -793,7 +794,7 @@ export function Map(props) {
           },
           "geometry": {
             "type": "LineString",
-            "coordinates": interlineSegments[segmentKey].stationIds.map(id => [stations[id].lng, stations[id].lat])
+            "coordinates": stationIdsToCoordinates(stations, interlineSegments[segmentKey].stationIds)
           }
         }
 

diff --git a/app/src/js/components/ResultMap.js b/app/src/js/components/ResultMap.js
@@ -1,6 +1,8 @@
 import React, { useState, useEffect, useRef } from 'react';
 import mapboxgl from 'mapbox-gl';
 
+import { stationIdsToCoordinates } from '../util.js';
+
 mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
 const LIGHT_STYLE = 'mapbox://styles/mapbox/light-v10';
 const DARK_STYLE = 'mapbox://styles/mapbox/dark-v10';
@@ -151,7 +153,7 @@ export function ResultMap(props) {
 
     let updatedLineFeatures = {};
     for (const lineKey of Object.keys(lines || {})) {
-      const coords = lines[lineKey].stationIds.map(id => [stations[id].lng, stations[id].lat]);
+      const coords = stationIdsToCoordinates(stations, lines[lineKey].stationIds);
       if (coords.length > 1) {
         const feature = {
           "type": "Feature",
@@ -202,7 +204,7 @@ export function ResultMap(props) {
           },
           "geometry": {
             "type": "LineString",
-            "coordinates": interlineSegments[segmentKey].stationIds.map(id => [stations[id].lng, stations[id].lat])
+            "coordinates": stationIdsToCoordinates(stations, interlineSegments[segmentKey].stationIds)
           }
         }
 

diff --git a/app/src/js/components/Station.js b/app/src/js/components/Station.js
@@ -9,7 +9,7 @@ import turfArea from '@turf/area';
 import turfDestination from '@turf/destination';
 import turfIntersect from '@turf/intersect';
 
-import { sortLines, getDistance } from '../util.js';
+import { sortLines, getDistance, floatifyStationCoord } from '../util.js';
 import loading from '../../assets/loading.gif';
 
 export class Station extends React.Component {
@@ -75,7 +75,8 @@ export class Station extends React.Component {
   }
 
   getInfo() {
-    const point = turfPoint([this.props.station.lng, this.props.station.lat]);
+    const station = floatifyStationCoord(this.props.station);
+    const point = turfPoint([ station.lng, station.lat ]);
     const distance = 0.25;
     const options = {units: 'miles'};
     const bearingMap = {
@@ -112,7 +113,6 @@ export class Station extends React.Component {
     const parkQuery = `https://overpass-api.de/api/interpreter?data=[out:json];(node[leisure=park](${bbox});way[leisure=park](${bbox});relation[leisure=park](${bbox}););out;>;out skel;`;
     let parkPromise = this.fetchAndHandleParks(encodeURI(parkQuery), bboxFeature);
 
-    let station = this.props.station;
     Promise.all([buildingPromise, parkPromise])
     .then((values) => {
       if (values[0].areaByUsage) {

diff --git a/app/src/js/util.js b/app/src/js/util.js
@@ -149,6 +149,28 @@ export function checkForTransfer(stationId, currLine, otherLine) {
   return false;
 }
 
+export function floatifyStationCoord(station) {
+  if (station == null) {
+    return station;
+  }
+
+  let { lng, lat } = station;
+  if (typeof lng === 'string') {
+    station.lng = parseFloat(lng)
+  }
+  if (typeof lat === 'string') {
+    station.lat = parseFloat(lat)
+  }
+  return station;
+}
+
+export function stationIdsToCoordinates(stations, stationIds) {
+  return stationIds.map(id => {
+    let { lng, lat } = floatifyStationCoord(stations[id]);
+    return [ lng, lat ];
+  });
+}
+
 // split a line into sections
 // a section is the path between two non-waypoint stations, or a waypoint at the end of a line
 export function partitionSections(line, stations) {
@@ -196,8 +218,11 @@ export function buildInterlineSegments(system, lineKeys = [], thickness = 8) {
       const nextStationId = line.stationIds[i + 1];
       const orderedPair = [currStationId, nextStationId].sort();
 
-      const slope = (system.stations[currStationId].lat - system.stations[nextStationId].lat) / (system.stations[currStationId].lng - system.stations[nextStationId].lng);
-      const currNorthbound = system.stations[currStationId].lat < system.stations[nextStationId].lat;
+      const currStation = floatifyStationCoord(system.stations[currStationId]);
+      const nextStation = floatifyStationCoord(system.stations[nextStationId]);
+
+      const slope = (currStation.lat - nextStation.lat) / (currStation.lng - nextStation.lng);
+      const currNorthbound = currStation.lat < nextStation.lat;
 
       for (const lineKeyBeingChecked in system.lines) {
         const lineBeingChecked = system.lines[lineKeyBeingChecked];