Add Retail Locations to map

src/components/RetailLocationMarker.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import L from 'leaflet';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faArrowsRotate,
+  faDirections, faMapMarkedAlt, faTicket,
+} from '@fortawesome/free-solid-svg-icons';
+import {
+  Marker, Popup, Tooltip,
+} from 'react-leaflet';
+import retailLocationFullServiceIcon from '../resources/retail-full-service.svg';
+import retailLocationReloadOnlyIcon from '../resources/retail-reload-only.svg';
+
+function RetailLocationMarker({
+  retailLocation,
+}) {
+  const retailLocationMarkerOptions = {
+    iconUrl: retailLocation.can_buy_media ? retailLocationFullServiceIcon : retailLocationReloadOnlyIcon,
+    iconSize: retailLocation.can_buy_media ? [20, 20] : [15, 15],
+    shadowUrl: null,
+  };
+
+  const headerColor = retailLocation.can_buy_media ? 'purple' : '#444444';
+
+  const retailLocationMarkerIcon = L.Icon.extend({ options: retailLocationMarkerOptions });
+  const icon = new retailLocationMarkerIcon();
+
+  const content = (
+    <div style={{ minWidth: '300px', maxWidth: '500px', overflow: 'hidden' }}>
+      <div className="stop-name d-flex" style={{backgroundColor: headerColor}}>
+        <div className="flex-grow-1">
+          {retailLocation.name}
+        </div>
+      </div>
+      <div>
+        <dl className={'row'}>
+          <dt className={'col-5'}><FontAwesomeIcon icon={faMapMarkedAlt} fixedWidth={true}></FontAwesomeIcon> Address</dt>
+          <dd className={'col-7'}>{retailLocation.address}</dd>
+          <dt className={'col-5'}><FontAwesomeIcon icon={faTicket} fixedWidth={true}></FontAwesomeIcon> Buy Card?</dt>
+          <dd className={'col-7'}>{retailLocation.can_buy_media ? 'Yes' : 'No'}</dd>
+          <dt className={'col-5'}><FontAwesomeIcon icon={faArrowsRotate} fixedWidth={true}></FontAwesomeIcon> Reload?</dt>
+          <dd className={'col-7'}>{retailLocation.can_reload_media ? 'Yes' : 'No'}</dd>
+        </dl>
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+      <Marker position={[retailLocation.latitude, retailLocation.longitude]} icon={icon}>
+        {!L.Browser.mobile && (
+          <Tooltip>{content}</Tooltip>
+        )}
+        <Popup>
+          {content}
+          <div className="text-center my-2"><a href={`https://www.google.com/maps/dir/?api=1&travelmode=transit&destination=${retailLocation.latitude}%2C${retailLocation.longitude}`} className="btn bg-secondary text-light btn-sm" target="_blank" rel="noreferrer"><FontAwesomeIcon icon={faDirections} fixedWidth={true} /> Directions</a></div>
+        </Popup>
+      </Marker>
+    </>
+  );
+}
+
+RetailLocationMarker.propTypes = {
+  retailLocation: PropTypes.object.isRequired,
+};
+
+RetailLocationMarker.defaultProps = {
+  retailLocation: {},
+};
+
+export default RetailLocationMarker;

src/components/RetailLocationMarker.test.js

@@ -0,0 +1,17 @@
+/* globals test */
+
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import RetailLocationMarker from './RetailLocationMarker';
+import { MapContainer } from 'react-leaflet';
+
+const retailLocations = require('../fixtures/retail_locations.json');
+
+test('renders RetailLocationMarker', () => {
+  const div = document.createElement('div');
+  const root = createRoot(div);
+  const retailLocation = retailLocations.data[0];
+  root.render(<MapContainer>
+    <RetailLocationMarker retailLocation={retailLocation} />
+  </MapContainer>);
+});

src/components/TransitMap.js

@@ -16,6 +16,7 @@ import LocationMarker from './LocationMarker';
 import BCycleMarker from './BCycleMarker';
 import LocateButton from './LocateButton';
 import countyBorders from '../lib/davidson_county_borders.json';
