diff --git a/frontend/src/assets/svgs/legend/maps.marker-alt-1.svg b/frontend/src/assets/svgs/legend/maps.marker-alt-1.svg new file mode 100644 index 0000000..86c86f4 --- /dev/null +++ b/frontend/src/assets/svgs/legend/maps.marker-alt-1.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/frontend/src/assets/svgs/legend/maps.marker-alt.svg b/frontend/src/assets/svgs/legend/maps.marker-alt.svg new file mode 100644 index 0000000..0b49a12 --- /dev/null +++ b/frontend/src/assets/svgs/legend/maps.marker-alt.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/frontend/src/assets/svgs/legend/maps.marker.cluster-large-alt.svg b/frontend/src/assets/svgs/legend/maps.marker.cluster-large-alt.svg new file mode 100644 index 0000000..5eed779 --- /dev/null +++ b/frontend/src/assets/svgs/legend/maps.marker.cluster-large-alt.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/src/assets/svgs/legend/maps.marker.cluster-medium-alt.svg b/frontend/src/assets/svgs/legend/maps.marker.cluster-medium-alt.svg new file mode 100644 index 0000000..9aa81b8 --- /dev/null +++ b/frontend/src/assets/svgs/legend/maps.marker.cluster-medium-alt.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/src/assets/svgs/legend/maps.marker.cluster-small-alt.svg b/frontend/src/assets/svgs/legend/maps.marker.cluster-small-alt.svg new file mode 100644 index 0000000..9effd07 --- /dev/null +++ b/frontend/src/assets/svgs/legend/maps.marker.cluster-small-alt.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/src/components/map/LeafletMap.vue b/frontend/src/components/map/LeafletMap.vue index 543868f..4e15855 100644 --- a/frontend/src/components/map/LeafletMap.vue +++ b/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,7 +37,7 @@ 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; @@ -42,8 +45,8 @@ const iconCreateFunction = (cluster) => { 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: `
${count}
`, + className, + iconAnchor, + }) + } + })])) return { time, diff --git a/frontend/src/components/map/composables/useMarkers.js b/frontend/src/components/map/composables/useMarkers.js index 95b57b6..7119011 100644 --- a/frontend/src/components/map/composables/useMarkers.js +++ b/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] }) diff --git a/frontend/vite.config.js b/frontend/vite.config.js index 6e92b84..1e04693 100644 --- a/frontend/vite.config.js +++ b/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"}]}) } } })