Improve UI: Icons are now everywhere correct (hopefully). Timeslider …

…handling gets easier with a border and cursor pointer. 40s and 90s map background added. one fix with double loading basemap
a-thousand-channels · Dec 7, 2024 · a7fc25b · a7fc25b
1 parent 0139a7c
commit a7fc25b
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 29 deletions.
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -57,8 +57,9 @@ h2 {
   font-size: 3em;
   font-weight: normal;
   color: #c6c600;
-  margin: 0.25rem 0 0.25rem 0;
+  margin: 0.25rem 0 0.25rem -3px;
   font-weight: normal;
+  word-break: break-all;  
 }
 h2.layer-title {
   /*
@@ -186,7 +187,7 @@ hr {
 @media (min-width: 768px) {
   .sidebar {
     position: fixed;
-    width: 520px;
+    width: 575px;
     padding: 50px 30px 60px;  
   }
 }

diff --git a/src/components/LayerInfoView.vue b/src/components/LayerInfoView.vue
@@ -16,7 +16,7 @@
           <li v-for="place in layerData.places" :key="place.id">
             <p class="place-dates" style="font-size: 0.86em">
 
-                <strong>{{ place.date_with_qualifier }}</strong>
+                <strong>{{ place.date_with_qualifier ? place.date_with_qualifier : 'Lacune Karte' }}</strong>
                 <IconMarker :iconData="iconData(place, PopupIsVisible(map,place))"
                 klass="layer-item-icon"
                 :id="'layer-switch-item-icon-'+layerData.id" />              
@@ -47,7 +47,9 @@
   import { PopupIsVisible } from '@/helpers/popup';
   import IconMarker from './icons/IconMarker.vue';
   import { Icon } from 'leaflet';
-
+  import L from 'leaflet'
+  import 'leaflet.markercluster' // Import MarkerCluster script
+  import 'leaflet.markercluster.placementstrategies/dist/leaflet-markercluster.placementstrategies'
   
   export default {
     props: {
@@ -95,7 +97,8 @@
         // Alle Layer durchsuchen
         props.map.eachLayer((layer) => {
           if (layer instanceof L.MarkerClusterGroup) {
-            layer.refreshClusters();
+           // layer.refreshClusters();
+           console.log('XCheck Cluster gefunden:', layer);  
           } 
           // Prüfen ob es ein Marker ist und die richtige ID hat
           if (layer instanceof L.Marker && layer.options.id === place.id) {

diff --git a/src/components/LayerSwitchView.vue b/src/components/LayerSwitchView.vue
@@ -173,7 +173,7 @@
       width: auto;
       position: relative;
       background-color: transparent;
-      right: 8px;
+      right: 11px;
       margin-top: 10px;
       padding: 15px 0 10px 3px;
       display: flex;

diff --git a/src/components/LeafletMap.vue b/src/components/LeafletMap.vue
@@ -137,6 +137,14 @@ export default {
       maxZoom: 20,     
       attribution: 'Karte: LGV Hamburg, Lizenz <a href="https://www.govdata.de/dl-de/by-2-0">dl-de/by-2-0</a>'
       })
+      let wmsLayerHamburg1940s = L.tileLayer.wms('https://geodienste.hamburg.de/HH_WMS_Historische_Karte_1_5000?', {
+      name: 'Hamburg 1940s',
+      layers: 'jahrgang_1940-1950',
+      transparent: true,
+      minZoom: 10,
+      maxZoom: 20,     
+      attribution: 'Karte: LGV Hamburg, Lizenz <a href="https://www.govdata.de/dl-de/by-2-0"> dl-de/by-2-0</a>'
+      })      
     let wmsLayerHamburg1950s = L.tileLayer.wms('https://geodienste.hamburg.de/HH_WMS_Historische_Karte_1_5000?', {
       name: 'Hamburg 1950s',
       layers: 'jahrgang_1950-1960',
@@ -169,7 +177,15 @@ export default {
       maxZoom: 20,     
       attribution: 'Karte: LGV Hamburg, Lizenz <a href="https://www.govdata.de/dl-de/by-2-0"> dl-de/by-2-0</a>'
       })
-
+      
+      let wmsLayerHamburg1990s = L.tileLayer.wms('https://geodienste.hamburg.de/HH_WMS_Historische_Karte_1_5000?', {
+      name: 'Hamburg 1990s',
+      layers: 'jahrgang_1990-2000',
+      transparent: true,
+      minZoom: 10,
+      maxZoom: 20,     
+      attribution: 'Karte: LGV Hamburg, Lizenz <a href="https://www.govdata.de/dl-de/by-2-0"> dl-de/by-2-0</a>'
+      })
     // Watcher für sortedLayersList
     watch(sortedLayersList, (newValue) => {
       if (newValue && Object.keys(newValue).length > 7) {
@@ -188,6 +204,8 @@ export default {
         console.log('savedBasemap', savedBasemap);
         if (savedBasemap === 'Hamburg 1930s') {
           wmsLayerHamburg1930s.addTo(mapInstance.value);
+        } else if (savedBasemap === 'Hamburg 1940s') {
+          wmsLayerHamburg1940s.addTo(mapInstance.value);
         } else if (savedBasemap === 'Hamburg 1950s') {
           wmsLayerHamburg1950s.addTo(mapInstance.value);
         } else if (savedBasemap === 'Hamburg 1960s') {
@@ -196,6 +214,8 @@ export default {
           wmsLayerHamburg1970s.addTo(mapInstance.value);
         } else if (savedBasemap === 'Hamburg 1980s') {
           wmsLayerHamburg1980s.addTo(mapInstance.value);
+        } else if (savedBasemap === 'Hamburg 1990s') {
+          wmsLayerHamburg1990s.addTo(mapInstance.value);
         } else {
           hamburg_dark_mode.addTo(mapInstance.value)
           document.body.classList.add('dark-mode');
@@ -607,7 +627,7 @@ export default {
           let mtypeIcon = '';
 
           place.strokeWidth = 3;
-          mtypeIcon = Icon(iconData(place, true));
+          mtypeIcon = Icon(iconData(place, true),layer.id,layer.title);
           const popupContent = `
               <p class="place-layer" style="background-color: ${darkcolor}">
                 <a href="#" class="layer-info" data-layer-id="${layer.id}" data-layer-darkcolor="${darkcolor}">
@@ -617,7 +637,7 @@ export default {
               
               <p class="place-dates">
                 <strong>
-                  ${place.date_with_qualifier ? place.date_with_qualifier : ''} 
+                  ${place.date_with_qualifier ? place.date_with_qualifier : 'Lacune Karte'} 
                 </strong>
                 ${place.date_with_qualifier ? '|' : ''} 
                 ${place.location} ${place.address}${place.city ? ', '+place.city : ''}
@@ -754,10 +774,12 @@ export default {
 
       basemaps.value = {
         'Historische Hamburg Karte 1930er': wmsLayerHamburg1930s,
+        'Historische Hamburg Karte 1940er': wmsLayerHamburg1940s,
         'Historische Hamburg Karte 1950er': wmsLayerHamburg1950s,
         'Historische Hamburg Karte 1960er': wmsLayerHamburg1960s,
         'Historische Hamburg Karte 1970er': wmsLayerHamburg1970s,
         'Historische Hamburg Karte 1980er': wmsLayerHamburg1980s,
+        'Historische Hamburg Karte 1990er': wmsLayerHamburg1990s,
         'Aktuelle Hamburg Karte (Dark)': hamburg_dark_mode
       }
       const layerControl = L.control.layers(basemaps.value, overlayLayers.value, { collapsed: true })
@@ -956,9 +978,9 @@ body.dark-mode #mapcontrol-center svg path.path-content {
 #about-link {
   left: 12px;
   position: absolute;
-  bottom:0;
+  bottom: 10px;
   z-index: 9998;
-  margin-left: 15px;
+  margin-left: 2px;
   margin-bottom: 9px;
   color: #333;
   text-shadow: 0 0 1px black;
@@ -967,4 +989,9 @@ body.dark-mode  #about-link {
   color: #aaa;
   text-shadow: 0 0 1px white;
 }
+@media (min-width: 768px) {
+  #about-link {
+    bottom: 0;
+  }
+}
 </style>
diff --git a/src/components/PlaceView.vue b/src/components/PlaceView.vue
@@ -9,7 +9,7 @@
       </p>
 
       <p class="place-dates">
-        <strong>{{ placeData.date_with_qualifier }}</strong>
+        <strong>{{ placeData.date_with_qualifier ? placeData.date_with_qualifier : 'Lacune Karte' }}</strong>
         <span v-if="placeData.date_with_qualifier"> | </span><span v-if="placeData.location.length > 0">{{ placeData.location }},</span> {{ placeData.address}} {{ placeData.city }}
         <IconMarker :iconData="iconData(placeData, PopupIsVisible(map,placeData))"
                 klass="layer-item-icon"

diff --git a/src/components/TimeSlider.vue b/src/components/TimeSlider.vue
@@ -94,6 +94,14 @@
       maxZoom: 20,     
       attribution: 'Karte: LGV Hamburg, Lizenz <a href="https://www.govdata.de/dl-de/by-2-0"> dl-de/by-2-0</a>'
       })
+      let wmsLayerHamburg1940s = L.tileLayer.wms('https://geodienste.hamburg.de/HH_WMS_Historische_Karte_1_5000?', {
+      name: 'Hamburg 1940s',
+      layers: 'jahrgang_1940-1950',
+      transparent: true,
+      minZoom: 10,
+      maxZoom: 20,     
+      attribution: 'Karte: LGV Hamburg, Lizenz <a href="https://www.govdata.de/dl-de/by-2-0"> dl-de/by-2-0</a>'
+      })
     let wmsLayerHamburg1950s = L.tileLayer.wms('https://geodienste.hamburg.de/HH_WMS_Historische_Karte_1_5000?', {
       name: 'Hamburg 1950s',
       layers: 'jahrgang_1950-1960',
@@ -126,7 +134,14 @@
       maxZoom: 20,     
       attribution: 'Karte: LGV Hamburg, Lizenz <a href="https://www.govdata.de/dl-de/by-2-0"> dl-de/by-2-0</a>'
       })      
-
+      let wmsLayerHamburg1990s = L.tileLayer.wms('https://geodienste.hamburg.de/HH_WMS_Historische_Karte_1_5000?', {
+      name: 'Hamburg 1990s',
+      layers: 'jahrgang_1990-2000',
+      transparent: true,
+      minZoom: 10,
+      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');
@@ -170,17 +185,22 @@
         const currentBaselayer = getActiveBaselayerName(props.map);
         console.log('Current baselayer:', currentBaselayer);        
         props.map.eachLayer(layer => {
-          if (layer instanceof L.TileLayer.WMS) {
+          // if (layer instanceof L.TileLayer.WMS) {
             if (layer.options.name !== currentBaselayer) {
               props.map.removeLayer(layer);
             }
-          }
+          //}
         });
-        if (value < 1950 ) {
-          console.log('TimeSlider < 1950')
+        if (value < 1940 ) {
+          console.log('TimeSlider < 1940')
           if (currentBaselayer !== 'Hamburg 1930s') {
             wmsLayerHamburg1930s.addTo(props.map);
           }
+        } else if (value < 1950 ) {
+          console.log('TimeSlider < 1950')
+          if (currentBaselayer !== 'Hamburg 1940s') {
+            wmsLayerHamburg1940s.addTo(props.map);
+          }
         } else if (value < 1960) {
           console.log('TimeSlider < 1960')
           if (currentBaselayer !== 'Hamburg 1950s') {
@@ -196,11 +216,16 @@
           if (currentBaselayer !== 'Hamburg 1970s') {
             wmsLayerHamburg1970s.addTo(props.map);
           }
-        } else {
-          console.log('TimeSlider > 1980')
+        } else if (value < 1990) {
+          console.log('TimeSlider < 1990')
           if (currentBaselayer !== 'Hamburg 1980s') {
             wmsLayerHamburg1980s.addTo(props.map);
           }
+        } else {
+          console.log('TimeSlider < 1999')
+          if (currentBaselayer !== 'Hamburg 1990s') {
+            wmsLayerHamburg1990s.addTo(props.map);
+          }
         }
          // Layer Control aktualisieren
         if (props.map.layerControl) {
@@ -250,6 +275,7 @@
     max-width: 800px;
     text-align: center;
     z-index: 1000;
+    pointer-events: none;
   }
   
   .slider {
@@ -260,11 +286,16 @@
     outline: none;
     opacity: 0.4;
     transition: opacity 0.2s;
-    box-shadow: 0 0 0 #888
+    box-shadow: 0 0 0 #888;
+    padding: 1px;
+    cursor: pointer;
+    border: 4px solid white;
+    pointer-events: visible; 
   }  
   .dark-mode .slider {
     background: #aaa;
     box-shadow: 0 0 4px black;
+    border: 4px solid #333;
   }
   div.slider-container.active .slider{
     opacity: 1;
@@ -316,6 +347,14 @@
     text-shadow: 0 0 3px white;
     display: inline;
   }
+  .dark-mode #yearDisplay {
+    color: #aaa;
+    text-shadow: 0 0 3px black;
+  }
+  div.slider-container.active #yearDisplay {
+    font-weight: bold;
+    transition: 0.5s all;
+  }  
   #disableSlider {
     display: inline-block;
     border: 1px solid #444;
@@ -328,9 +367,11 @@
     margin-left: 5px;
     transition: 0.5s all ease;
     opacity: 0;
+    pointer-events: visible;
   }
   #disableSlider.active {
     opacity: 1;
+    background: white;
   }
   #disableSlider.active:hover {
     cursor: pointer;
@@ -339,12 +380,8 @@
     color: #CC0000;
     transition: 0.5s all ease;
   }
-  .dark-mode #yearDisplay {
-    color: #aaa;
-    text-shadow: 0 0 3px black;
-  }
-  div.slider-container.active #yearDisplay {
-    font-weight: bold;
-    transition: 0.5s all;
+  .dark-mode #disableSlider.active {
+    opacity: 1;
+    background: #222;
   }
   </style>
diff --git a/src/helpers/icon.js b/src/helpers/icon.js
@@ -5,9 +5,13 @@ export function Icon(iconData,layerId=0,layerTitle='') {
         // offset for all non-circle symbols
         offset = -1;
     }
-    const svg_header = `<svg height="27" width="21" viewBox="${offset} 0 30 30" xmlns="http://www.w3.org/2000/svg" data-layer-id="${layerId}" data-layer-title="${layerTitle}"><title>${iconData.subtitle? iconData.subtitle : layerTitle}</title>`;
+    if ( !layerTitle) {
+        layerTitle= iconData.layerTitle;
+    }
+    const svg_header = `<svg height="27" width="21" viewBox="${offset} 0 30 30" xmlns="http://www.w3.org/2000/svg" data-layer-id="${layerId}" data-layer-title="${iconData.layerTitle ? iconData.layerTitle : layerTitle }"><title>${iconData.subtitle ? iconData.subtitle : layerTitle}</title>`;
     let svg_body = '';
-    if ( layerId === 83 ) {
+    console.log('LayerId',layerId);
+    if (( layerId === 83 ) || ( iconData.layerId === 83 )) {
         svg_body = `
             <path fill="${iconData.checked === true ? iconData.colorChecked.toString() : iconData.color.toString()}" fill-opacity="${iconData.checked === true ? 1 : 0}" stroke="${iconData.color.toString()}" stroke-width="${iconData.strokeWidth ? iconData.strokeWidth.toString() : 4}" stroke-opacity="1" d="M23.3,24.2L12.6,3.7c-0.3-0.3-0.9-0.3-1.2,0L1.7,24.2c-0.3,0.3-0.4,1,0,1.2c0.6,0.2,21.3,0.4,21.6,0C23.5,25,23.6,24.5,23.3,24.2z"></path>`;
     } else if (iconData.subtitle == 'autobiografisch') {