Fix cluster display, color cluster after the clustered markers

src/App.vue

@@ -35,7 +35,7 @@ header {
 }
 @media (min-width: 768px) {
   header {
-    height: 7vh;
+    height: 5vh;
   }
 }
 
@@ -45,7 +45,7 @@ header h1 {
   font-size: 20px;
 }
 header h1 a {
-  color: #666;
+  color: #444;
   text-decoration: none;
 }
 header div.nav {

src/assets/main.css

@@ -1,5 +1,10 @@
 @import './base.css';
 
+body, html {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
 #app {
   margin: 0;
   padding: 0;
@@ -20,6 +25,26 @@ a {
   }
 }
 
+p {
+  margin: 0 0 1rem 0;
+}
+hr {
+  margin: 2rem 0 1.5rem;
+  height: 1px;
+  border: none;
+  border-bottom: 1px solid #666;
+}
+.content {
+  padding: 20px;  
+  background-color: #fefee6;
+  height: 92vh;
+  color: #444;
+}
+@media (min-width: 768px) {
+  .content {
+    height: 95vh;
+  }
+}
 #map {
   width: 100%;
   height: 95vh;
@@ -33,11 +58,6 @@ a {
   }
 }
 
-body, html {
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
 /* ---------------------------------- */
 
 
@@ -46,7 +66,10 @@ body, html {
 /* leaflet custom styles */
 
 
+input.leaflet-control-layers-selector[disabled=""] + span {
 
+  color: #aaa;
+}
 #map.leaflet-container a {
   color: #c6c600;
 }

src/components/LeafletMap.vue

@@ -28,7 +28,7 @@ import { LargeMarkerIcon } from '@/helpers/marker'
 import CenterMapIcon from '@/components/icons/IconCenterMap.vue'
 
 import 'leaflet/dist/leaflet.css'
-import 'leaflet.markercluster/dist/MarkerCluster.Default.css' // Import MarkerCluster CSS
+// import 'leaflet.markercluster/dist/MarkerCluster.Default.css' // Import MarkerCluster CSS
 import L from 'leaflet'
 import 'leaflet.markercluster' // Import MarkerCluster script
 import 'leaflet.markercluster.placementstrategies/dist/leaflet-markercluster.placementstrategies'
@@ -59,7 +59,8 @@ export default {
       })
     
     let hamburg_dark_mode = L.tileLayer('https://tiles.3plusx.io/hamburg/darkmode/{z}/{x}/{y}{r}.png', {
-        attribution: 'Map by UT/3+x, Geodata by <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>'
+        attribution: 'Map by UT/3+x, Geodata by <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>',
+        maxZoom: 17
       })
     
 
@@ -115,6 +116,9 @@ export default {
             visibleLayers[layerName] = true
           }
         })
+        if (layer instanceof L.MarkerClusterGroup) {
+          layer.refreshClusters();
+        }        
       })
 
       localStorage.setItem('mapCenter', JSON.stringify([newCenter.lat, newCenter.lng]))
