Add clusters type

src/components/Map/VMap.client.vue

@@ -107,6 +107,11 @@ const props = defineProps({
   maxClusterRadius: {
     type: Number,
     default: 20
+  },
+
+  clusterIconCreateFunction: {
+    type: Function,
+    default: undefined
   }
 })
 
@@ -155,6 +160,22 @@ watch(
   }
 )
 
+function makeClusterOptions() {
+  const opt = {
+    maxClusterRadius: props.maxClusterRadius
+  }
+
+  if (props.clusterIconCreateFunction) {
+    Object.assign(opt, {
+      iconCreateFunction: (cluster) => {
+        return props.clusterIconCreateFunction({ L, cluster })
+      }
+    })
+  }
+
+  return opt
+}
+
 onMounted(() => {
   const tiles = makeTileFromConfiguration(L, {
     maxZoom: props.maxZoom,
@@ -184,7 +205,7 @@ onMounted(() => {
 
   drawnItems = new L.FeatureGroup()
   geoJSONGroup = props.cluster
-    ? new L.markerClusterGroup({ maxClusterRadius: props.maxClusterRadius })
+    ? new L.markerClusterGroup(makeClusterOptions())
     : new L.FeatureGroup()
 
   mapObject = L.map(leafletMap.value, options)

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

@@ -9,6 +9,7 @@
           cluster
           :zoom="zoom"
           :geojson="store.distribution.geojson"
+          :cluster-icon-create-function="makeClusterIconFor"
           @geojson:ready="() => (isLoading = false)"
         />
 
@@ -61,8 +62,9 @@
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { useDistributionStore } from '@/modules/otus/store/useDistributionStore.js'
-import CachedMap from './CachedMap.vue'
-import OtuSearch from '../../Search/OtuSearch.vue'
+import { makeClusterIconFor } from './clusters/makeClusterIconFor'
+import CachedMap from './components/CachedMap.vue'
+import OtuSearch from './components/Search/OtuSearch.vue'
 
 const props = defineProps({
   otuId: {

src/modules/otus/components/Panel/PanelMap/clusters/CollectionObject.js

@@ -0,0 +1,8 @@
+export function CollectionObject(cluster) {
+  return {
+    html: `<div class="bg-map-collection-object"><span>${cluster.getChildCount()}</span></div>`,
+    className:
+      'leaflet-marker-icon leaflet-zoom-animated leaflet-interactive bg-map-collection-object bg-opacity-60 marker-cluster text-white',
+    iconSize: [40, 40]
+  }
+}

src/modules/otus/components/Panel/PanelMap/clusters/Mixed.js

@@ -0,0 +1,18 @@
+export function Mixed(cluster) {
+  return {
+    html: `
+    <div class="relative flex w-[40px] h-[40px]">
+      <div class="rounded-l-full bg-map-collection-object bg-opacity-60">
+        <div class="w-[15px] h-[30px] rounded-l-full bg-map-collection-object ml-[5px] mt-[5px]"></div>
+      </div>
+      <div class="rounded-r-full bg-map-type-material bg-opacity-60">
+        <div class="w-[15px] h-[30px] rounded-r-full bg-map-type-material mr-[5px] mt-[5px]"></div>
+      </div>
+      <span class="absolute text-xs top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white">
+        ${cluster.getChildCount()}
+      </span>
+    </div>`,
+    className: 'leaflet-marker-icon leaflet-zoom-animated leaflet-interactive',
+    iconSize: [40, 40]
+  }
+}

src/modules/otus/components/Panel/PanelMap/clusters/TypeMaterial.js

@@ -0,0 +1,8 @@
+export function TypeMaterial(cluster) {
+  return {
+    html: `<div class="bg-map-type-material"><span>${cluster.getChildCount()}</span></div>`,
+    className:
+      'leaflet-marker-icon leaflet-zoom-animated leaflet-interactive marker-cluster bg-map-type-material bg-opacity-60 text-white',
+    iconSize: [40, 40]
+  }
+}

src/modules/otus/components/Panel/PanelMap/clusters/index.js

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

src/modules/otus/components/Panel/PanelMap/clusters/makeClusterIconFor.js

@@ -0,0 +1,17 @@
+import * as ClusterType from '../clusters'
+
+export function makeClusterIconFor({ L, cluster }) {
+  const items = cluster
+    .getAllChildMarkers()
+    .map((item) => item.feature.properties.base.map((i) => i.type))
+    .flat()
+
+  const types = [...new Set(items)]
+  const currentType = types.pop()
+
+  const makeClusterOptions = types.length
+    ? ClusterType.Mixed
+    : ClusterType[currentType] || ClusterType.CollectionObject
+
+  return L.divIcon(makeClusterOptions(cluster))
+}

src/modules/otus/components/Search/OtuSearch.vue → src/modules/otus/components/Panel/PanelMap/components/Search/OtuSearch.vue

@@ -47,7 +47,7 @@
 
 <script setup>
 import { computed, ref, onMounted, onUnmounted } from 'vue'
-import TaxonWorks from '../../services/TaxonWorks'
+import TaxonWorks from '../../../../../services/TaxonWorks.js'
 import SearchBar from './SearchBar.vue'
 import ListResults from './ListResults.vue'