add: ferry, streetcar, bus, placeholder icons; change: filter out unu…

…sed vehicles (those in routes U, PI, PO); add: error icon for vehicles not in service -- should never see due to filtering out unused vehicles, and indicates issue to users and devs; refactor: make vehicleIcon factory func to output any vehicle icon type

app/main.jsx

@@ -14,7 +14,11 @@ import CustomModal from './components/modal';
 import LocationMarker from './components/location';
 import './main.css';
 
-import busIcon from '../img/icon-mock-bus-front.png'
+import vehicleTypes from '../data/vehicle_types.json'
+import busIcon from '../img/icon-mock-bus.png'
+import streetcarIcon from '../img/icont-mock-streetcar.png'
+import ferryIcon from '../img/icon-mock-ferry.png'
+import errorIcon from '../img/icon-vehicle-error.png'
 import arrowIcon from '../img/arrow_offset.png'
 
 const animatedComponents = makeAnimated();
@@ -28,19 +32,17 @@ const ROUTES = NortaGeoJson
         }
     }, {})
 
-const MARKER_ICON_SIZE = 24
+// These routes don't exist at NORTA.com
+// When a vehicle enters its garage, its route becomes 'U'
+// The definition of PO and PI routes is unknown -> filter out for now
+const NOT_IN_SERVICE_ROUTES = ['U', 'PO', 'PI']
 
-const iconVehicle = new L.Icon({
-    iconUrl: busIcon,
-    iconRetinaUrl: busIcon,
-    iconSize: [MARKER_ICON_SIZE, MARKER_ICON_SIZE],
-    className: 'leaflet-marker-icon'
-});
+const MARKER_ICON_SIZE = 24
 
 const iconArrow = new L.Icon({
     iconUrl: arrowIcon,
     iconRetinaUrl: arrowIcon,
-    // tall so arrow doesn't intersect vehicle
+    // Tall so arrow doesn't intersect vehicle (& match aspect ratio of graphic)
     iconSize: [MARKER_ICON_SIZE, MARKER_ICON_SIZE * 2],
     className: 'leaflet-marker-icon'
 });
@@ -54,9 +56,26 @@ function ArrowMarker(props) {
     return <Marker ref={markerRef} {...props} icon={iconArrow} rotationOrigin="center" />;
 }
 
+function vehicleIcon(image) {
+    return new L.Icon({
+        iconUrl: image,
+        iconRetinaUrl: image,
+        iconSize: [MARKER_ICON_SIZE, MARKER_ICON_SIZE],
+        className: 'leaflet-marker-icon'
+    });
+}
+
+const vehicleIcons = Object.freeze({
+    ferry: vehicleIcon(ferryIcon),
+    streetcar: vehicleIcon(streetcarIcon),
+    bus: vehicleIcon(busIcon),
+    error: vehicleIcon(errorIcon),
+})
+
 function VehicleMarker({ children, ...props }) {
+    const { type } = props
     return (
-        <Marker {...props} icon={iconVehicle} riseOnHover={true}>
+        <Marker {...props} icon={vehicleIcons[type]} riseOnHover={true}>
             {children}
         </Marker>
     )
@@ -101,12 +120,14 @@ class App extends React.Component {
             console.log('onmessage');
             if (!this.state.connected) this.setState({ connected: true })
             const vehicles = JSON.parse(evt.data)
+                // filter out unused vehicles
+                // .filter(v => !NOT_IN_SERVICE_ROUTES.includes(v.rt))
             const lastUpdate = new Date()
             this.setState({
                 vehicles,
                 lastUpdate,
             })
-            console.dir(vehicles)
+            // console.dir(vehicles)
         }
         this.interval = setInterval(() => this.setState({ now: Date.now() }), 1000);
     }
@@ -138,10 +159,11 @@ class App extends React.Component {
                 const coords = [v.lat, v.lon].map(parseFloat)
                 const rotAng = parseInt(v.hdg, 10)
                 const relTime = timestampDisplay(v.tmstmp)
+                const type = vehicleTypes[v.rt]?.type ?? 'error'
                 return (
                     <div key={v.vid + '_container'}>
                         <ArrowMarker key={v.vid + '_arrow'} position={coords} rotationAngle={rotAng} />
-                        <VehicleMarker key={v.vid} position={coords}>
+                        <VehicleMarker key={v.vid} type={type} position={coords}>
                             <Popup>
                                 {v.rt}{v.des ? ' - ' + v.des : ''}
                                 <br/>

data/vehicle_types.json

@@ -0,0 +1,37 @@
+{
+	"1": { "name": "1 Algiers Point Ferry", "type": "ferry" },
+	"103": { "name": "103 General Meyer Local", "type": "bus" },
+	"105": { "name": "105 Algiers Local", "type": "bus" },
+	"11": { "name": "11 Magazine", "type": "bus" },
+	"114A": { "name": "114A Garden Oaks - Sullen", "type": "bus" },
+	"114B": { "name": "114B Garden Oaks - Woodland", "type": "bus" },
+	"12": { "name": "12 St. Charles Streetcar", "type": "streetcar" },
+	"202": { "name": "202 Airport Express", "type": "bus" },
+	"27": { "name": "27 Louisiana", "type": "bus" },
+	"3": { "name": "3 Tulane - Elmwood", "type": "bus" },
+	"31": { "name": "31 Leonidas - Gentilly", "type": "bus" },
+	"32": { "name": "32 Leonidas-Treme", "type": "bus" },
+	"4": { "name": "4 Chalmette Ferry", "type": "ferry" },
+	"45": { "name": "45 Lakeview", "type": "bus" },
+	"46": { "name": "46 Rampart-Loyola Streetcar", "type": "streetcar" },
+	"47": { "name": "47 Canal Streetcar - Cemeteries", "type": "streetcar" },
+	"48": { "name": "48 Canal Streetcar - City Park/Muse", "type": "streetcar" },
+	"49": { "name": "49 UPT-Riverfront", "type": "streetcar" },
+	"51": { "name": "51 St. Bernard-Claiborne", "type": "bus" },
+	"52": { "name": "52 Paris-Broadmoor", "type": "bus" },
+	"53-O": { "name": "53-O Paris - Claiborne OWL", "type": "bus" },
+	"55": { "name": "55 Elysian Fields", "type": "bus" },
+	"57": { "name": "57 Franklin-Freret", "type": "bus" },
+	"61": { "name": "61 Lake Forest - Village de L'Est", "type": "bus" },
+	"62": { "name": "62 Morrison-Bullard", "type": "bus" },
+	"62-O": { "name": "62-O Morrison OWL", "type": "bus" },
+	"66": { "name": "66 Hayne Loop", "type": "bus" },
+	"67": { "name": "67 Michoud Loop", "type": "bus" },
+	"68": { "name": "68 Little Woods Loop", "type": "bus" },
+	"8": { "name": "8 St. Claude - Arabi", "type": "bus" },
+	"80": { "name": "80 Desire-Louisa", "type": "bus" },
+	"84": { "name": "84 Galvez-L9", "type": "bus" },
+	"86": { "name": "86 St. Maurice-Chalmette", "type": "bus" },
+	"9": { "name": "9 Broad - Napoleon", "type": "bus" },
+	"91": { "name": "91 Jackson-Esplanade", "type": "bus" }
+}