fix(app): refactor icons (#428)

app/src/App.tsx

@@ -56,6 +56,7 @@ import MapContainer from './pages/MapContainer'
 import { getBottomRoutes, routes } from './routes/sidebar'
 import { config } from './config'
 import { InviteApi } from './api/inviteApi'
+import { MapPinIcon } from '@heroicons/react/24/solid'
 
 const userApi = new UserApi()
 const inviteApi = new InviteApi(userApi)
@@ -139,14 +140,19 @@ function App() {
           ?.filter((l: LayerProps) => l.listed)
           .map((l: LayerProps) => ({
             path: '/' + l.name, // url
-            icon: (
+            icon: l.markerIcon?.image ? (
               <SVG
                 src={`${config.apiUrl}assets/${l.markerIcon.image_outline ?? l.markerIcon.image}`}
-                className='tw:w-6 tw:h-6'
+                style={{
+                  width: `${(l.markerIcon.size ?? 18) * 1.3}px`,
+                  height: `${(l.markerIcon.size ?? 18) * 1.3}px`,
+                }}
                 preProcessor={(code: string) =>
                   code.replace(/stroke=".*?"/g, 'stroke="currentColor"')
                 }
               />
+            ) : (
+              <MapPinIcon className='tw:w-6 tw:h-6' />
             ),
             name: l.name, // name that appear in Sidebar
             color: l.menuColor,

backend/directus-config/development/snapshot/fields/layers/markerIcon.json

@@ -16,7 +16,7 @@
       "template": "{{id}}"
     },
     "readonly": false,
-    "required": true,
+    "required": false,
     "sort": 2,
     "special": [
       "m2o"

backend/directus-config/development/snapshot/fields/layers/markerShape.json

@@ -37,7 +37,7 @@
     "name": "markerShape",
     "table": "layers",
     "data_type": "character varying",
-    "default_value": null,
+    "default_value": "circle",
     "max_length": 255,
     "numeric_precision": null,
     "numeric_scale": null,

backend/directus-config/development/snapshot/fields/marker_icons/image_outline.json

@@ -1,47 +0,0 @@
-{
-  "collection": "marker_icons",
-  "field": "image_outline",
-  "type": "uuid",
-  "meta": {
-    "collection": "marker_icons",
-    "conditions": null,
-    "display": null,
-    "display_options": null,
-    "field": "image_outline",
-    "group": null,
-    "hidden": false,
-    "interface": "file-image",
-    "note": null,
-    "options": {
-      "folder": "f255d3a7-8ecc-4ee0-b584-dee753317415"
-    },
-    "readonly": false,
-    "required": false,
-    "sort": 4,
-    "special": [
-      "file"
-    ],
-    "translations": null,
-    "validation": null,
-    "validation_message": null,
-    "width": "half"
-  },
-  "schema": {
-    "name": "image_outline",
-    "table": "marker_icons",
-    "data_type": "uuid",
-    "default_value": null,
-    "max_length": null,
-    "numeric_precision": null,
-    "numeric_scale": null,
-    "is_nullable": true,
-    "is_unique": false,
-    "is_indexed": false,
-    "is_primary_key": false,
-    "is_generated": false,
-    "generation_expression": null,
-    "has_auto_increment": false,
-    "foreign_key_table": "directus_files",
-    "foreign_key_column": "id"
-  }
-}

backend/directus-config/development/snapshot/fields/marker_icons/size_outline.json

@@ -1,43 +0,0 @@
-{
-  "collection": "marker_icons",
-  "field": "size_outline",
-  "type": "decimal",
-  "meta": {
-    "collection": "marker_icons",
-    "conditions": null,
-    "display": null,
-    "display_options": null,
-    "field": "size_outline",
-    "group": null,
-    "hidden": false,
-    "interface": "input",
-    "note": null,
-    "options": null,
-    "readonly": false,
-    "required": false,
-    "sort": 5,
-    "special": null,
-    "translations": null,
-    "validation": null,
-    "validation_message": null,
-    "width": "half"
-  },
-  "schema": {
-    "name": "size_outline",
-    "table": "marker_icons",
-    "data_type": "numeric",
-    "default_value": null,
-    "max_length": null,
-    "numeric_precision": 10,
-    "numeric_scale": 5,
-    "is_nullable": true,
-    "is_unique": false,
-    "is_indexed": false,
-    "is_primary_key": false,
-    "is_generated": false,
-    "generation_expression": null,
-    "has_auto_increment": false,
-    "foreign_key_table": null,
-    "foreign_key_column": null
-  }
-}

backend/directus-config/development/snapshot/relations/marker_icons/image_outline.json

@@ -1,25 +0,0 @@
-{
-  "collection": "marker_icons",
-  "field": "image_outline",
-  "related_collection": "directus_files",
-  "meta": {
-    "junction_field": null,
-    "many_collection": "marker_icons",
-    "many_field": "image_outline",
-    "one_allowed_collections": null,
-    "one_collection": "directus_files",
-    "one_collection_field": null,
-    "one_deselect_action": "nullify",
-    "one_field": null,
-    "sort_field": null
-  },
-  "schema": {
-    "table": "marker_icons",
-    "column": "image_outline",
-    "foreign_key_table": "directus_files",
-    "foreign_key_column": "id",
-    "constraint_name": "marker_icons_image_outline_foreign",
-    "on_update": "NO ACTION",
-    "on_delete": "SET NULL"
-  }
-}

lib/src/Components/AppShell/SideBar.tsx

@@ -64,7 +64,7 @@ export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoute
                     }}
                   >
                     <div
-                      className='tw:p-1.5 tw:rounded-selector tw:text-white'
+                      className='tw:p-1.5 tw:rounded-selector tw:text-white tw:h-9 tw:w-9 tw:flex tw:items-center tw:justify-center'
                       style={{ backgroundColor: route.color ?? '#777' }}
                     >
                       {route.icon}

lib/src/Components/Map/Layer.tsx

@@ -41,6 +41,9 @@ export const Layer = ({
   const setItemsApi = useSetItemsApi()
   const setItemsData = useSetItemsData()
 
+  // Ensure markerShape has a valid value, default to 'circle' if null or empty
+  const normalizedMarkerShape = markerShape || 'circle'
+
   const addTag = useAddTag()
   const [newTagsToAdd] = useState<Tag[]>([])
   const [tagsReady] = useState<boolean>(false)
@@ -55,7 +58,7 @@ export const Layer = ({
         menuText,
         menuColor,
         markerIcon,
-        markerShape,
+        markerShape: normalizedMarkerShape,
         markerDefaultColor,
         markerDefaultColor2,
         api,
@@ -79,7 +82,7 @@ export const Layer = ({
         menuText,
         menuColor,
         markerIcon,
-        markerShape,
+        markerShape: normalizedMarkerShape,
         markerDefaultColor,
         markerDefaultColor2,
         api,
@@ -116,7 +119,7 @@ export const Layer = ({
         name,
         markerDefaultColor,
         markerDefaultColor2,
-        markerShape,
+        markerShape: normalizedMarkerShape,
         markerIcon,
         menuText,
       }}

lib/src/Components/Map/Subcomponents/AddButton.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { MapPinIcon } from '@heroicons/react/24/solid'
 import { useState } from 'react'
 import SVG from 'react-inlinesvg'
 
@@ -94,13 +95,18 @@ export default function AddButton({
                             e.preventDefault()
                           }}
                         >
-                          <img
+                          {layer.markerIcon?.image ? (
-                            src={appState.assetsApi.url + layer.markerIcon.image}
+                            <img
-                            style={{
+                              src={appState.assetsApi.url + layer.markerIcon.image}
-                              filter: 'invert(100%) brightness(200%)',
+                              style={{
-                              width: `${(layer.markerIcon.size ?? 18) * 1.3}px`,
+                                filter: 'invert(100%) brightness(200%)',
-                            }}
+                                width: `${(layer.markerIcon.size ?? 18) * 1.3}px`,
-                          />
+                                height: `${(layer.markerIcon.size ?? 18) * 1.3}px`,
+                              }}
+                            />
+                          ) : (
+                            <MapPinIcon className='tw:w-6 tw:h-6' style={{ color: '#ffffff' }} />
+                          )}
                         </button>
                       </div>
                     </a>

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

@@ -184,7 +184,7 @@ export const SearchControl = () => {
                     }
                   }}
                 >
-                  {item.layer?.markerIcon.image ? (
+                  {item.layer?.markerIcon?.image ? (
                     <div
                       className='tw:w-7 tw:h-full tw:flex tw:justify-center tw:items-center'
                       data-cy='search-item-icon'

lib/src/Utils/MarkerIconFactory.ts

@@ -40,7 +40,7 @@ const MarkerIconFactory = (
 ) => {
   if (icon)
     return divIcon({
-      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>`,
+      html: `<div class="svg-container">${createSvg(shape, color1, color2)}<img class="overlay-svg" style="width: ${icon.size ? icon.size : '12.5'}px; height: ${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),

lib/src/types/LayerProps.d.ts

@@ -13,8 +13,8 @@ export interface LayerProps {
   name: string
   menuColor: string
   menuText: string
-  markerIcon: MarkerIcon
+  markerIcon?: MarkerIcon
-  markerShape: string
+  markerShape?: string
   markerDefaultColor: string
   markerDefaultColor2?: string
   api?: ItemsApi<Item>