feat: use multiple colors in map

frontend/src/components/map/LeafletMap.vue

@@ -22,6 +22,9 @@
 import clusterSmall from "../../assets/svgs/legend/maps.marker.cluster-small.svg"
 import clusterMedium from "../../assets/svgs/legend/maps.marker.cluster-medium.svg"
 import clusterLarge from "../../assets/svgs/legend/maps.marker.cluster-large.svg"
+import clusterSmallAlt from "../../assets/svgs/legend/maps.marker.cluster-small-alt.svg"
+import clusterMediumAlt from "../../assets/svgs/legend/maps.marker.cluster-medium-alt.svg"
+import clusterLargeAlt from "../../assets/svgs/legend/maps.marker.cluster-large-alt.svg"
 import "leaflet/dist/leaflet.css"
 import L from 'leaflet';
 import "leaflet.markercluster/dist/MarkerCluster.css"
@@ -34,16 +37,16 @@ import Stomp from "webstomp-client";
 import KnowledgeGraph from "@/components/graph/KnowledgeGraph.vue";
 import MapButtons from "@/components/modal/MapButtons.vue";
 
-const iconCreateFunction = (cluster) => {
+const iconCreateFunction = (cluster, name) => {
   const count = cluster.getChildCount();
   let clusterSize;
   let iconAnchor;
   let iconUrl;
 
   if (count < 21) {
     clusterSize = "small";
-    iconAnchor = [23, 23]
-    iconUrl = clusterSmall
+    iconAnchor = [23, 23];
+    iconUrl = name === "bluebikes" ? clusterSmall : clusterSmallAlt;
   } else if (count < 61) {
     clusterSize = "medium";
     iconAnchor = [33, 33];
@@ -78,7 +81,37 @@ export default {
     const time = ref(new Date().getTime())
     const timePeriod = ref("PT10M")
     const layersToShow = ref(new Map(layerNames.map(name => [name, true])));
-    const layers = new Map(layerNames.map(name => [name, L.markerClusterGroup({iconCreateFunction})]))
+    const layers = new Map(layerNames.map(name => [name, L.markerClusterGroup(
+        {
+          iconCreateFunction: function (cluster) {
+            const count = cluster.getChildCount();
+            let clusterSize;
+            let iconAnchor;
+            let iconUrl;
+
+            if (count < 21) {
+              clusterSize = "small";
+              iconAnchor = [23, 23];
+              iconUrl = name === "bluebikes" ? clusterSmall : clusterSmallAlt
+            } else if (count < 61) {
+              clusterSize = "medium";
+              iconAnchor = [33, 33];
+              iconUrl = name === "bluebikes" ? clusterMedium : clusterMediumAlt
+            } else {
+              clusterSize = "large";
+              iconAnchor = [40.5, 40.5];
+              iconUrl = name === "bluebikes" ? clusterLarge : clusterLargeAlt
+            }
+
+            const className = `marker-cluster-${clusterSize}`;
+
+            return L.divIcon({
+              html: `<div class="marker-cluster-flanders"><img src="${iconUrl}"><span>${count}</span></div>`,
+              className,
+              iconAnchor,
+            })
+          }
+        })]))
 
     return {
       time,

frontend/src/components/map/composables/useMarkers.js

@@ -1,17 +1,19 @@
 import L from "leaflet";
 import marker from "../../../assets/svgs/legend/maps.marker.svg"
+import altMarker from "../../../assets/svgs/legend/maps.marker-alt.svg"
 import selectedMarker from "../../../assets/svgs/legend/maps.marker-1.svg"
+import altSelectedMarker from "../../../assets/svgs/legend/maps.marker-alt-1.svg"
 import {usePopup} from "@/components/map/composables/usePopup";
 
 export function useMarkers(memberGeometries, collection, onMarkerClicked, onPopupClosed) {
     let icon = L.icon({
-        iconUrl: marker,
+        iconUrl: collection === "bluebikes" ? marker : altMarker,
         iconAnchor: [10, 28],
-        popupAnchor: [0, -25]
+        popupAnchor: [0, -25],
 
     });
     let selectedIcon = L.icon({
-        iconUrl: selectedMarker,
+        iconUrl: collection === "bluebikes" ? selectedMarker : altSelectedMarker,
         iconAnchor: [14, 40],
         popupAnchor: [0, -25]
     })

frontend/vite.config.js

@@ -28,7 +28,7 @@ export default defineConfig(({command, mode}) => {
             outDir: 'target/dist'
         },
         define: {
-            'import.meta.env.VITE_STREAMS': JSON.stringify({ streams: [{id: "gipod", fullname: "GIPOD", color: "#FFED00"}, {id: "verkeersmeting", fullname: "Verkeersmetingen Verkeerscentrum LDES", color: "#443939"}, {id: "bluebikes", fullname: "Blue Bikes", color: "#05c"}]})
+            'import.meta.env.VITE_STREAMS': JSON.stringify({ streams: [{id: "gipod", fullName: "GIPOD", color: "#443939"}, {id: "verkeersmeting", fullName: "Verkeersmetingen Verkeerscentrum LDES", color: "#FFED00"}, {id: "bluebikes", fullName: "Blue Bikes", color: "#05c"}]})
         }
     }
 })