diff --git a/src/components/map/Location.js b/src/components/map/Location.js
index 59adfb73..aeb5b13e 100644
--- a/src/components/map/Location.js
+++ b/src/components/map/Location.js
@@ -42,20 +42,20 @@ const TooltipLabel = styled(MapLabel)`
`
const Location = memo(
- ({ showLabel, types, selected, editing, onClick, ...props }) => (
+ ({ showLabel, typeIds, selected, editing, onClick, ...props }) => (
<>
{selected && !editing && }
{editing && }
{!showLabel && (
-
+
)}
{showLabel && (
-
+
)}
>
diff --git a/src/components/map/MapPage.js b/src/components/map/MapPage.js
index 53e4f6e2..e6dc74c3 100644
--- a/src/components/map/MapPage.js
+++ b/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,7 +425,7 @@ const MapPage = ({ isDesktop }) => {
selected={location.id === locationId}
editing={isEditingLocation && location.id === locationId}
showLabel={showLabels}
- types={location.type_ids.map((id) => typesAccess.getType(id))}
+ typeIds={location.type_ids}
/>
))}
{(isEditingLocation || isAddingLocation) && draggedPosition && (
diff --git a/src/components/map/TypeLabels.js b/src/components/map/TypeLabels.js
index 30012b2a..49f367ed 100644
--- a/src/components/map/TypeLabels.js
+++ b/src/components/map/TypeLabels.js
@@ -15,31 +15,27 @@ const ScientificName = styled(TypeItem)`
font-style: italic;
`
-const TypeLabels = ({ types }) => {
+const TypeLabels = ({ typeIds }) => {
const { types: selectedTypes } = useSelector((state) => state.filter)
-
- const typeLabels =
- types && types.length > 0
- ? types.map((type) => ({
- label: type.commonName || type.scientificName,
- isScientific: !type.commonName && type.scientificName,
- isSelected: selectedTypes.includes(type.id),
- }))
- : []
+ const typesAccess = useSelector((state) => state.type.typesAccess)
return (
- {typeLabels.map((item, index) =>
- item.isScientific ? (
-
- {item.label}
+ {(typeIds || []).map((id, index) => {
+ const type = typesAccess.getType(id)
+ return !type ? null : !type.commonName && type.scientificName ? (
+
+ {type.scientificName}
) : (
-
- {item.label}
+
+ {type.commonName || type.scientificName}
- ),
- )}
+ )
+ })}
)
}