@@ -139,14 +143,15 @@ export default {
         let data_id = 1
 
         console.log('Cluster: Zigzgag', cluster.getChildCount())
-        // console.log('Cluster: Childmarkers', cluster.getAllChildMarkers())
-        if (cluster.getAllChildMarkers()[0].data) {
-          // console.log('Cluster: Childmarker Data', cluster.getAllChildMarkers()[0].data.color)
-        }
+        console.log('Cluster: Childmarkers', cluster.getAllChildMarkers())
         // TODO: add color from data
         // TODO: build array of colors of all Childmarkers
         let childmarker_colors = []
         cluster.getAllChildMarkers().forEach(function (marker) {
+          console.log('Cluster: Childmarker Data', marker)          
+          console.log('Cluster: Childmarker Data Color', marker.data)
+          console.log('Cluster: Childmarker Data Color', marker.data.color)
+
           if (marker.data) {
             childmarker_colors.push(marker.data.color)
           }
@@ -299,9 +304,23 @@ export default {
           if ( layer.color == '#b1f075') {
             darkcolor = '#92c460';
           }
+          
 
-          const icon = LargeMarkerIcon.create({ color: layer.color, mtype: mtype })
+          const icon = LargeMarkerIcon.create({ color: darkcolor, mtype: mtype })
           const marker = L.marker([place.lat, place.lon], { icon: icon, id: place.id, data: place })
+
+
+
+          marker.data = [];
+          marker.data.title = place.title;
+          marker.data.color = darkcolor;
+          marker.data.layer_id = layer.id;
+          if ( place.startdate && !place.enddate ) {
+            place.enddate = parseInt(place.startdate.substring(0, 4))+"-12-31T00:00:00.000Z";
+            console.log("Set enddate with startdate", place.startdate,place.enddate);
+          }
+          
+          
           
           const popupContent = `
               <p class="place-layer" style="background-color: ${darkcolor}">${layer.title}</p>

src/helpers/marker.js

@@ -27,32 +27,34 @@ export var LargeMarkerIcon = {
   iconSVG: function (params) {
     var svg = ''
     if (params.mtype === 'biography') {
-      svg = `<svg height="${params.marker_size}" width="${params.marker_width}" xmlns="http://www.w3.org/2000/svg" ><path fill="${params.color}" fill-opacity="${params.opacity}" stroke="${params.stroke}" stroke-width="${params.stroke_width}" stroke-opacity="${params.stroke_opacity}" 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></svg>`
+      svg = `<svg height="${params.marker_size}px" width="${params.marker_width}px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path fill="${params.color}" fill-opacity="${params.opacity}" stroke="${params.stroke}" stroke-width="${params.stroke_width}" stroke-opacity="${params.stroke_opacity}" 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></svg>`
     } else if (params.mtype === 'information') {
-      svg = `<svg height="${params.marker_size}" width="${params.marker_width}" xmlns="http://www.w3.org/2000/svg" ><path fill="${params.color}" fill-opacity="${params.opacity}" stroke="${params.stroke}" stroke-width="${params.stroke_width}" stroke-opacity="${params.stroke_opacity}" d="M0.5,25.6c-0.3-0.3-0.3-0.9,0-1.2L11.4,3.5c0.3-0.3,0.9-0.3,1.2,0l10.9,20.9c0.3,0.3,0.3,0.9,0,1.2"></path></svg>`
+      svg = `<svg height="${params.marker_size}px" width="${params.marker_width}px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" ><path fill="${params.color}" fill-opacity="${params.opacity}" stroke="${params.stroke}" stroke-width="${params.stroke_width}" stroke-opacity="${params.stroke_opacity}" d="M0.5,25.6c-0.3-0.3-0.3-0.9,0-1.2L11.4,3.5c0.3-0.3,0.9-0.3,1.2,0l10.9,20.9c0.3,0.3,0.3,0.9,0,1.2"></path></svg>`
     } else {
-      svg = `<svg height="${params.marker_size}" width="${params.marker_size}" xmlns="http://www.w3.org/2000/svg">${params.defs_with_gradient}<circle class="cls-1" cx="${params.marker_size / 2}" cy="${params.marker_size / 2}" r="${params.marker_size / 2}" fill="${params.color}" fill-opacity="${params.opacity}" stroke="${params.stroke}" stroke-width="${params.stroke_width}" stroke-opacity="${params.stroke_opacity}" shape-rendering="geometricPrecision"></circle></svg>`
+      svg = `<svg height="${params.marker_size}" width="${params.marker_size}" viewBox="0 0 ${params.marker_width} ${params.marker_size}" xmlns="http://www.w3.org/2000/svg">${params.defs_with_gradient}<circle class="cls-1" cx="${params.marker_size / 2}" cy="${params.marker_size / 2}" r="${params.marker_size / 2}" fill="${params.color}" fill-opacity="${params.opacity}" stroke="${params.stroke}" stroke-width="${params.stroke_width}" stroke-opacity="${params.stroke_opacity}" shape-rendering="geometricPrecision"></circle></svg>`
     }
     return encodeURI('data:image/svg+xml,' + svg).replace(new RegExp('#', 'g'), '%23')
   },
   create: function (params) {
     var defaultParams = {
       marker_size: 30,
       color: 'black',
-      opacity: 0.76,
+      opacity: 0.8,
       stroke: 'transparent',
       stroke_width: 0,
       stroke_opacity: 0,
       defs_with_gradient: ''
     }
     if (params.mtype === 'biography') {
-      params.marker_width = 30
+      params.marker_size = 40
+      params.marker_width = 40
     } else if (params.mtype === 'information') {
-      params.marker_width = 30
+      params.marker_size = 40
+      params.marker_width = 40
     }
 
     params = Object.assign({}, defaultParams, params)
     // console.log("PARAMS",params);
-    return new this.CustomLargeIcon({ iconUrl: this.iconSVG(params) })
+    return new this.CustomLargeIcon({ iconUrl: this.iconSVG(params), iconSize: [params.marker_size, params.marker_size] })
   }
 }

src/views/AboutView.vue

@@ -6,12 +6,13 @@
     <h2>TODO</h2>
     <p>Was noch gemacht werden muss:</p>
     <ul>
+      <li><strike>Timeslider Design</strike></li>
+      <li><strike>Clusterfärbung nach den Markern dieses Clusters</strike></li>
+      <li>Timeslider Funktionalität</li>
       <li>Kartenfehler fixen</li>
       <li>Relations einbauen</li>
       <li>Contentseiten (link aus den Popups)</li>
       <li>Bilder</li>
-      <li><strike>Timeslider Design</strike></li>
-      <li>Timeslider Funktionalität</li>
     </ul>
   </div>
 </template>
@@ -21,18 +22,7 @@ import { ref } from 'vue';
 </script>
 
 <style>
-.content {
-  padding: 20px;  
-}
-p {
-  margin: 0 0 1rem 0;
-}
-hr {
-  margin: 2rem 0 1.5rem;
-  height: 1px;
-  border: none;
-  border-bottom: 1px solid #666;
-}
+
 
 @media (min-width: 1024px) {
   .about {