From 1dc8808c485e29c12ef920bf34099226ed01f055 Mon Sep 17 00:00:00 2001 From: Ulf Treger Date: Fri, 6 Sep 2024 18:23:45 +0200 Subject: [PATCH] Fix cluster display, color cluster after the clustered markers --- package-lock.json | 4 ++-- src/App.vue | 4 ++-- src/assets/main.css | 33 ++++++++++++++++++++++++++++----- src/components/LeafletMap.vue | 33 ++++++++++++++++++++++++++------- src/helpers/marker.js | 16 +++++++++------- src/views/AboutView.vue | 18 ++++-------------- 6 files changed, 71 insertions(+), 37 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7e09ece..1672df6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "a1000-multilayer-map", + "name": "lacune-map", "version": "0.0.0", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "a1000-multilayer-map", + "name": "lacune-map", "version": "0.0.0", "dependencies": { "@vue-leaflet/vue-leaflet": "^0.10.1", diff --git a/src/App.vue b/src/App.vue index def1b24..d707abd 100644 --- a/src/App.vue +++ b/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 { diff --git a/src/assets/main.css b/src/assets/main.css index 79d1f73..61b2544 100644 --- a/src/assets/main.css +++ b/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; } diff --git a/src/components/LeafletMap.vue b/src/components/LeafletMap.vue index fca9ca5..8b4c30a 100644 --- a/src/components/LeafletMap.vue +++ b/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 OpenStreetMap' + attribution: 'Map by UT/3+x, Geodata by OpenStreetMap', + 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 = `

${layer.title}

diff --git a/src/helpers/marker.js b/src/helpers/marker.js index 4fab346..1dcff82 100644 --- a/src/helpers/marker.js +++ b/src/helpers/marker.js @@ -27,11 +27,11 @@ export var LargeMarkerIcon = { iconSVG: function (params) { var svg = '' if (params.mtype === 'biography') { - svg = `` + svg = `` } else if (params.mtype === 'information') { - svg = `` + svg = `` } else { - svg = `${params.defs_with_gradient}` + svg = `${params.defs_with_gradient}` } return encodeURI('data:image/svg+xml,' + svg).replace(new RegExp('#', 'g'), '%23') }, @@ -39,20 +39,22 @@ export var LargeMarkerIcon = { 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] }) } } diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue index 649638d..c87547e 100644 --- a/src/views/AboutView.vue +++ b/src/views/AboutView.vue @@ -6,12 +6,13 @@

TODO

Was noch gemacht werden muss:

@@ -21,18 +22,7 @@ import { ref } from 'vue';