diff --git a/src/assets/css/vars.css b/src/assets/css/vars.css index 5c79938..bc03c7e 100644 --- a/src/assets/css/vars.css +++ b/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 { diff --git a/src/components/Map/icons/AssertedDistribution.js b/src/components/Map/icons/AssertedDistribution.js new file mode 100644 index 0000000..f3bc761 --- /dev/null +++ b/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] +}) diff --git a/src/components/Map/icons/CollectionObject.js b/src/components/Map/icons/CollectionObject.js new file mode 100644 index 0000000..462814f --- /dev/null +++ b/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] +}) diff --git a/src/components/Map/markers/index.js b/src/components/Map/icons/Georeference.js similarity index 76% rename from src/components/Map/markers/index.js rename to src/components/Map/icons/Georeference.js index af9df49..75ab09e 100644 --- a/src/components/Map/markers/index.js +++ b/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] diff --git a/src/components/Map/icons/TypeMaterial.js b/src/components/Map/icons/TypeMaterial.js new file mode 100644 index 0000000..ca5d9cb --- /dev/null +++ b/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] +}) diff --git a/src/components/Map/icons/index.js b/src/components/Map/icons/index.js new file mode 100644 index 0000000..2f9fb72 --- /dev/null +++ b/src/components/Map/icons/index.js @@ -0,0 +1,4 @@ +export * from './AssertedDistribution' +export * from './CollectionObject' +export * from './Georeference' +export * from './TypeMaterial' diff --git a/src/components/Map/shapes/AssertedDistribution.js b/src/components/Map/shapes/AssertedDistribution.js new file mode 100644 index 0000000..3af620d --- /dev/null +++ b/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 +}) diff --git a/src/components/Map/shapes/CollectionObject.js b/src/components/Map/shapes/CollectionObject.js new file mode 100644 index 0000000..6350b1d --- /dev/null +++ b/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 +}) diff --git a/src/components/Map/shapes/TypeMaterial.js b/src/components/Map/shapes/TypeMaterial.js new file mode 100644 index 0000000..7b8ef94 --- /dev/null +++ b/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 +}) diff --git a/src/components/Map/shapes/index.js b/src/components/Map/shapes/index.js new file mode 100644 index 0000000..557a2f6 --- /dev/null +++ b/src/components/Map/shapes/index.js @@ -0,0 +1,3 @@ +export * from './AssertedDistribution' +export * from './CollectionObject' +export * from './TypeMaterial' diff --git a/src/components/Map/utils/geojsonOptions.js b/src/components/Map/utils/geojsonOptions.js index 6fcf0ec..441bbc7 100644 --- a/src/components/Map/utils/geojsonOptions.js +++ b/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] } } }) diff --git a/tailwind.config.js b/tailwind.config.js index d773c81..f5d5426 100644 --- a/tailwind.config.js +++ b/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: {