diff --git a/src/components/BikeClusterLayer.vue b/src/components/BikeClusterLayer.vue index ef5f772..105459b 100644 --- a/src/components/BikeClusterLayer.vue +++ b/src/components/BikeClusterLayer.vue @@ -17,3 +17,39 @@ defineProps<{ + + diff --git a/src/components/BikeFilters.vue b/src/components/BikeFilters.vue index 6d998fd..3acc796 100644 --- a/src/components/BikeFilters.vue +++ b/src/components/BikeFilters.vue @@ -14,21 +14,22 @@ defineProps<{ diff --git a/src/components/BikeMap.vue b/src/components/BikeMap.vue index 5191dea..982401e 100644 --- a/src/components/BikeMap.vue +++ b/src/components/BikeMap.vue @@ -100,28 +100,4 @@ const { filterUncovered, filterCovered, filterKorrigo } = storeToRefs(useMap()) .leaflet-container { background-color: var(--background); } - -.marker-cluster-small { - background-color: color-mix(in srgb, var(--color-green-500) 25%, transparent); - - div { - background-color: color-mix(in srgb, var(--color-green-500) 33%, transparent); - } -} - -.marker-cluster-medium { - background-color: color-mix(in srgb, var(--color-yellow-400) 25%, transparent); - - div { - background-color: color-mix(in srgb, var(--color-yellow-400) 33%, transparent); - } -} - -.marker-cluster-large { - background-color: color-mix(in srgb, var(--color-rose-400) 25%, transparent); - - div { - background-color: color-mix(in srgb, var(--color-rose-400) 33%, transparent); - } -} diff --git a/src/components/BikeMarker.vue b/src/components/BikeMarker.vue index 612efd2..abfb355 100644 --- a/src/components/BikeMarker.vue +++ b/src/components/BikeMarker.vue @@ -6,8 +6,10 @@ import { LIcon, LMarker, LPopup } from '@vue-leaflet/vue-leaflet'; import type { PointTuple } from 'leaflet'; import { computed, ref } from 'vue'; import { UNCOVERED_KEY, COVERED_KEY, BOXED_KEY, KORRIGO_KEY } from '@/utils/const'; +import { storeToRefs } from 'pinia'; +import { useMap } from '@/stores/map'; -defineProps<{ +const props = defineProps<{ park: BikeParking group: 'covered' | 'non-covered' | 'premium' }>() @@ -17,10 +19,17 @@ const normalIconSize: PointTuple = [30, 30] const iconSize = ref(normalIconSize) const iconAnchor = computed(() => [iconSize.value[0] / 2, iconSize.value[1]]) const popupOffset = [0, iconSize.value[0] * -0.66] + +const { spotsRange } = storeToRefs(useMap()) + +const isMarkerVisible = computed(() => { + return spotsRange.value[0] <= props.park.nb_total_place && props.park.nb_total_place <= spotsRange.value[1] +})