diff --git a/src/components/map/Cluster.js b/src/components/map/Cluster.js
index ce54ebb33..cc405cea5 100644
--- a/src/components/map/Cluster.js
+++ b/src/components/map/Cluster.js
@@ -32,6 +32,7 @@ const ClusterContainer = styled(ResetButton)`
&:focus {
outline: none;
}
+ cursor: ${({ onClick }) => (onClick ? 'pointer' : 'unset')};
`
/**
@@ -69,7 +70,7 @@ const Cluster = memo(({ onClick, count }) => (
Cluster.displayName = 'Cluster'
Cluster.propTypes = {
- onClick: PropTypes.func.isRequired,
+ onClick: PropTypes.func,
count: PropTypes.number.isRequired,
}
diff --git a/src/components/map/Location.js b/src/components/map/Location.js
index 0a3aa4c9c..95a179fbc 100644
--- a/src/components/map/Location.js
+++ b/src/components/map/Location.js
@@ -37,6 +37,8 @@ const LocationButton = styled(ResetButton)`
&:focus {
outline: none;
}
+
+ cursor: ${({ onClick }) => (onClick ? 'pointer' : 'unset')};
`
const Label = styled.div`
@@ -60,10 +62,10 @@ const Label = styled.div`
1px 1px 0 ${({ theme }) => theme.background};
`
-const Location = memo(({ label, selected, ...props }) => (
+const Location = memo(({ label, selected, onClick, ...props }) => (
<>
{selected && }
-
+
>
))
@@ -71,7 +73,7 @@ const Location = memo(({ label, selected, ...props }) => (
Location.displayName = 'Location'
Location.propTypes = {
- onClick: PropTypes.func.isRequired,
+ onClick: PropTypes.func,
// TODO: Correct the instance in MapPage
label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
}
diff --git a/src/components/map/Map.js b/src/components/map/Map.js
index 0c4825ecd..94b07042e 100644
--- a/src/components/map/Map.js
+++ b/src/components/map/Map.js
@@ -214,10 +214,14 @@ const Map = ({
{clusters.map((cluster) => (
{
- onClusterClick(cluster)
- event.stopPropagation()
- }}
+ onClick={
+ onClusterClick
+ ? (event) => {
+ onClusterClick(cluster)
+ event.stopPropagation()
+ }
+ : undefined
+ }
count={cluster.count}
lat={cluster.lat}
lng={cluster.lng}
@@ -226,10 +230,14 @@ const Map = ({
{locations.map((location) => (
{
- onLocationClick(location)
- event.stopPropagation()
- }}
+ onClick={
+ onLocationClick
+ ? (event) => {
+ onLocationClick(location)
+ event.stopPropagation()
+ }
+ : undefined
+ }
lat={location.lat}
lng={location.lng}
selected={location.id === activeLocationId}
diff --git a/src/components/map/MapPage.js b/src/components/map/MapPage.js
index 5f440d150..a5c90a001 100644
--- a/src/components/map/MapPage.js
+++ b/src/components/map/MapPage.js
@@ -70,12 +70,17 @@ const MapPage = ({ isDesktop }) => {
}
}, [dispatch, isAddingLocation])
- const handleLocationClick = (location) => {
- history.push({
- pathname: `/locations/${location.id}`,
- state: { fromPage: '/map' },
- })
- }
+ const handleLocationClick = isAddingLocation
+ ? undefined
+ : (location) => {
+ history.push({
+ pathname: `/locations/${location.id}`,
+ state: { fromPage: '/map' },
+ })
+ }
+ const handleClusterClick = isAddingLocation
+ ? undefined
+ : (cluster) => dispatch(clusterClick(cluster))
const stopViewingLocation = () => {
if (isViewingLocation) {
history.push('/map')
@@ -109,15 +114,11 @@ const MapPage = ({ isDesktop }) => {
bootstrapURLKeys={bootstrapURLKeys}
view={view}
geolocation={geolocation}
- clusters={isAddingLocation ? [] : clusters}
- locations={
- isAddingLocation
- ? []
- : allLocations.map((location) => ({
- ...location,
- typeName: getCommonName(location.type_ids[0]),
- }))
- }
+ clusters={clusters}
+ locations={allLocations.map((location) => ({
+ ...location,
+ typeName: getCommonName(location.type_ids[0]),
+ }))}
activeLocationId={locationId || hoveredLocationId}
onViewChange={(newView) => {
dispatch(viewChangeAndFetch(newView))
@@ -128,11 +129,11 @@ const MapPage = ({ isDesktop }) => {
)
}}
onLocationClick={handleLocationClick}
- onClusterClick={(cluster) => dispatch(clusterClick(cluster))}
+ onClusterClick={handleClusterClick}
onNonspecificClick={() => dispatch(stopViewingLocation)}
mapType={settings.mapType}
layerTypes={settings.mapLayers}
- showLabels={settings.showLabels}
+ showLabels={settings.showLabels || isAddingLocation}
showStreetView={streetView}
showBusinesses={settings.showBusinesses}
/>