diff --git a/src/components/Map/shapes/AssertedDistribution.js b/src/components/Map/shapes/AssertedDistribution.js index 3af620d..3fc597d 100644 --- a/src/components/Map/shapes/AssertedDistribution.js +++ b/src/components/Map/shapes/AssertedDistribution.js @@ -1,7 +1,7 @@ -export const AssertedDistribution = ({ +export const AssertedDistribution = { color: 'rgb(var(--color-map-asserted))', weight: 1, dashArray: '3', dashOffset: '3', - fillOpacity: 0.5 -}) + fillOpacity: 0.25 +} diff --git a/src/components/Map/shapes/CollectionObject.js b/src/components/Map/shapes/CollectionObject.js index 6350b1d..8479942 100644 --- a/src/components/Map/shapes/CollectionObject.js +++ b/src/components/Map/shapes/CollectionObject.js @@ -1,5 +1,5 @@ -export const CollectionObject = ({ +export const CollectionObject = { color: `rgb(var(--color-map-collection-object))`, weight: 1, - fillOpacity: 0.5 -}) + fillOpacity: 0.25 +} diff --git a/src/components/Map/shapes/TypeMaterial.js b/src/components/Map/shapes/TypeMaterial.js index 7b8ef94..f218764 100644 --- a/src/components/Map/shapes/TypeMaterial.js +++ b/src/components/Map/shapes/TypeMaterial.js @@ -1,5 +1,5 @@ -export const TypeMaterial = ({ +export const TypeMaterial = { color: `rgb(var(--color-map-type-material))`, weight: 1, - fillOpacity: 0.5 -}) + fillOpacity: 0.25 +} diff --git a/src/components/Map/utils/geojsonOptions.js b/src/components/Map/utils/geojsonOptions.js index 441bbc7..1eaece8 100644 --- a/src/components/Map/utils/geojsonOptions.js +++ b/src/components/Map/utils/geojsonOptions.js @@ -2,29 +2,55 @@ import L, { Icon } from 'leaflet' import * as Icons from '../icons' import * as Shape from '../shapes' -export default ({ +const TYPES = [ + 'TypeMaterial', + 'CollectionObject', + 'AssertedDistribution', + 'Georeference' +] + +function getRelevantType(base) { + const types = base.map((b) => b.type) + + types.sort((a, b) => TYPES.indexOf(a) - TYPES.indexOf(b)) + + return types[0] +} + +export default { onEachFeature: (feature, layer) => { - if (!feature.properties?.base?.label) return - layer.bindTooltip( - `
${feature.properties.base.label}
`, - { - permanent: false, - sticky: true - } - ) + const label = ` +
+
` + + layer.bindPopup(label) }, pointToLayer: (feature, latLng) => { - const type = feature.properties?.base.type - + const type = getRelevantType(feature.properties.base) + return L.marker(latLng, { icon: Icons[type] || Icon.Georeference }) }, style: (feature) => { - const type = feature.properties?.base.type - + const type = getRelevantType(feature.properties?.base) + if (Shape[type]) { return Shape[type] } } -}) +} diff --git a/src/modules/otus/components/Panel/PanelMap/PanelMap.vue b/src/modules/otus/components/Panel/PanelMap/PanelMap.vue index 3eecb53..cf26cce 100644 --- a/src/modules/otus/components/Panel/PanelMap/PanelMap.vue +++ b/src/modules/otus/components/Panel/PanelMap/PanelMap.vue @@ -26,22 +26,26 @@ />
-
-
- Georeference -
-
-
- Asserted distribution +
+
+ {{ LEGEND[type].label }}