bugfixing and icon ajustments

src/Components/Input/ComboBoxInput.tsx

@@ -7,8 +7,7 @@ interface ComboBoxProps {
 
 const ComboBoxInput = ({ id, options, value, onValueChange }: ComboBoxProps) => {
   const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const value = e.target.value
+    onValueChange(e.target.value)
-    onValueChange(value)
   }
 
   return (
@@ -16,7 +15,7 @@ const ComboBoxInput = ({ id, options, value, onValueChange }: ComboBoxProps) =>
       id={id}
       className='tw:form-select tw:block tw:w-full tw:py-2 tw:px-4 tw:border tw:border-gray-300 rounded-md tw:shadow-sm tw:text-sm tw:focus:outline-hidden tw:focus:ring-indigo-500 tw:focus:border-indigo-500 tw:sm:text-sm'
       onChange={handleChange}
-      defaultValue={value}
+      value={value} // ← hier controlled statt defaultValue
     >
       {options.map((o) => (
         <option value={o} key={o}>

src/Components/Map/Layer.tsx

@@ -3,6 +3,7 @@
 import { Children, isValidElement, useEffect, useState } from 'react'
 import { Marker, Tooltip } from 'react-leaflet'
 
+import { useAppState } from '#components/AppShell/hooks/useAppState'
 import { encodeTag } from '#utils/FormatTags'
 import { hashTagRegex } from '#utils/HashTagRegex'
 import MarkerIconFactory from '#utils/MarkerIconFactory'
@@ -86,6 +87,8 @@ export const Layer = ({
 
   const visibleGroupTypes = useVisibleGroupType()
 
+  const appState = useAppState()
+
   useEffect(() => {
     data &&
       setItemsData({
@@ -244,6 +247,7 @@ export const Layer = ({
                     color1,
                     color2,
                     item.markerIcon ? item.markerIcon : markerIcon,
+                    appState.assetsApi.url,
                   )}
                   key={item.id}
                   position={[latitude, longitude]}

src/Components/Map/Subcomponents/Controls/SearchControl.tsx

@@ -211,10 +211,7 @@ export const SearchControl = () => {
                   onClick={() => {
                     searchInput.current?.blur()
                     marker(new LatLng(geo.geometry.coordinates[1], geo.geometry.coordinates[0]), {
-                      icon: MarkerIconFactory('circle', '#777', 'RGBA(35, 31, 32, 0.2)', {
+                      icon: MarkerIconFactory('circle', '#777', 'RGBA(35, 31, 32, 0.2)'),
-                        image:
-                          '<svg fill="currentColor" width="13" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z"/></svg>',
-                      }),
                     })
                       .addTo(map)
                       .bindPopup(
@@ -269,10 +266,7 @@ export const SearchControl = () => {
                     marker(
                       new LatLng(extractCoordinates(value)![0], extractCoordinates(value)![1]),
                       {
-                        icon: MarkerIconFactory('circle', '#777', 'RGBA(35, 31, 32, 0.2)', {
+                        icon: MarkerIconFactory('circle', '#777', 'RGBA(35, 31, 32, 0.2)'),
-                          image:
-                            '<svg fill="currentColor" width="13" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z"/></svg>',
-                        }),
                       },
                     )
                       .addTo(map)

src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx

@@ -12,7 +12,7 @@ interface groupType {
   groupTypes_id: {
     name: string
     color: string
-    image: string
+    image: { id: string }
     markerIcon: string
   }
 }
@@ -30,10 +30,10 @@ export const GroupSubheaderForm = ({
   groupTypes?: groupType[]
 }) => {
   useEffect(() => {
-    if (groupTypes && groupStates) {
+    if (groupTypes && groupStates && state.name !== '') {
       const groupType = groupTypes.find((gt) => gt.groupTypes_id.name === state.group_type)
       const customImage = !groupTypes.some(
-        (gt) => gt.groupTypes_id.image === state.image || !state.image,
+        (gt) => gt.groupTypes_id.image.id === state.image || !state.image,
       )
       setState((prevState) => ({
         ...prevState,
@@ -41,7 +41,7 @@ export const GroupSubheaderForm = ({
         marker_icon: groupType?.groupTypes_id.markerIcon || groupTypes[0].groupTypes_id.markerIcon,
         image: customImage
           ? state.image
-          : groupType?.groupTypes_id.image || groupTypes[0].groupTypes_id.image,
+          : groupType?.groupTypes_id.image.id || groupTypes[0].groupTypes_id.image.id,
         status: state.status || groupStates[0],
         group_type: state.group_type || groupTypes[0].groupTypes_id.name,
       }))

src/Utils/MarkerIconFactory.ts

@@ -2,8 +2,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 import { divIcon, Point } from 'leaflet'
 
-import { useAppState } from '#components/AppShell/hooks/useAppState'
-
 export interface markerIcon {
   image: string
   size?: number
@@ -12,7 +10,7 @@ export interface markerIcon {
 const createSvg = (shape: string, markerColor: string, borderColor: string) => {
   const svgMap = {
     circle:
-      '<svg width="32" height="44" viewBox="0 0 35 45" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 2.746c-8.284 0-15 6.853-15 15.307 0 .963.098 1.902.265 2.816a15.413 15.413 0 002.262 5.684l.134.193 12.295 17.785 12.439-17.863.056-.08a15.422 15.422 0 002.343-6.112c.123-.791.206-1.597.206-2.423 0-8.454-6.716-15.307-15-15.307" fill="' +
+      '<svg width="33" height="44" viewBox="0 0 35 45" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 2.746c-8.284 0-15 6.853-15 15.307 0 .963.098 1.902.265 2.816a15.413 15.413 0 002.262 5.684l.134.193 12.295 17.785 12.439-17.863.056-.08a15.422 15.422 0 002.343-6.112c.123-.791.206-1.597.206-2.423 0-8.454-6.716-15.307-15-15.307" fill="' +
       markerColor +
       '" /><path d="M17.488 2.748c-8.284 0-15 6.853-15 15.307 0 .963.098 1.902.265 2.816a15.413 15.413 0 002.262 5.684l.134.193 12.295 17.785 12.44-17.863.055-.08a15.422 15.422 0 002.343-6.112c.124-.791.206-1.597.206-2.423 0-8.454-6.716-15.307-15-15.307m0 1.071c7.68 0 13.929 6.386 13.929 14.236 0 .685-.064 1.423-.193 2.258-.325 2.075-1.059 3.99-2.164 5.667l-.055.078-11.557 16.595L6.032 26.14l-.12-.174a14.256 14.256 0 01-2.105-5.29 14.698 14.698 0 01-.247-2.62c0-7.851 6.249-14.237 13.928-14.237" fill="' +
       borderColor +
@@ -36,17 +34,31 @@ const createSvg = (shape: string, markerColor: string, borderColor: string) => {
   return svgMap[shape]
 }
 
-const MarkerIconFactory = (shape: string, color1: string, color2: string, icon: markerIcon) => {
+const MarkerIconFactory = (
-  const appState = useAppState()
+  shape: string,
-
+  color1: string,
-  return divIcon({
+  color2: string,
-    html: `<div class="svg-container">${createSvg(shape, color1, color2)}<img src="${appState.assetsApi.url + icon.image}"></div>`,
+  icon?: markerIcon,
-    iconAnchor: [17, 40],
+  assetsURL?: string,
-    popupAnchor: [0, -40],
+) => {
-    iconSize: new Point(40, 46),
+  if (icon && assetsURL)
-    className: 'leaflet-data-marker',
+    return divIcon({
-    shadowAnchor: [0, 0],
+      html: `<div class="svg-container">${createSvg(shape, color1, color2)}<img class="overlay-svg" style="width: ${icon.size ? icon.size : '12.5'}px; filter: invert(1) brightness(2);" src="${assetsURL + icon.image}"></div>`,
-  })
+      iconAnchor: [17, 40],
+      popupAnchor: [0, -40],
+      iconSize: new Point(40, 46),
+      className: 'leaflet-data-marker',
+      shadowAnchor: [0, 0],
+    })
+  else
+    return divIcon({
+      html: `<div class="svg-container">${createSvg(shape, color1, color2)}<svg fill="#fff" class="overlay-svg" width="13"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256z"/></svg></div>`,
+      iconAnchor: [17, 40],
+      popupAnchor: [0, -40],
+      iconSize: new Point(40, 46),
+      className: 'leaflet-data-marker',
+      shadowAnchor: [0, 0],
+    })
 }
 
 export default MarkerIconFactory