Add markers colors for different type

src/assets/css/vars.css

@@ -11,10 +11,10 @@
   --color-base-border: 203, 213, 225;
   --color-base-content: 0, 0, 0;
 
-  --color-map-georeference-marker: 239, 68, 68;
+  --color-map-georeference: 239, 68, 68;
   --color-map-asserted: 249, 115, 22;
-  --color-map-type-material: 51,136,255;
-  --color-map-collection-object: 51,136,255;
+  --color-map-type-material: 51, 136, 255;
+  --color-map-collection-object: 239, 68, 68;
 }
 
 .dark {

src/components/Map/icons/AssertedDistribution.js

@@ -0,0 +1,7 @@
+import L from 'leaflet'
+
+export const AssertedDistribution = L.divIcon({
+  className: 'bg-map-asserted bg-opacity-50 rounded-full',
+  iconSize: [8, 8],
+  iconAnchor: [4, 4]
+})

src/components/Map/icons/CollectionObject.js

@@ -0,0 +1,7 @@
+import L from 'leaflet'
+
+export const CollectionObject = L.divIcon({
+  className: 'bg-map-collection-object bg-opacity-50 rounded-full',
+  iconSize: [8, 8],
+  iconAnchor: [4, 4]
+})

src/components/Map/markers/index.js → src/components/Map/icons/Georeference.js

@@ -1,6 +1,6 @@
 import L from 'leaflet'
 
-export const squareMarker = L.divIcon({
+export const Georeference = L.divIcon({
   className: 'bg-map-georeference bg-opacity-50 rounded-full',
   iconSize: [8, 8],
   iconAnchor: [4, 4]

src/components/Map/icons/TypeMaterial.js

@@ -0,0 +1,7 @@
+import L from 'leaflet'
+
+export const TypeMaterial = L.divIcon({
+  className: 'bg-map-type-material bg-opacity-50 rounded-full',
+  iconSize: [8, 8],
+  iconAnchor: [4, 4]
+})

src/components/Map/icons/index.js

@@ -0,0 +1,4 @@
+export * from './AssertedDistribution'
+export * from './CollectionObject'
+export * from './Georeference'
+export * from './TypeMaterial'

src/components/Map/shapes/AssertedDistribution.js

@@ -0,0 +1,7 @@
+export const AssertedDistribution = ({ 
+  color: 'rgb(var(--color-map-asserted))',
+  weight: 1,
+  dashArray: '3',
+  dashOffset: '3',
+  fillOpacity: 0.5
+})

src/components/Map/shapes/CollectionObject.js

@@ -0,0 +1,5 @@
+export const CollectionObject = ({ 
+  color: `rgb(var(--color-map-collection-object))`,
+  weight: 1,
+  fillOpacity: 0.5
+})

src/components/Map/shapes/TypeMaterial.js

@@ -0,0 +1,5 @@
+export const TypeMaterial = ({ 
+  color: `rgb(var(--color-map-type-material))`,
+  weight: 1,
+  fillOpacity: 0.5
+})

src/components/Map/shapes/index.js

@@ -0,0 +1,3 @@
+export * from './AssertedDistribution'
+export * from './CollectionObject'
+export * from './TypeMaterial'

src/components/Map/utils/geojsonOptions.js

@@ -1,5 +1,6 @@
-import { squareMarker } from "../markers"
-import L from 'leaflet'
+import L, { Icon } from 'leaflet'
+import * as Icons from '../icons'
+import * as Shape from '../shapes'
 
 export default ({
   onEachFeature: (feature, layer) => {
@@ -13,35 +14,17 @@ export default ({
     )
   },
 
-  pointToLayer: (_, latLng) => {
-    return L.marker(latLng, { icon: squareMarker })
+  pointToLayer: (feature, latLng) => {
+    const type = feature.properties?.base.type
+
+    return L.marker(latLng, { icon: Icons[type] || Icon.Georeference })
   },
 
   style: (feature) => {
-    if (feature.properties?.base?.type === 'AssertedDistribution') {
-      return { 
-        color: 'rgb(var(--color-map-asserted))',
-        weight: 1,
-        dashArray: '3',
-        dashOffset: '3',
-        fillOpacity: 0.5
-      }
-    }
-
-    if (feature.properties?.base?.type === 'TypeMaterial') {
-      return { 
-        color: 'rgb(var(--color-map-type-material))',
-        weight: 1,
-        fillOpacity: 0.5
-      }
-    }
-
-    if (feature.properties?.base?.type === 'CollectionObject') {
-      return { 
-        color: 'rgb(var(--color-map-collection-object))',
-        weight: 1,
-        fillOpacity: 0.5
-      }
+    const type = feature.properties?.base.type
+
+    if (Shape[type]) {
+      return Shape[type]
     }
   }
 })

tailwind.config.js

@@ -33,8 +33,10 @@ module.exports = {
         },
 
         map: {
-          georeference: withOpacity('--color-map-georeference-marker'),
-          asserted: withOpacity('--color-map-asserted')
+          georeference: withOpacity('--color-map-georeference'),
+          asserted: withOpacity('--color-map-asserted'),
+          'type-material': withOpacity('--color-map-type-material'),
+          'collection-object': withOpacity('--color-map-collection-object')
         },
 
         primary: {