+import RetailLocationMarker from './RetailLocationMarker';
 
 // Fix paths for default marker icons
 delete L.Icon.Default.prototype._getIconUrl;
@@ -26,7 +27,7 @@ L.Icon.Default.mergeOptions({
 });
 
 function TransitMap({
-  routes, agencies, vehicleMarkers, routeShapes, routeStops, alerts, tripUpdates, map, bCycleStations, mapControls, center, zoom,
+  routes, agencies, vehicleMarkers, routeShapes, routeStops, alerts, tripUpdates, map, bCycleStations, retailLocations, mapControls, center, zoom,
 }) {
   const [shapes, setShapes] = useState(routeShapes);
   const doSetShapes = useCallback((val) => {
@@ -162,6 +163,15 @@ function TransitMap({
              </LayerGroup>
           </LayersControl.Overlay>
         }
+        {retailLocations.length > 0
+          && <LayersControl.Overlay checked={false} name="QuickTicket Retailers">
+            <LayerGroup>
+              {retailLocations.map((item, _index) => (
+                  <RetailLocationMarker key={item.location_code} retailLocation={item}></RetailLocationMarker>
+              ))}
+             </LayerGroup>
+          </LayersControl.Overlay>
+        }
 
         <LayersControl.Overlay checked={true} name="City Border">
           <GeoJSON data={countyBorders} style={{
@@ -199,6 +209,7 @@ TransitMap.propTypes = {
   tripUpdates: PropTypes.array,
   map: PropTypes.any.isRequired,
   bCycleStations: PropTypes.array,
+  retailLocations: PropTypes.array,
   mapControls: PropTypes.object,
   center: PropTypes.any,
   zoom: PropTypes.number,
@@ -213,6 +224,7 @@ TransitMap.defaultProps = {
   alerts: [],
   tripUpdates: [],
   bCycleStations: [],
+  retailLocations: [],
   mapControls: {},
   center: [36.166512, -86.781581],
   zoom: 12,

src/controllers/Main.js

@@ -23,6 +23,7 @@ function Main() {
   const [tripUpdates, setTripUpdates] = useState([]);
   const [bCycleStations, setBCycleStationData] = useState([]);
   const [bCycleStationsStatus, setBCycleStationStatusData] = useState([]);
+  const [retailLocations, setRetailLocationsData] = useState([]);
   const [isRoutesLoaded, setRoutesLoaded] = useState(false);
   const [isAlertLoaded, setAlertLoaded] = useState(false);
   const [isTripUpdateLoaded, setTripUpdateLoaded] = useState(false);
@@ -69,6 +70,11 @@ function Main() {
       .then((s) => setBCycleStationStatusData(s.data.stations))
       .catch((error) => setDataFetchError(error));
 
+    getJSON(`${GTFS_BASE_URL}/retail_locations.json`, { params: { per_page: 2000 } })
+      .then((r) => r.data.filter((i) => i.is_active))
+      .then((r) => setRetailLocationsData(r))
+      .catch((error) => setDataFetchError(error));
+
     // Refresh position data at set interval
     const refreshPositionsInterval = setInterval(() => {
       if (!isUIReady) {
@@ -155,7 +161,7 @@ function Main() {
       <LoadingScreen hideTitleBar={true}></LoadingScreen>
     ) : (
       <div className="main">
-        <TransitMap routes={routes} agencies={agencies} vehicleMarkers={vehicleMarkers} shapes={[]} alerts={allAlerts} tripUpdates={tripUpdates} map={map} bCycleStations={bCycleStations} mapControls={mapControls}></TransitMap>
+        <TransitMap routes={routes} agencies={agencies} vehicleMarkers={vehicleMarkers} shapes={[]} alerts={allAlerts} tripUpdates={tripUpdates} map={map} bCycleStations={bCycleStations} retailLocations={retailLocations} mapControls={mapControls}></TransitMap>
         <AlertModal alerts={allAlerts} show={alertModalShow} onHide={() => setAlertModalShow(false)} routes={routes}></AlertModal>
       </div>
     )