Fix several minor issues with timeline filtering. now sliding in both…

… directions runs without loosing any marker/places. Cluster are now showing only layer or white color

src/components/LayerInfoView.vue

@@ -1,6 +1,6 @@
 <template>
     <transition name="slide">
-      <div class="sidebar" v-if="layerData">
+      <div class="sidebar" v-if="sidebarStore.isSidebarVisible == true">
         <button class="close" @click="closeOverlay(placeId)">&times;</button>
         <figure class="layer-figure" v-if="layerData.image_link">
           <img :src="layerData.image_link" alt="layerData.title">
@@ -14,10 +14,7 @@
         <ul class="layer-places-list">
           <li v-for="place in layerData.places" :key="place.id">
             <a @click="openPlaceInfo(place)">
-              <svg height="25" width="25" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
-                <path v-if="layerData.id == 82" :fill="layerData.color.toString() "fill-opacity="1" stroke="1" stroke-width="1" stroke-opacity="1" d="M11.6,29.7l-11.3-14c-0.4-0.4-0.4-1.1,0-1.5L11.6,0.3c0.4-0.4,1.1-0.4,1.5,0l11.3,13.9c0.4,0.4,0.4,1.1,0,1.5l-11.3,14C12.7,30.1,12,30.1,11.6,29.7z"></path>
-                <circle v-else class="cls-1" cx="15" cy="15" r="15" :fill="layerData.color.toString() " fill-opacity="0.8" stroke="1" stroke-width="0" stroke-opacity="1" shape-rendering="geometricPrecision"></circle>
-              </svg>
+              <IconMarker :layerData="layerData" :isSidebarVisible ="sidebarStore.isSidebarVisible"  />
               {{ place.date_with_qualifier }} {{ place.title }} 
             </a>
           </li>
@@ -36,6 +33,8 @@
   import { useRoute } from 'vue-router';
   import { useLayerStore } from '@/stores/layerStore';
   import { useSidebarStore } from '@/stores/sidebarToggle';
+  import IconMarker from './icons/IconMarker.vue'
+  import { Icon } from 'leaflet';
 
   
   export default {
@@ -49,6 +48,9 @@
         default: '#333'
       }
     },
+    components: {
+      IconMarker
+    },
     setup(props) {
       const layerStore = useLayerStore();      
       const sidebarStore = useSidebarStore();
@@ -68,7 +70,7 @@
         placeData.value = place;
         // TODO: openpopup
       };
-      return { layerStore, closeOverlay, openPlaceInfo, placeData };
+      return { layerStore, closeOverlay, openPlaceInfo, placeData, sidebarStore};
     }
   }
   </script>

src/components/LeafletMap.vue

@@ -25,8 +25,8 @@
       v-if="placeData && sidebarStore && sidebarStore.isSidebarVisible == true"
       :placeData="placeData" />
     <LayerInfoView
-      v-if="layerData && sidebarStore.isSidebarVisible == true"
-      :layerData="layerData" />
+          v-if="layerData && sidebarStore.isSidebarVisible == true"
+          :layerData="layerData" />
   <div id="map" ref="mapElement"></div>
 </template>
 
