Show all types for a location on the map

src/components/connect/connectRoutes.js

@@ -119,7 +119,10 @@ const connectRoutes = [
    * - fetch data from backend
    * - simplify to keep just the currently selected language
    */
-  <Route key="connect-types" path={['/map', '/list', '/locations', '/reviews']}>
+  <Route
+    key="connect-types"
+    path={['/map', '/list', '/locations', '/reviews', '/settings']}
+  >
     <ConnectTypes />
   </Route>,
   /*

src/components/map/Location.js

@@ -4,12 +4,12 @@ import styled from 'styled-components/macro'
 import ResetButton from '../ui/ResetButton'
 import MapLabel from './MapLabel'
 import { BackgroundMapPin, MapPin } from './Pins'
+import TypeLabels from './TypeLabels'
 
 /**
  * Component for a location displayed on the map.
  * @param {function} onClick - The handler called when this location is clicked
- * @param {string} commonName - The common name of the location
- * @param {string} scientificName - The scientific name of the location
+ * @param {Array} types - The types associated with the location
  * @param {boolean} showLabel - Whether to show the label
  */
 const LocationButton = styled(ResetButton)`
@@ -41,50 +41,25 @@ const TooltipLabel = styled(MapLabel)`
   }
 `
 
-const ScientificName = styled.span`
-  font-style: italic;
-`
-
 const Location = memo(
-  ({
-    showLabel,
-    commonName,
-    scientificName,
-    selected,
-    editing,
-    onClick,
-    ...props
-  }) => {
-    const label = commonName || scientificName
-    const showScientificName = !commonName && scientificName
-
-    return (
-      <>
-        {selected && !editing && <MapPin />}
-        {editing && <BackgroundMapPin />}
-        <LocationButton onClick={onClick} {...props}>
-          {!showLabel && (
-            <TooltipLabel>
-              {showScientificName ? (
-                <ScientificName>{label}</ScientificName>
-              ) : (
-                label
-              )}
-            </TooltipLabel>
-          )}
-        </LocationButton>
-        {showLabel && (
-          <MapLabel>
-            {showScientificName ? (
-              <ScientificName>{label}</ScientificName>
-            ) : (
-              label
-            )}
-          </MapLabel>
+  ({ showLabel, typeIds, selected, editing, onClick, ...props }) => (
+    <>
+      {selected && !editing && <MapPin />}
+      {editing && <BackgroundMapPin />}
+      <LocationButton onClick={onClick} {...props}>
+        {!showLabel && (
+          <TooltipLabel>
+            <TypeLabels typeIds={typeIds} />
+          </TooltipLabel>
         )}
-      </>
-    )
-  },
+      </LocationButton>
+      {showLabel && (
+        <MapLabel>
+          <TypeLabels typeIds={typeIds} />
+        </MapLabel>
+      )}
+    </>
+  ),
 )
 
 Location.displayName = 'Location'

src/components/map/MapPage.js

@@ -149,7 +149,6 @@ const MapPage = ({ isDesktop }) => {
   const history = useAppHistory()
   const dispatch = useDispatch()
   const handleViewChangeRef = useRef(() => void 0)
-  const typesAccess = useSelector((state) => state.type.typesAccess)
 
   const [draggedPosition, setDraggedPosition] = useState(null)
 
@@ -426,10 +425,7 @@ const MapPage = ({ isDesktop }) => {
               selected={location.id === locationId}
               editing={isEditingLocation && location.id === locationId}
               showLabel={showLabels}
-              commonName={typesAccess.getCommonName(location.type_ids[0])}
-              scientificName={typesAccess.getScientificName(
-                location.type_ids[0],
-              )}
+              typeIds={location.type_ids}
             />
           ))}
           {(isEditingLocation || isAddingLocation) && draggedPosition && (

src/components/map/TypeLabels.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import styled from 'styled-components/macro'
+
+const TypeList = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+const TypeItem = styled.span`
+  opacity: ${(props) => (props.isSelected ? 1.0 : 0.5)};
+`
+
+const ScientificName = styled(TypeItem)`
+  font-style: italic;
+`
+
+const TypeLabels = ({ typeIds }) => {
+  const { types: selectedTypes } = useSelector((state) => state.filter)
+  const typesAccess = useSelector((state) => state.type.typesAccess)
+
+  return (
+    <TypeList>
+      {(typeIds || []).map((id, index) => {
+        const type = typesAccess.getType(id)
+        return !type ? null : !type.commonName && type.scientificName ? (
+          <ScientificName
+            key={index}
+            isSelected={selectedTypes.includes(type.id)}
+          >
+            {type.scientificName}
+          </ScientificName>
+        ) : (
+          <TypeItem key={index} isSelected={selectedTypes.includes(type.id)}>
+            {type.commonName || type.scientificName}
+          </TypeItem>
+        )
+      })}
+    </TypeList>
+  )
+}
+
+export default TypeLabels