Add map legend, remove duplicate shapes

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
+}

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
+}

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
+}

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(
-      `<div>${feature.properties.base.label}</div>`,
-      { 
-        permanent: false,
-        sticky: true
-      }
-    )
+    const label = `
+    <div class="max-h-32 overflow-y-auto text-xs">
+    <ul>
+    ${feature.properties.base
+      .map(
+        (item) =>
+          `
+          <li 
+            class="py-2 last:border-0 truncate border-b"
+            title="item.label"
+          >
+            ${item.label}
+          </li>
+          `
+      )
+      .join('')}
+      </ul></div>`
+
+    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]
     }
   }
-})
+}

src/modules/otus/components/Panel/PanelMap/PanelMap.vue

@@ -26,22 +26,26 @@
       />
     </div>
     <div
-      v-if="false"
-      class="text-sm flex flex-row justify-around"
+      class="text-xs flex flex-row p-2 gap-2"
+      v-if="currentShapeTypes.length"
     >
-      <div class="flex flex-row items-center p-2">
-        <div class="w-3 h-3 bg-map-georeference m-1" />
-        <span>Georeference</span>
-      </div>
-      <div class="flex flex-row items-center p-2">
-        <div class="w-3 h-3 m-1 bg-map-asserted" />
-        <span>Asserted distribution</span>
+      <div
+        v-for="type in currentShapeTypes"
+        :key="type"
+        class="flex flex-row items-center"
+      >
+        <div
+          class="w-3 h-3 m-1 rounded-sm"
+          :class="LEGEND[type].background"
+        />
+        <span>{{ LEGEND[type].label }}</span>
       </div>
     </div>
   </VCard>
 </template>
 
 <script setup>
+import { Georeference } from '@/components/Map/icons'
 import { ref, watch } from 'vue'
 import TaxonWorks from '../../../services/TaxonWorks'
 import OtuSearch from '../../Search/OtuSearch.vue'
@@ -62,17 +66,82 @@ const zoom = 2
 const geojson = ref(undefined)
 const isLoading = ref(true)
 const isOtuSearchVisible = ref(false)
+const currentShapeTypes = ref([])
+
+const LEGEND = {
+  AssertedDistribution: {
+    label: 'Asserted disitrubtion',
+    background: 'bg-map-asserted'
+  },
+  Georeference: {
+    label: 'Georeference',
+    background: 'bg-map-georeference'
+  },
+  TypeMaterial: {
+    label: 'Type material',
+    background: 'bg-map-type-material'
+  },
+  CollectionObject: {
+    label: 'Collection object',
+    background: 'bg-map-collection-object'
+  }
+}
 
 watch(
   () => props.otuId,
-  (newId, oldId) => {
+  async (newId, oldId) => {
     if (newId === oldId) return
     isLoading.value = true
 
-    TaxonWorks.getOtuDistribution(props.otuId).then(({ data }) => {
-      geojson.value = data.request_too_large ? null : data
-    })
+    const { data } = await TaxonWorks.getOtuDistribution(props.otuId)
+    const features = removeDuplicateShapes(data)
+
+    if (data.request_too_large) {
+      geojson.value = null
+    } else {
+      geojson.value = {
+        ...data,
+        features
+      }
+    }
   },
   { immediate: true }
 )
+
+function removeDuplicateShapes(data) {
+  const features = []
+
+  data.features.forEach((feature) => {
+    const shapeId = feature.properties.shape.id
+    const shapeType = feature.properties.shape.type
+
+    if (!currentShapeTypes.value.includes(feature.properties.base.type)) {
+      currentShapeTypes.value.push(feature.properties.base.type)
+    }
+
+    const index = features.findIndex(
+      (item) =>
+        item.properties.shape.id === shapeId &&
+        item.properties.shape.type === shapeType
+    )
+
+    if (index > -1) {
+      const currentFeature = features[index]
+
+      currentFeature.properties.base.push(feature.properties.base)
+      currentFeature.properties.target.push(feature.properties.target)
+    } else {
+      const item = structuredClone(feature)
+
+      item.properties.base = [item.properties.base]
+      item.properties.target = [item.properties.target]
+
+      features.push(item)
+    }
+  })
+
+  currentShapeTypes.value.sort()
+
+  return features
+}
 </script>