@@ -261,6 +261,7 @@ export default {
       */
     };
     const markerclusterSettings = {
+      chunkedLoading: true,
       maxClusterRadius: 0,
       showCoverageOnHover: false,
       animate: true,
@@ -281,7 +282,20 @@ export default {
         // check if all values of childmarker_colors are the same
         let check_all_same = childmarker_colors.every((val, i, arr) => val === arr[0])
         // console.log('All colors are the same: ', check_all_same)
-        let cluster_color
+
+        // NOW: with white and layer color
+        const checkChildMarkerColors = (childmarker_colors) => {
+          const uniqueColors = [...new Set(childmarker_colors)];
+          if (uniqueColors.length === 1 && uniqueColors[0] === '#fff') {
+            return '#fff';
+          } else if (uniqueColors.length === 2 && uniqueColors.includes('#fff')) {
+            return uniqueColors.find(color => color !== '#fff');
+          } else {
+            // 'multiple colors'
+            return '';
+          }
+        };
+        let cluster_color = checkChildMarkerColors(childmarker_colors);
         if (childmarker_colors.length > 0 && check_all_same) {
           cluster_color = childmarker_colors[0]
         }
@@ -477,7 +491,7 @@ export default {
               <p class="place-dates">
                 ${place.date_with_qualifier ? place.date_with_qualifier : ''}
               </p>
-              <p class="place-address">○ ${place.location} ${place.address}, ${place.city}</p>
+              <p class="place-address">◯ ${place.location} ${place.address}, ${place.city}</p>
               <h3 title="${place.title}">
                 <a href="#" class="place-info" data-layer-id="${layer.id}" data-layer-title="${layer.title}" data-layer-darkcolor="${darkcolor}" data-place-id="${place.id}">
                   ${place.title}

src/components/PlaceView.vue

@@ -1,5 +1,5 @@
 <template>
-  <transition name="slide">
+  <Transition name="slide">
     <div class="sidebar" v-if="placeData" >
       <button class="close" @click="closeOverlay()">&times;</button>
       <p class="place-layer" :style="{ backgroundColor: layerStore.layerDarkcolor }">
@@ -10,7 +10,7 @@
 
       <p class="place-dates">
         <strong>{{ placeData.date_with_qualifier }}</strong>
-        ○ <span v-if="placeData.location">{{ placeData.location }},</span>{{ placeData.address}} {{ placeData.city }}</p>
+        ◯ <span v-if="placeData.location">{{ placeData.location }},</span>{{ placeData.address}} {{ placeData.city }}</p>
 
 
 
@@ -31,7 +31,7 @@
       <p>... Infos zu diesem Ort können gerade nicht angezeigt werden.</p>
       <p><button @click="closeOverlay()">Zur Karte</button></p>
     </div>
-  </transition>
+  </Transition>
 </template>
 
 <script>
@@ -101,20 +101,37 @@ export default {
   }
 
 /* Transition animations */
-.slide-enter-active,
-.slide-leave-active {
+.slide-enter-active .sidebar,
+.slide-leave-active .sidebar {
   transition: all 2.3s ease;
 }
 
-.slide-enter-from,
-.slide-leave-to {
+.slide-enter-from .sidebar,
+.slide-leave-to .sidebar {
   transform: translateX(-100%);
+  transition: all 2.3s ease;
   opacity: 0;
 }
 
-.slide-enter-to,
-.slide-leave-from {
+.slide-enter-to .sidebar
+.slide-leave-from  .sidebar {
   transform: translateX(0);
-  opacity: 1;
+  transition: all 2.3s ease;
+  opacity: 0.4;
+}
+
+.slide-enter {
+  transform: translateX(-300px);
+}
+
+.slide-enter-active {
+  transition: all .3s ease-in;
+}
+
+.slide-leave-active {
+  transition: all .3s ease-in;
+}
+.slide-leave-to {
+  transform: translateX(-300px);
 }
 </style>

src/components/TimeSlider.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="slider-container">
       <div id="yearDisplay">{{ formattedYear }}</div>
+      <div id="disableSlider" @click="disableSlider">&times;</div>
       <input 
         type="range" 
         :min="min"
@@ -114,6 +115,17 @@
       maxZoom: 20,     
       attribution: 'Karte: LGV Hamburg, Lizenz <a href="https://www.govdata.de/dl-de/by-2-0"> dl-de/by-2-0</a>'
       })      
+
+
+      function disableSlider(event) {
+        const sliderContainer = document.querySelector('.slider-container');
+        sliderContainer.classList.remove('active');
+        const value = 1;
+        emit('update:modelValue', Number(value));
+        console.log('TimeSlider - Updating slider:', value);
+        filter_and_update(props.map,props.visibleLayers,props.overlayLayers,value)
+ 
+      }
   
       function updateSlider(event) {
         const value = Number(event.target.value)
@@ -162,7 +174,8 @@
   
       return {
         formattedYear,
-        updateSlider
+        updateSlider,
+        disableSlider
       }
     }
   }
@@ -243,6 +256,27 @@
     color: #333;
     font-weight: normal;
     text-shadow: 0 0 3px white;
+    display: inline;
+  }
+  #disableSlider {
+    display: inline-block;
+    border: 1px solid #888;
+    color: #888;
+    border-radius: 100px;
+    line-height: 0;
+    padding: 7px 2px;
+    vertical-align: top;
+    height: 10px;
+    margin-left: 5px;
+    transition: 0.5s all ease;
+
+  }
+  #disableSlider:hover {
+    cursor: pointer;
+    background: white;
+    border-color: #CC0000;
+    color: #CC0000;
+    transition: 0.5s all ease;
   }
   .dark-mode #yearDisplay {
     color: #aaa;

src/components/icons/IconMarker.vue

@@ -0,0 +1,33 @@
+<template>
+    <transition>
+        <svg v-if="layerData" height="25" width="25" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
+            <path v-if="layerData.id == 82" :fill="layerData.color.toString() "fill-opacity="1" stroke="1" stroke-width="1" stroke-opacity="1" d="M11.6,29.7l-11.3-14c-0.4-0.4-0.4-1.1,0-1.5L11.6,0.3c0.4-0.4,1.1-0.4,1.5,0l11.3,13.9c0.4,0.4,0.4,1.1,0,1.5l-11.3,14C12.7,30.1,12,30.1,11.6,29.7z"></path>
+            <circle v-else class="cls-1" cx="15" cy="15" r="15" :fill="layerData.color.toString() " fill-opacity="0.8" stroke="1" stroke-width="0" stroke-opacity="1" shape-rendering="geometricPrecision"></circle>
+        </svg>
+    </transition>
+</template>
+
+<script>
+    export default {
+        props: {
+            layerData: {
+                type: Object,
+                default: null
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+
+</style>