Pass operator logos to map popup

packages/map-popup/src/MapPopup.story.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import { action } from "@storybook/addon-actions";
+import styled from "styled-components";
+import { Station, Stop } from "@opentripplanner/types";
 import MapPopupContents from "./index";
 
 export default {
@@ -8,6 +10,7 @@ export default {
 
 const STOP = {
   flex: false,
+  gtfsId: "9526",
   id: "9526",
   lat: 45.523009,
   lon: -122.672529,
@@ -64,13 +67,33 @@ const FLOATING_CAR = {
   y: 52.52
 };
 
+const getEntityPrefixExample = (entity: Stop | Station) => {
+  const DemoIcon = styled.span`
+    background-color: blue;
+    border-radius: 50px;
+    color: white;
+    margin-right: 0.5ch;
+    padding: 2px;
+  `;
+
+  return <DemoIcon>{entity.name?.charAt(0)}</DemoIcon>;
+};
+
 export const StopEntity = (): JSX.Element => (
   <MapPopupContents
     entity={STOP}
     setLocation={action("setLocation")}
     setViewedStop={action("setViewedStop")}
   />
 );
+export const StopEntitywithEntityPrefix = (): JSX.Element => (
+  <MapPopupContents
+    entity={STOP}
+    getEntityPrefix={() => getEntityPrefixExample(STOP)}
+    setLocation={action("setLocation")}
+    setViewedStop={action("setViewedStop")}
+  />
+);
 
 export const StopEntityNoHandlers = (): JSX.Element => (
   <MapPopupContents entity={STOP} />

packages/map-popup/src/index.tsx

@@ -90,6 +90,7 @@ type Props = {
   configCompanies?: ConfiguredCompany[];
   entity: Entity
   getEntityName?: (entity: Entity, configCompanies: Company[],) => string;
+  getEntityPrefix?: (entity: Entity) => JSX.Element
   setLocation?: ({ location, locationType }: { location: Location, locationType: string }) => void;
   setViewedStop?: StopEventHandler;
 };
@@ -101,7 +102,7 @@ function entityIsStation(entity: Entity): entity is Station {
 /**
  * Renders a map popup for a stop, scooter, or shared bike
  */
-export function MapPopup({ closePopup = null, configCompanies, entity, getEntityName, setLocation, setViewedStop }: Props): JSX.Element {
+export function MapPopup({ closePopup = null, configCompanies, entity, getEntityName, getEntityPrefix, setLocation, setViewedStop }: Props): JSX.Element {
   const intl = useIntl()
   if (!entity) return <></>
 
@@ -121,6 +122,7 @@ export function MapPopup({ closePopup = null, configCompanies, entity, getEntity
     <Styled.MapOverlayPopup>
       <FocusTrapWrapper closePopup={closePopup} id={id}>
       <Styled.PopupTitle>
+        {getEntityPrefix && getEntityPrefix(entity)}
         <FormattedMessage
           defaultMessage={defaultMessages["otpUi.MapPopup.popupTitle"]}
           description="Text for title of the popup, contains an optional company name"

packages/otp2-tile-overlay/src/index.tsx

@@ -2,6 +2,7 @@ import EntityPopup from "@opentripplanner/map-popup"
 import {
   ConfiguredCompany,
   MapLocationActionArg,
+  Station,
   Stop,
   StopEventHandler,
 } from "@opentripplanner/types"
@@ -19,6 +20,7 @@ const AREA_TYPES = ["areaStops"]
 const OTP2TileLayerWithPopup = ({
   color,
   configCompanies,
+  getEntityPrefix,
   id,
   network,
   onMapClick,
@@ -33,6 +35,7 @@ const OTP2TileLayerWithPopup = ({
    */
   color?: string;
   configCompanies?: ConfiguredCompany[]
+  getEntityPrefix?: (entity: Stop | Station) => JSX.Element
   id: string
   name?: string
   /**
@@ -183,6 +186,7 @@ const OTP2TileLayerWithPopup = ({
           <EntityPopup
             configCompanies={configCompanies}
             entity={{ ...clickedEntity, id: clickedEntity?.id || clickedEntity?.gtfsId }}
+            getEntityPrefix={getEntityPrefix}
             setLocation={setLocation ? (location) => { setClickedEntity(null); setLocation(location) } : null}
             setViewedStop={setViewedStop ? (stop) => { setClickedEntity(null);setViewedStop(stop) } : null}
           />
@@ -210,7 +214,8 @@ const generateOTP2TileLayers = (
   endpoint: string,
   setLocation?: (location: MapLocationActionArg) => void,
   setViewedStop?: (stop: Stop) => void,
-  configCompanies?: ConfiguredCompany[]
+  configCompanies?: ConfiguredCompany[],
+  getEntityPrefix?: (entity: Stop | Station) => JSX.Element
 ): JSX.Element[] => {
   return [
     <Source
@@ -230,6 +235,7 @@ const generateOTP2TileLayers = (
         <OTP2TileLayerWithPopup
           color={color}
           configCompanies={configCompanies}
+          getEntityPrefix={getEntityPrefix}
           id={id}
           key={id}
           name={name || id}