Merge pull request #115 from SpeciesFileGroup/development

Add custom opacity for shapes and markers
wbbaker · Aug 8, 2023 · 7c5dc3f · 7c5dc3f
2 parents 7a8506f + 3f672c8
commit 7c5dc3f
Show file tree

Hide file tree

Showing 10 changed files with 18 additions and 10 deletions.
diff --git a/src/assets/css/leaflet.css b/src/assets/css/leaflet.css
@@ -1,5 +1,6 @@
 :root {
-  --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
+  --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg)
+    saturate(0.3) brightness(0.7);
 }
 
 /* @media (prefers-color-scheme: dark) {
@@ -8,10 +9,14 @@
   }
 } */
 
+.map-point-marker {
+  opacity: var(--color-map-marker-opacity);
+}
+
 .dark {
   color-scheme: dark;
 
   .map-tiles {
-    filter:var(--map-tiles-filter, none);
+    filter: var(--map-tiles-filter, none);
   }
 }
diff --git a/src/assets/css/vars.css b/src/assets/css/vars.css
@@ -25,6 +25,9 @@
 
   --color-scrollbar-thumb: 156, 163, 175;
   --color-scrollbar-track: 229, 231, 235;
+
+  --color-map-shape-opacity: 0.5;
+  --color-map-marker-opacity: 0.75;
 }
 
 .dark {

diff --git a/src/components/Map/icons/AssertedDistribution.js b/src/components/Map/icons/AssertedDistribution.js
@@ -1,5 +1,5 @@
 export const AssertedDistribution = {
-  className: 'bg-map-asserted bg-opacity-50 rounded-full',
+  className: 'bg-map-asserted rounded-full map-point-marker',
   iconSize: [8, 8],
   iconAnchor: [4, 4]
 }
diff --git a/src/components/Map/icons/CollectionObject.js b/src/components/Map/icons/CollectionObject.js
@@ -1,5 +1,5 @@
 export const CollectionObject = {
-  className: 'bg-map-collection-object bg-opacity-50 rounded-full',
+  className: 'bg-map-collection-object rounded-full map-point-marker',
   iconSize: [8, 8],
   iconAnchor: [4, 4]
 }
diff --git a/src/components/Map/icons/Georeference.js b/src/components/Map/icons/Georeference.js
@@ -1,5 +1,5 @@
 export const Georeference = {
-  className: 'bg-map-georeference bg-opacity-50 rounded-full',
+  className: 'bg-map-georeference rounded-full map-point-marker',
   iconSize: [8, 8],
   iconAnchor: [4, 4]
 }
diff --git a/src/components/Map/icons/TypeMaterial.js b/src/components/Map/icons/TypeMaterial.js
@@ -1,5 +1,5 @@
 export const TypeMaterial = {
-  className: 'bg-map-type-material bg-opacity-50 rounded-full',
+  className: 'bg-map-type-material map-point-marker rounded-full',
   iconSize: [8, 8],
   iconAnchor: [4, 4]
 }
diff --git a/src/components/Map/shapes/Aggregate.js b/src/components/Map/shapes/Aggregate.js
@@ -3,5 +3,5 @@ export const Aggregate = {
   weight: 1,
   dashArray: '3',
   dashOffset: '3',
-  fillOpacity: 0.25
+  fillOpacity: 'var(--color-map-shape-opacity)'
 }
diff --git a/src/components/Map/shapes/AssertedDistribution.js b/src/components/Map/shapes/AssertedDistribution.js
@@ -3,5 +3,5 @@ export const AssertedDistribution = {
   weight: 1,
   dashArray: '3',
   dashOffset: '3',
-  fillOpacity: 0.25
+  fillOpacity: 'var(--color-map-shape-opacity)'
 }
diff --git a/src/components/Map/shapes/CollectionObject.js b/src/components/Map/shapes/CollectionObject.js
@@ -1,5 +1,5 @@
 export const CollectionObject = {
   color: `rgb(var(--color-map-collection-object))`,
   weight: 1,
-  fillOpacity: 0.25
+  fillOpacity: 'var(--color-map-shape-opacity)'
 }
diff --git a/src/components/Map/shapes/TypeMaterial.js b/src/components/Map/shapes/TypeMaterial.js
@@ -1,5 +1,5 @@
 export const TypeMaterial = {
   color: `rgb(var(--color-map-type-material))`,
   weight: 1,
-  fillOpacity: 0.25
+  fillOpacity: 'var(--color-map-shape-opacity)'
 }