Fix marker icon and occurrence data feature popup (#933)

bcgov · Jan 31, 2023 · 598464b · 598464b
1 parent a746dba
commit 598464b
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 10 deletions.
diff --git a/app/src/components/map/FeaturePopup.tsx b/app/src/components/map/FeaturePopup.tsx
@@ -38,7 +38,7 @@ export type BoundaryCentroidFeatureProperties = {
 };
 
 export enum COMMON_METADATA_PROPERTIES {
-  'taxonID' = 'Species',
+  'vernacularName' = 'Species',
   'individualCount' = 'Count',
   'eventDate' = 'Date',
   'lifeStage' = 'Life Stage',
@@ -93,6 +93,28 @@ const useStyles = makeStyles(() => ({
   date: {
     margin: 0,
     lineHeight: 'unset'
+  },
+  divider: {
+    marginTop: 1
+  },
+  table: {
+    '& td': {
+      paddingTop: '8px',
+      paddingBottom: '8px',
+      paddingLeft: 0,
+      paddingRight: 0,
+      fontSize: '13px'
+    }
+  },
+  box: { gap: 1 },
+  nextPrevButton: {
+    fontWeight: 700,
+    '& .MuiButton-startIcon': {
+      mr: 0.2
+    }
+  },
+  downloadButton: {
+    color: '#ffffff !important'
   }
 }));
 
@@ -192,9 +214,9 @@ const FeaturePopup: React.FC<React.PropsWithChildren<{ submissionSpatialComponen
   return (
     <ModalContentWrapper>
       <MetadataHeader type={type} index={currentIndex} length={data.length} />
-      <Divider></Divider>
+      <Divider className={classes.divider}></Divider>
       <Collapse in={metadataLoader.isReady}>
-        <Table>
+        <Table className={classes.table}>
           <TableBody>
             {filteredMetadata.map(([key, propertyName]) => {
               return (
@@ -207,30 +229,37 @@ const FeaturePopup: React.FC<React.PropsWithChildren<{ submissionSpatialComponen
           </TableBody>
         </Table>
       </Collapse>
-      <Box display="flex" justifyContent="space-between" mt={1.5}>
+      <Box display="flex" justifyContent="space-between" mt={1.5} className={classes.box}>
         {!isEmpty && data.length > 1 && (
-          <Box display="flex">
+          <Box display="flex" className={classes.box}>
             <Button
               size="small"
               variant="text"
               style={{ textTransform: 'uppercase' }}
               startIcon={<Icon path={mdiChevronLeft} size={1} />}
-              onClick={() => handlePrev()}>
+              onClick={() => handlePrev()}
+              className={classes.nextPrevButton}>
               Prev
             </Button>
             <Button
               size="small"
               variant="text"
               style={{ textTransform: 'uppercase' }}
               endIcon={<Icon path={mdiChevronRight} size={1} />}
-              onClick={() => handleNext()}>
+              onClick={() => handleNext()}
+              className={classes.nextPrevButton}>
               Next
             </Button>
           </Box>
         )}
         {metadataObjectUrl && (
           <Box>
-            <Button href={metadataObjectUrl} size="small" variant="contained" color="primary">
+            <Button
+              href={metadataObjectUrl}
+              size="small"
+              variant="contained"
+              color="primary"
+              className={classes.downloadButton}>
               Download Records
             </Button>
           </Box>

diff --git a/app/src/components/map/MapContainer.tsx b/app/src/components/map/MapContainer.tsx
@@ -35,7 +35,6 @@ import WFSFeatureGroup, { IWFSParams } from './WFSFeatureGroup';
 */
 //@ts-ignore
 delete L.Icon.Default.prototype._getIconUrl;
-
 L.Icon.Default.mergeOptions({
   iconRetinaUrl: iconRetina,
   iconUrl: icon,

diff --git a/app/src/styles.scss b/app/src/styles.scss
@@ -76,3 +76,72 @@ h3.MuiTypography-root + p {
   margin-left: calc(50% - 20px);
   margin-right: calc(50% - 20px);
 }
+
+.marker-cluster-small {
+  background-color: rgba(31, 102, 229, 0.5);
+}
+.marker-cluster-small div {
+  background-color: rgba(31, 102, 229, 1);
+}
+
+.marker-cluster-medium {
+  background-color: rgba(241, 211, 87, 0.6);
+}
+.marker-cluster-medium div {
+  background-color: rgba(240, 194, 12, 0.6);
+}
+
+.marker-cluster-large {
+  background-color: rgba(253, 156, 115, 0.6);
+}
+.marker-cluster-large div {
+  background-color: rgba(241, 128, 23, 0.6);
+}
+
+/* IE 6-8 fallback colors */
+.leaflet-oldie .marker-cluster-small {
+  background-color: rgb(181, 226, 140);
+}
+
+.leaflet-oldie .marker-cluster-small div {
+  background-color: rgb(110, 204, 57);
+}
+
+.leaflet-oldie .marker-cluster-medium {
+  background-color: rgb(241, 211, 87);
+}
+
+.leaflet-oldie .marker-cluster-medium div {
+  background-color: rgb(240, 194, 12);
+}
+
+.leaflet-oldie .marker-cluster-large {
+  background-color: rgb(253, 156, 115);
+}
+
+.leaflet-oldie .marker-cluster-large div {
+  background-color: rgb(241, 128, 23);
+}
+
+.marker-cluster {
+  background-clip: padding-box;
+  border-radius: 12px;
+}
+
+.marker-cluster div {
+  width: 24px;
+  height: 24px;
+  margin-left: 0px;
+  margin-top: 0px;
+
+  text-align: center;
+  border-radius: 12px;
+  font-family: 'BCSans';
+  font-weight: 700;
+  font-size: 11px;
+  color: #ffffff;
+}
+
+.marker-cluster span {
+  line-height: 24px;
+}
diff --git a/database/src/seeds/02_dwc_spatial_transform.ts b/database/src/seeds/02_dwc_spatial_transform.ts
@@ -75,7 +75,7 @@ const insertSpatialTransform = () => `
                             , 'geometry', jsonb_build_object('type', 'Point', 'coordinates', json_build_array(n.x, n.y))
                             , 'properties', jsonb_build_object('type', 'Occurrence', 'dwc', jsonb_build_object(
                               'type', 'PhysicalObject', 'basisOfRecord', 'Occurrence', 'datasetID', n.occurrence_submission_id, 'occurrenceID', n.occ->'occurrenceID'
-                              , 'sex', n.occ->'sex', 'lifeStage', n.occ->'lifeStage', 'taxonID', n.occ->'taxonID', 'individualCount', n.occ->'individualCount'
+                              , 'sex', n.occ->'sex', 'lifeStage', n.occ->'lifeStage', 'taxonID', n.occ->'taxonID', 'vernacularName', n.occ->'vernacularName', 'individualCount', n.occ->'individualCount'
                               , 'eventDate', n.evn->'eventDate', 'verbatimSRS', n.evn->'verbatimSRS', 'verbatimCoordinates', n.evn->'verbatimCoordinates'
                               ))))
                       )result_data