refactor(backend): simplified icon config (#359)

* simplified icon config

* fixed linting

* fixed linting

* fix linting and searchControl

* adjust useSelectPosition

* adjust useSelectPosition

* fixed presets

* removed menuIcon artefacts

* fix example

* adjust icon size in addButton

app/src/App.tsx

@@ -12,7 +12,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import type { Tag } from 'utopia-ui'
+import type { Tag, LayerProps } from 'utopia-ui'
 
 import {
   AppShell,
@@ -111,12 +111,12 @@ function App() {
     layers && setLayers(layers)
     setLayerPageRoutes(
       layers
-        ?.filter((l: any) => l.listed)
+        ?.filter((l: LayerProps) => l.listed)
-        .map((l: any) => ({
+        .map((l: LayerProps) => ({
           path: '/' + l.name, // url
           icon: (
             <SVG
-              src={config.apiUrl + 'assets/' + l.indexIcon}
+              src={`${config.apiUrl}assets/${l.markerIcon.image_outline ?? l.markerIcon.image}`}
               className='tw:w-6 tw:h-6'
               preProcessor={(code: string) =>
                 code.replace(/stroke=".*?"/g, 'stroke="currentColor"')

app/src/pages/MapContainer.tsx

@@ -23,7 +23,6 @@ import {
 } from 'utopia-ui'
 
 import { itemsApi } from '../api/itemsApi'
-import { config } from '../config'
 
 import type { Place } from '../api/directus'
 import type { LayerProps } from 'utopia-ui'
@@ -95,7 +94,6 @@ function MapContainer({ layers, map }: { layers: LayerProps[]; map: any }) {
               id={layer.id}
               key={layer.id}
               name={layer.name}
-              menuIcon={config.apiUrl + 'assets/' + layer.menuIcon}
               menuText={layer.menuText}
               menuColor={layer.menuColor}
               markerIcon={layer.markerIcon}

backend/directus-config/collections/presets.json

@@ -1,4 +1,34 @@
 [
+  {
+    "bookmark": null,
+    "role": null,
+    "collection": "items",
+    "search": null,
+    "layout": null,
+    "layout_query": {
+      "tabular": {
+        "page": 1,
+        "fields": [
+          "name",
+          "layer.name",
+          "date_created",
+          "date_updated",
+          "user_created",
+          "user_updated"
+        ]
+      }
+    },
+    "layout_options": {
+      "tabular": {
+        "widths": {}
+      }
+    },
+    "refresh_interval": null,
+    "filter": null,
+    "icon": "bookmark",
+    "color": null,
+    "_syncId": "053f9b93-aa94-4ad8-b64e-babb69f0ea6c"
+  },
   {
     "bookmark": null,
     "role": null,
@@ -51,7 +81,6 @@
     "layout_options": {
       "tabular": {
         "widths": {
-          "menuIcon.$thumbnail": 32,
           "maps.maps_id.name": 1003.888916015625
         },
         "spacing": "compact"
@@ -63,6 +92,36 @@
     "color": null,
     "_syncId": "1b452db1-8add-4a5e-948d-b380d99121c3"
   },
+  {
+    "bookmark": null,
+    "role": null,
+    "collection": "marker_icons",
+    "search": null,
+    "layout": null,
+    "layout_query": {
+      "tabular": {
+        "page": 1,
+        "fields": [
+          "id",
+          "image.$thumbnail",
+          "size",
+          "image_outline.$thumbnail",
+          "size_outline"
+        ],
+        "limit": 500
+      }
+    },
+    "layout_options": {
+      "tabular": {
+        "widths": {}
+      }
+    },
+    "refresh_interval": null,
+    "filter": null,
+    "icon": "bookmark",
+    "color": null,
+    "_syncId": "2a1656b7-d6d2-4b47-bd22-41babc8bf828"
+  },
   {
     "bookmark": null,
     "role": null,
@@ -124,5 +183,45 @@
     "icon": "bookmark",
     "color": null,
     "_syncId": "3789cfe7-78f9-428e-9770-d8e1c5de1145"
+  },
+  {
+    "bookmark": null,
+    "role": null,
+    "collection": "layers",
+    "search": "",
+    "layout": "tabular",
+    "layout_query": {
+      "tabular": {
+        "page": 1,
+        "fields": [
+          "sort",
+          "markerIcon.image.$thumbnail",
+          "menuColor",
+          "name",
+          "itemType.name",
+          "maps.maps_id.name"
+        ],
+        "sort": [
+          "sort"
+        ]
+      }
+    },
+    "layout_options": {
+      "tabular": {
+        "widths": {
+          "sort": 91.5,
+          "markerIcon.image.$thumbnail": 58,
+          "menuColor": 65.5,
+          "itemType.name": 235,
+          "maps.maps_id.name": 248
+        },
+        "spacing": "compact"
+      }
+    },
+    "refresh_interval": null,
+    "filter": null,
+    "icon": "bookmark",
+    "color": null,
+    "_syncId": "85c6dba0-1906-4c16-a245-4a8eab8a6855"
   }
 ]

backend/directus-config/seeds/development/directus/files/icons/outline/user.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.75 6C15.75 8.07107 14.071 9.75 12 9.75C9.9289 9.75 8.24996 8.07107 8.24996 6C8.24996 3.92893 9.9289 2.25 12 2.25C14.071 2.25 15.75 3.92893 15.75 6Z" stroke="#0F172A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.5011 20.1182C4.5714 16.0369 7.90184 12.75 12 12.75C16.0982 12.75 19.4287 16.0371 19.4988 20.1185C17.216 21.166 14.6764 21.75 12.0003 21.75C9.32396 21.75 6.78406 21.1659 4.5011 20.1182Z" stroke="#0F172A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

backend/directus-config/seeds/development/directus/marker_icons.json

@@ -19,7 +19,9 @@
       "_sync_id": "marker-boat",
       "id": "boat",
       "size": "18.00000",
-      "image": "boat-solid"
+      "image": "boat-solid",
+      "size_outline": "18.00000",
+      "image_outline": "boat-outline"
     },
     {
       "_sync_id": "marker-cafe",
@@ -31,7 +33,9 @@
       "_sync_id": "marker-calendar",
       "id": "calendar",
       "size": "14.00000",
-      "image": "calendar-solid"
+      "image": "calendar-solid",
+      "size_outline": "18.00000",
+      "image_outline": "calendar-outline"
     },
     {
       "_sync_id": "marker-camp",
@@ -91,7 +95,9 @@
       "_sync_id": "marker-house",
       "id": "house",
       "size": "16.00000",
-      "image": "house-solid"
+      "image": "house-solid",
+      "size_outline": "16.00000",
+      "image_outline": "house-outline"
     },
     {
       "_sync_id": "marker-liebevoll.jetzt",
@@ -181,7 +187,9 @@
       "_sync_id": "marker-user",
       "id": "user",
       "size": "12.00000",
-      "image": "user-solid"
+      "image": "user-solid",
+      "size_outline": "18.00000",
+      "image_outline": "user-outline"
     }
   ]
 }

backend/directus-config/snapshot/fields/layers/Add_Button.json

@@ -1,32 +0,0 @@
-{
-  "collection": "layers",
-  "field": "Add_Button",
-  "type": "alias",
-  "meta": {
-    "collection": "layers",
-    "conditions": null,
-    "display": null,
-    "display_options": null,
-    "field": "Add_Button",
-    "group": null,
-    "hidden": false,
-    "interface": "group-detail",
-    "note": null,
-    "options": {
-      "headerColor": null,
-      "headerIcon": null
-    },
-    "readonly": false,
-    "required": false,
-    "sort": 8,
-    "special": [
-      "alias",
-      "no-data",
-      "group"
-    ],
-    "translations": null,
-    "validation": null,
-    "validation_message": null,
-    "width": "full"
-  }
-}

backend/directus-config/snapshot/fields/layers/divider-yaul5v.json

@@ -15,7 +15,7 @@
     "options": null,
     "readonly": false,
     "required": false,
-    "sort": 9,
+    "sort": 10,
     "special": [
       "alias",
       "no-data"

backend/directus-config/snapshot/fields/layers/listed.json

@@ -9,7 +9,7 @@
     "display_options": null,
     "field": "listed",
     "group": null,
-    "hidden": false,
+    "hidden": true,
     "interface": "boolean",
     "note": null,
     "options": null,

backend/directus-config/snapshot/fields/layers/menuText.json

@@ -8,14 +8,14 @@
     "display": null,
     "display_options": null,
     "field": "menuText",
-    "group": "Add_Button",
+    "group": null,
     "hidden": false,
     "interface": "input",
     "note": null,
     "options": null,
     "readonly": false,
     "required": false,
-    "sort": 1,
+    "sort": 8,
     "special": null,
     "translations": null,
     "validation": null,

backend/directus-config/snapshot/fields/layers/public_edit_items.json

@@ -9,7 +9,7 @@
     "display_options": null,
     "field": "public_edit_items",
     "group": null,
-    "hidden": false,
+    "hidden": true,
     "interface": "boolean",
     "note": null,
     "options": null,

backend/directus-config/snapshot/fields/layers/sort.json

@@ -15,12 +15,12 @@
     "options": null,
     "readonly": false,
     "required": false,
-    "sort": 18,
+    "sort": 9,
     "special": null,
     "translations": null,
     "validation": null,
     "validation_message": null,
-    "width": "full"
+    "width": "half"
   },
   "schema": {
     "name": "sort",

backend/directus-config/snapshot/fields/marker_icons/image.json

@@ -17,14 +17,14 @@
     },
     "readonly": false,
     "required": false,
-    "sort": 3,
+    "sort": 2,
     "special": [
       "file"
     ],
     "translations": null,
     "validation": null,
     "validation_message": null,
-    "width": "full"
+    "width": "half"
   },
   "schema": {
     "name": "image",

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

@@ -1,23 +1,23 @@
 {
-  "collection": "layers",
+  "collection": "marker_icons",
-  "field": "indexIcon",
+  "field": "image_outline",
   "type": "uuid",
   "meta": {
-    "collection": "layers",
+    "collection": "marker_icons",
     "conditions": null,
     "display": null,
     "display_options": null,
-    "field": "indexIcon",
+    "field": "image_outline",
     "group": null,
     "hidden": false,
     "interface": "file-image",
     "note": null,
     "options": {
-      "folder": "0b66498d-8ee3-48fc-8fe7-72b6f86d8d0f"
+      "folder": "f255d3a7-8ecc-4ee0-b584-dee753317415"
     },
     "readonly": false,
     "required": false,
-    "sort": 10,
+    "sort": 4,
     "special": [
       "file"
     ],
@@ -27,8 +27,8 @@
     "width": "half"
   },
   "schema": {
-    "name": "indexIcon",
+    "name": "image_outline",
-    "table": "layers",
+    "table": "marker_icons",
     "data_type": "uuid",
     "default_value": null,
     "max_length": null,

backend/directus-config/snapshot/fields/marker_icons/size.json

@@ -17,12 +17,12 @@
     },
     "readonly": false,
     "required": false,
-    "sort": 2,
+    "sort": 3,
     "special": null,
     "translations": null,
     "validation": null,
     "validation_message": null,
-    "width": "full"
+    "width": "half"
   },
   "schema": {
     "name": "size",

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

@@ -1,39 +1,35 @@
 {
-  "collection": "layers",
+  "collection": "marker_icons",
-  "field": "menuIcon",
+  "field": "size_outline",
-  "type": "uuid",
+  "type": "decimal",
   "meta": {
-    "collection": "layers",
+    "collection": "marker_icons",
     "conditions": null,
     "display": null,
     "display_options": null,
-    "field": "menuIcon",
+    "field": "size_outline",
-    "group": "Add_Button",
+    "group": null,
     "hidden": false,
-    "interface": "file-image",
+    "interface": "input",
     "note": null,
-    "options": {
+    "options": null,
-      "folder": "a97106b4-218b-45df-adc9-36184886e285"
-    },
     "readonly": false,
     "required": false,
-    "sort": 2,
+    "sort": 5,
-    "special": [
+    "special": null,
-      "file"
-    ],
     "translations": null,
     "validation": null,
     "validation_message": null,
     "width": "half"
   },
   "schema": {
-    "name": "menuIcon",
+    "name": "size_outline",
-    "table": "layers",
+    "table": "marker_icons",
-    "data_type": "uuid",
+    "data_type": "numeric",
     "default_value": null,
     "max_length": null,
-    "numeric_precision": null,
+    "numeric_precision": 10,
-    "numeric_scale": null,
+    "numeric_scale": 5,
     "is_nullable": true,
     "is_unique": false,
     "is_indexed": false,
@@ -41,7 +37,7 @@
     "is_generated": false,
     "generation_expression": null,
     "has_auto_increment": false,
-    "foreign_key_table": "directus_files",
+    "foreign_key_table": null,
-    "foreign_key_column": "id"
+    "foreign_key_column": null
   }
 }

backend/directus-config/snapshot/relations/layers/indexIcon.json

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

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

@@ -1,11 +1,11 @@
 {
-  "collection": "layers",
+  "collection": "marker_icons",
-  "field": "menuIcon",
+  "field": "image_outline",
   "related_collection": "directus_files",
   "meta": {
     "junction_field": null,
-    "many_collection": "layers",
+    "many_collection": "marker_icons",
-    "many_field": "menuIcon",
+    "many_field": "image_outline",
     "one_allowed_collections": null,
     "one_collection": "directus_files",
     "one_collection_field": null,
@@ -14,11 +14,11 @@
     "sort_field": null
   },
   "schema": {
-    "table": "layers",
+    "table": "marker_icons",
-    "column": "menuIcon",
+    "column": "image_outline",
     "foreign_key_table": "directus_files",
     "foreign_key_column": "id",
-    "constraint_name": "layers_menuicon_foreign",
+    "constraint_name": "marker_icons_image_outline_foreign",
     "on_update": "NO ACTION",
     "on_delete": "SET NULL"
   }

backend/directus-config/specs/item.graphql

@@ -15,6 +15,10 @@ type Query {
   oceannomads_profiles_by_id(id: ID!, version: String): oceannomads_profiles
   oceannomads_profiles_aggregated(groupBy: [String], filter: oceannomads_profiles_filter, limit: Int, offset: Int, page: Int, search: String, sort: [String]): [oceannomads_profiles_aggregated!]!
   oceannomads_profiles_by_version(version: String!, id: ID!): version_oceannomads_profiles
+  marker_icons(filter: marker_icons_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): [marker_icons!]!
+  marker_icons_by_id(id: ID!, version: String): marker_icons
+  marker_icons_aggregated(groupBy: [String], filter: marker_icons_filter, limit: Int, offset: Int, page: Int, search: String, sort: [String]): [marker_icons_aggregated!]!
+  marker_icons_by_version(version: String!, id: ID!): version_marker_icons
   attestations(filter: attestations_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): [attestations!]!
   attestations_by_id(id: ID!, version: String): attestations
   attestations_aggregated(groupBy: [String], filter: attestations_filter, limit: Int, offset: Int, page: Int, search: String, sort: [String]): [attestations_aggregated!]!
@@ -51,10 +55,6 @@ type Query {
   groupTypes_by_id(id: ID!, version: String): groupTypes
   groupTypes_aggregated(groupBy: [String], filter: groupTypes_filter, limit: Int, offset: Int, page: Int, search: String, sort: [String]): [groupTypes_aggregated!]!
   groupTypes_by_version(version: String!, id: ID!): version_groupTypes
-  marker_icons(filter: marker_icons_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): [marker_icons!]!
-  marker_icons_by_id(id: ID!, version: String): marker_icons
-  marker_icons_aggregated(groupBy: [String], filter: marker_icons_filter, limit: Int, offset: Int, page: Int, search: String, sort: [String]): [marker_icons_aggregated!]!
-  marker_icons_by_version(version: String!, id: ID!): version_marker_icons
   inviteLinks(filter: inviteLinks_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): [inviteLinks!]!
   inviteLinks_by_id(id: ID!, version: String): inviteLinks
   inviteLinks_aggregated(groupBy: [String], filter: inviteLinks_filter, limit: Int, offset: Int, page: Int, search: String, sort: [String]): [inviteLinks_aggregated!]!
@@ -150,6 +150,8 @@ type Mutation {
   create_oceannomads_events_item(data: create_oceannomads_events_input!): oceannomads_events
   create_oceannomads_profiles_items(filter: oceannomads_profiles_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, data: [create_oceannomads_profiles_input!]): [oceannomads_profiles!]!
   create_oceannomads_profiles_item(data: create_oceannomads_profiles_input!): oceannomads_profiles
+  create_marker_icons_items(filter: marker_icons_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, data: [create_marker_icons_input!]): [marker_icons!]!
+  create_marker_icons_item(data: create_marker_icons_input!): marker_icons
   create_attestations_items(filter: attestations_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, data: [create_attestations_input!]): [attestations!]!
   create_attestations_item(data: create_attestations_input!): attestations
   create_attestations_directus_users_items(filter: attestations_directus_users_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, data: [create_attestations_directus_users_input!]): [attestations_directus_users!]!
@@ -168,8 +170,6 @@ type Mutation {
   create_groupSubheaders_groupTypes_item(data: create_groupSubheaders_groupTypes_input!): groupSubheaders_groupTypes
   create_groupTypes_items(filter: groupTypes_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, data: [create_groupTypes_input!]): [groupTypes!]!
   create_groupTypes_item(data: create_groupTypes_input!): groupTypes
-  create_marker_icons_items(filter: marker_icons_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, data: [create_marker_icons_input!]): [marker_icons!]!
-  create_marker_icons_item(data: create_marker_icons_input!): marker_icons
   create_inviteLinks_items(filter: inviteLinks_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, data: [create_inviteLinks_input!]): [inviteLinks!]!
   create_inviteLinks_item(data: create_inviteLinks_input!): inviteLinks
   create_items_items(filter: items_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, data: [create_items_input!]): [items!]!
@@ -224,6 +224,9 @@ type Mutation {
   update_oceannomads_profiles_items(filter: oceannomads_profiles_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, ids: [ID]!, data: update_oceannomads_profiles_input!): [oceannomads_profiles!]!
   update_oceannomads_profiles_batch(filter: oceannomads_profiles_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, data: [update_oceannomads_profiles_input!]): [oceannomads_profiles!]!
   update_oceannomads_profiles_item(id: ID!, data: update_oceannomads_profiles_input!): oceannomads_profiles
+  update_marker_icons_items(filter: marker_icons_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, ids: [ID]!, data: update_marker_icons_input!): [marker_icons!]!
+  update_marker_icons_batch(filter: marker_icons_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, data: [update_marker_icons_input!]): [marker_icons!]!
+  update_marker_icons_item(id: ID!, data: update_marker_icons_input!): marker_icons
   update_attestations_items(filter: attestations_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, ids: [ID]!, data: update_attestations_input!): [attestations!]!
   update_attestations_batch(filter: attestations_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, data: [update_attestations_input!]): [attestations!]!
   update_attestations_item(id: ID!, data: update_attestations_input!): attestations
@@ -251,9 +254,6 @@ type Mutation {
   update_groupTypes_items(filter: groupTypes_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, ids: [ID]!, data: update_groupTypes_input!): [groupTypes!]!
   update_groupTypes_batch(filter: groupTypes_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, data: [update_groupTypes_input!]): [groupTypes!]!
   update_groupTypes_item(id: ID!, data: update_groupTypes_input!): groupTypes
-  update_marker_icons_items(filter: marker_icons_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, ids: [ID]!, data: update_marker_icons_input!): [marker_icons!]!
-  update_marker_icons_batch(filter: marker_icons_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, data: [update_marker_icons_input!]): [marker_icons!]!
-  update_marker_icons_item(id: ID!, data: update_marker_icons_input!): marker_icons
   update_inviteLinks_items(filter: inviteLinks_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, ids: [ID]!, data: update_inviteLinks_input!): [inviteLinks!]!
   update_inviteLinks_batch(filter: inviteLinks_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String, data: [update_inviteLinks_input!]): [inviteLinks!]!
   update_inviteLinks_item(id: ID!, data: update_inviteLinks_input!): inviteLinks
@@ -325,6 +325,8 @@ type Mutation {
   delete_oceannomads_events_item(id: ID!): delete_one
   delete_oceannomads_profiles_items(ids: [ID]!): delete_many
   delete_oceannomads_profiles_item(id: ID!): delete_one
+  delete_marker_icons_items(ids: [ID]!): delete_many
+  delete_marker_icons_item(id: ID!): delete_one
   delete_attestations_items(ids: [ID]!): delete_many
   delete_attestations_item(id: ID!): delete_one
   delete_attestations_directus_users_items(ids: [ID]!): delete_many
@@ -343,8 +345,6 @@ type Mutation {
   delete_groupSubheaders_groupTypes_item(id: ID!): delete_one
   delete_groupTypes_items(ids: [ID]!): delete_many
   delete_groupTypes_item(id: ID!): delete_one
-  delete_marker_icons_items(ids: [ID]!): delete_many
-  delete_marker_icons_item(id: ID!): delete_one
   delete_inviteLinks_items(ids: [ID]!): delete_many
   delete_inviteLinks_item(id: ID!): delete_one
   delete_items_items(ids: [ID]!): delete_many
@@ -415,6 +415,7 @@ type Subscription {
   relations_mutated(event: EventEnum): relations_mutated
   oceannomads_events_mutated(event: EventEnum): oceannomads_events_mutated
   oceannomads_profiles_mutated(event: EventEnum): oceannomads_profiles_mutated
+  marker_icons_mutated(event: EventEnum): marker_icons_mutated
   attestations_mutated(event: EventEnum): attestations_mutated
   attestations_directus_users_mutated(event: EventEnum): attestations_directus_users_mutated
   contactInfos_mutated(event: EventEnum): contactInfos_mutated
@@ -424,7 +425,6 @@ type Subscription {
   groupSubheaders_mutated(event: EventEnum): groupSubheaders_mutated
   groupSubheaders_groupTypes_mutated(event: EventEnum): groupSubheaders_groupTypes_mutated
   groupTypes_mutated(event: EventEnum): groupTypes_mutated
-  marker_icons_mutated(event: EventEnum): marker_icons_mutated
   inviteLinks_mutated(event: EventEnum): inviteLinks_mutated
   items_mutated(event: EventEnum): items_mutated
   itemSecrets_mutated(event: EventEnum): itemSecrets_mutated
@@ -1782,7 +1782,6 @@ type junction_directus_users_tags_mutated {
 
 type layers {
   id: ID!
-  indexIcon(filter: directus_files_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): directus_files
   index_plus_button: Boolean
   itemType(filter: types_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): types
   item_presets: JSON
@@ -1792,17 +1791,16 @@ type layers {
   markerIcon(filter: marker_icons_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): marker_icons
   markerShape: String
   menuColor: String
-  menuIcon(filter: directus_files_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): directus_files
   menuText: String
   name: String
   onlyOnePerOwner: Boolean
   public_edit_items: Boolean
   sort: Int
   userProfileLayer: Boolean
-  maps(filter: layers_maps_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): [layers_maps]
-  maps_func: count_functions
   notifications(filter: layers_directus_users_1_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): [layers_directus_users_1]
   notifications_func: count_functions
+  maps(filter: layers_maps_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): [layers_maps]
+  maps_func: count_functions
 }
 
 type layers_aggregated {
@@ -1820,7 +1818,6 @@ type layers_aggregated {
 
 type layers_aggregated_count {
   id: Int
-  indexIcon: Int
   index_plus_button: Int
   itemType: Int
   item_presets: Int
@@ -1829,15 +1826,14 @@ type layers_aggregated_count {
   markerIcon: Int
   markerShape: Int
   menuColor: Int
-  menuIcon: Int
   menuText: Int
   name: Int
   onlyOnePerOwner: Int
   public_edit_items: Int
   sort: Int
   userProfileLayer: Int
-  maps: Int
   notifications: Int
+  maps: Int
 }
 
 type layers_aggregated_fields {
@@ -2050,6 +2046,8 @@ type marker_icons {
   id: ID!
   image(filter: directus_files_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): directus_files
   size: Float
+  image_outline(filter: directus_files_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): directus_files
+  size_outline: Float
 }
 
 type marker_icons_aggregated {
@@ -2069,10 +2067,13 @@ type marker_icons_aggregated_count {
   id: Int
   image: Int
   size: Int
+  image_outline: Int
+  size_outline: Int
 }
 
 type marker_icons_aggregated_fields {
   size: Float
+  size_outline: Float
 }
 
 type marker_icons_mutated {
@@ -2691,7 +2692,6 @@ type version_junction_directus_users_tags_1 {
 """"""
 type version_layers {
   id: ID
-  indexIcon: JSON
   index_plus_button: Boolean
   itemType: JSON
   item_presets: JSON
@@ -2700,15 +2700,14 @@ type version_layers {
   markerIcon: JSON
   markerShape: String
   menuColor: String
-  menuIcon: JSON
   menuText: String
   name: String
   onlyOnePerOwner: Boolean
   public_edit_items: Boolean
   sort: Int
   userProfileLayer: Boolean
-  maps: JSON
   notifications: JSON
+  maps: JSON
 }
 
 """"""
@@ -2770,6 +2769,8 @@ type version_marker_icons {
   id: ID
   image: JSON
   size: Float
+  image_outline: JSON
+  size_outline: Float
 }
 
 """"""
@@ -3278,7 +3279,6 @@ input create_layers_files_input {
 
 input create_layers_input {
   id: ID
-  indexIcon: create_directus_files_input
   index_plus_button: Boolean
   itemType: create_types_input
   item_presets: JSON
@@ -3287,15 +3287,14 @@ input create_layers_input {
   markerIcon: create_marker_icons_input
   markerShape: String
   menuColor: String
-  menuIcon: create_directus_files_input
   menuText: String
   name: String
   onlyOnePerOwner: Boolean
   public_edit_items: Boolean
   sort: Int
   userProfileLayer: Boolean
-  maps: [create_layers_maps_input]
   notifications: [create_layers_directus_users_1_input]
+  maps: [create_layers_maps_input]
 }
 
 input create_layers_maps_input {
@@ -3340,6 +3339,8 @@ input create_marker_icons_input {
   id: ID!
   image: create_directus_files_input
   size: Float
+  image_outline: create_directus_files_input
+  size_outline: Float
 }
 
 input create_oceannomads_events_input {
@@ -4267,7 +4268,6 @@ input layers_files_filter {
 
 input layers_filter {
   id: id_filter_operators
-  indexIcon: directus_files_filter
   index_plus_button: boolean_filter_operators
   itemType: types_filter
   item_presets: string_filter_operators
@@ -4277,17 +4277,16 @@ input layers_filter {
   markerIcon: marker_icons_filter
   markerShape: string_filter_operators
   menuColor: string_filter_operators
-  menuIcon: directus_files_filter
   menuText: string_filter_operators
   name: string_filter_operators
   onlyOnePerOwner: boolean_filter_operators
   public_edit_items: boolean_filter_operators
   sort: number_filter_operators
   userProfileLayer: boolean_filter_operators
-  maps: layers_maps_quantifier_filter
-  maps_func: count_function_filter_operators
   notifications: layers_directus_users_1_quantifier_filter
   notifications_func: count_function_filter_operators
+  maps: layers_maps_quantifier_filter
+  maps_func: count_function_filter_operators
   _and: [layers_filter]
   _or: [layers_filter]
 }
@@ -4345,6 +4344,8 @@ input marker_icons_filter {
   id: string_filter_operators
   image: directus_files_filter
   size: number_filter_operators
+  image_outline: directus_files_filter
+  size_outline: number_filter_operators
   _and: [marker_icons_filter]
   _or: [marker_icons_filter]
 }
@@ -4872,7 +4873,6 @@ input update_layers_files_input {
 
 input update_layers_input {
   id: ID
-  indexIcon: update_directus_files_input
   index_plus_button: Boolean
   itemType: update_types_input
   item_presets: JSON
@@ -4881,15 +4881,14 @@ input update_layers_input {
   markerIcon: update_marker_icons_input
   markerShape: String
   menuColor: String
-  menuIcon: update_directus_files_input
   menuText: String
   name: String
   onlyOnePerOwner: Boolean
   public_edit_items: Boolean
   sort: Int
   userProfileLayer: Boolean
-  maps: [update_layers_maps_input]
   notifications: [update_layers_directus_users_1_input]
+  maps: [update_layers_maps_input]
 }
 
 input update_layers_maps_input {
@@ -4934,6 +4933,8 @@ input update_marker_icons_input {
   id: ID
   image: update_directus_files_input
   size: Float
+  image_outline: update_directus_files_input
+  size_outline: Float
 }
 
 input update_oceannomads_events_input {

backend/directus-config/specs/openapi.json

@@ -9067,6 +9067,395 @@
         ]
       }
     },
+    "/items/marker_icons": {
+      "post": {
+        "summary": "Create an Item",
+        "description": "Create a new marker_icons item.",
+        "tags": [
+          "Items",
+          "ItemsMarkerIcons"
+        ],
+        "operationId": "createItemsMarkerIcons",
+        "parameters": [
+          {
+            "$ref": "#/components/parameters/Meta"
+          }
+        ],
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "oneOf": [
+                  {
+                    "type": "array",
+                    "items": {
+                      "$ref": "#/components/schemas/ItemsMarkerIcons"
+                    }
+                  },
+                  {
+                    "$ref": "#/components/schemas/ItemsMarkerIcons"
+                  }
+                ]
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful request",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "data": {
+                      "type": "array",
+                      "items": {
+                        "$ref": "#/components/schemas/ItemsMarkerIcons"
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          },
+          "401": {
+            "$ref": "#/components/responses/UnauthorizedError"
+          }
+        }
+      },
+      "get": {
+        "summary": "List Items",
+        "description": "List the marker_icons items.",
+        "tags": [
+          "Items",
+          "ItemsMarkerIcons"
+        ],
+        "operationId": "readItemsMarkerIcons",
+        "security": [
+          {
+            "Auth": []
+          }
+        ],
+        "parameters": [
+          {
+            "$ref": "#/components/parameters/Fields"
+          },
+          {
+            "$ref": "#/components/parameters/Limit"
+          },
+          {
+            "$ref": "#/components/parameters/Meta"
+          },
+          {
+            "$ref": "#/components/parameters/Offset"
+          },
+          {
+            "$ref": "#/components/parameters/Sort"
+          },
+          {
+            "$ref": "#/components/parameters/Filter"
+          },
+          {
+            "$ref": "#/components/parameters/Search"
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful request",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "data": {
+                      "type": "array",
+                      "items": {
+                        "type": "object",
+                        "$ref": "#/components/schemas/ItemsMarkerIcons"
+                      }
+                    },
+                    "meta": {
+                      "$ref": "#/components/schemas/x-metadata"
+                    }
+                  }
+                }
+              }
+            }
+          },
+          "401": {
+            "$ref": "#/components/responses/UnauthorizedError"
+          }
+        }
+      },
+      "patch": {
+        "summary": "Update Multiple Items",
+        "description": "Update multiple marker_icons items at the same time.",
+        "tags": [
+          "Items",
+          "ItemsMarkerIcons"
+        ],
+        "operationId": "updateItemsMarkerIcons",
+        "parameters": [
+          {
+            "$ref": "#/components/parameters/Fields"
+          },
+          {
+            "$ref": "#/components/parameters/Limit"
+          },
+          {
+            "$ref": "#/components/parameters/Meta"
+          },
+          {
+            "$ref": "#/components/parameters/Offset"
+          },
+          {
+            "$ref": "#/components/parameters/Sort"
+          },
+          {
+            "$ref": "#/components/parameters/Filter"
+          },
+          {
+            "$ref": "#/components/parameters/Search"
+          }
+        ],
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "oneOf": [
+                  {
+                    "type": "array",
+                    "items": {
+                      "$ref": "#/components/schemas/ItemsMarkerIcons"
+                    }
+                  },
+                  {
+                    "$ref": "#/components/schemas/ItemsMarkerIcons"
+                  }
+                ]
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful request",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "properties": {
+                    "data": {
+                      "type": "array",
+                      "items": {
+                        "$ref": "#/components/schemas/ItemsMarkerIcons"
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      },
+      "delete": {
+        "summary": "Delete Multiple Items",
+        "description": "Delete multiple existing marker_icons items.",
+        "tags": [
+          "Items",
+          "ItemsMarkerIcons"
+        ],
+        "operationId": "deleteItemsMarkerIcons",
+        "responses": {
+          "200": {
+            "description": "Successful request"
+          },
+          "401": {
+            "$ref": "#/components/responses/UnauthorizedError"
+          }
+        },
+        "parameters": []
+      }
+    },
+    "/items/marker_icons/{id}": {
+      "get": {
+        "summary": "Retrieve an Item",
+        "description": "Retrieve a single marker_icons item by unique identifier.",
+        "tags": [
+          "Items",
+          "ItemsMarkerIcons"
+        ],
+        "operationId": "readSingleItemsMarkerIcons",
+        "parameters": [
+          {
+            "$ref": "#/components/parameters/Fields"
+          },
+          {
+            "$ref": "#/components/parameters/Meta"
+          },
+          {
+            "$ref": "#/components/parameters/Version"
+          },
+          {
+            "name": "id",
+            "description": "Index of the item.",
+            "in": "path",
+            "required": true,
+            "schema": {
+              "oneOf": [
+                {
+                  "type": "integer",
+                  "description": "Incremental index of the item.",
+                  "example": 1
+                },
+                {
+                  "type": "string",
+                  "description": "Unique identifier of the item.",
+                  "example": "8cbb43fe-4cdf-4991-8352-c461779cec02"
+                }
+              ]
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "Successful request",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "data": {
+                      "type": "object",
+                      "$ref": "#/components/schemas/ItemsMarkerIcons"
+                    }
+                  }
+                }
+              }
+            }
+          },
+          "401": {
+            "$ref": "#/components/responses/UnauthorizedError"
+          },
+          "404": {
+            "$ref": "#/components/responses/NotFoundError"
+          }
+        }
+      },
+      "patch": {
+        "summary": "Update an Item",
+        "description": "Update an existing marker_icons item.",
+        "tags": [
+          "Items",
+          "ItemsMarkerIcons"
+        ],
+        "operationId": "updateSingleItemsMarkerIcons",
+        "parameters": [
+          {
+            "$ref": "#/components/parameters/Fields"
+          },
+          {
+            "$ref": "#/components/parameters/Meta"
+          },
+          {
+            "name": "id",
+            "description": "Index of the item.",
+            "in": "path",
+            "required": true,
+            "schema": {
+              "oneOf": [
+                {
+                  "type": "integer",
+                  "description": "Incremental index of the item.",
+                  "example": 1
+                },
+                {
+                  "type": "string",
+                  "description": "Unique identifier of the item.",
+                  "example": "8cbb43fe-4cdf-4991-8352-c461779cec02"
+                }
+              ]
+            }
+          }
+        ],
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "type": "object",
+                "$ref": "#/components/schemas/ItemsMarkerIcons"
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "Successful request",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "object",
+                  "properties": {
+                    "data": {
+                      "type": "object",
+                      "$ref": "#/components/schemas/ItemsMarkerIcons"
+                    }
+                  }
+                }
+              }
+            }
+          },
+          "401": {
+            "$ref": "#/components/responses/UnauthorizedError"
+          },
+          "404": {
+            "$ref": "#/components/responses/NotFoundError"
+          }
+        }
+      },
+      "delete": {
+        "summary": "Delete an Item",
+        "description": "Delete an existing marker_icons item.",
+        "tags": [
+          "Items",
+          "ItemsMarkerIcons"
+        ],
+        "operationId": "deleteSingleItemsMarkerIcons",
+        "responses": {
+          "200": {
+            "description": "Successful request"
+          },
+          "401": {
+            "$ref": "#/components/responses/UnauthorizedError"
+          },
+          "404": {
+            "$ref": "#/components/responses/NotFoundError"
+          }
+        },
+        "parameters": [
+          {
+            "name": "id",
+            "description": "Index of the item.",
+            "in": "path",
+            "required": true,
+            "schema": {
+              "oneOf": [
+                {
+                  "type": "integer",
+                  "description": "Incremental index of the item.",
+                  "example": 1
+                },
+                {
+                  "type": "string",
+                  "description": "Unique identifier of the item.",
+                  "example": "8cbb43fe-4cdf-4991-8352-c461779cec02"
+                }
+              ]
+            }
+          }
+        ]
+      }
+    },
     "/items/attestations": {
       "post": {
         "summary": "Create an Item",
@@ -12568,395 +12957,6 @@
         ]
       }
     },
-    "/items/marker_icons": {
-      "post": {
-        "summary": "Create an Item",
-        "description": "Create a new marker_icons item.",
-        "tags": [
-          "Items",
-          "ItemsMarkerIcons"
-        ],
-        "operationId": "createItemsMarkerIcons",
-        "parameters": [
-          {
-            "$ref": "#/components/parameters/Meta"
-          }
-        ],
-        "requestBody": {
-          "content": {
-            "application/json": {
-              "schema": {
-                "oneOf": [
-                  {
-                    "type": "array",
-                    "items": {
-                      "$ref": "#/components/schemas/ItemsMarkerIcons"
-                    }
-                  },
-                  {
-                    "$ref": "#/components/schemas/ItemsMarkerIcons"
-                  }
-                ]
-              }
-            }
-          }
-        },
-        "responses": {
-          "200": {
-            "description": "Successful request",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "type": "object",
-                  "properties": {
-                    "data": {
-                      "type": "array",
-                      "items": {
-                        "$ref": "#/components/schemas/ItemsMarkerIcons"
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          },
-          "401": {
-            "$ref": "#/components/responses/UnauthorizedError"
-          }
-        }
-      },
-      "get": {
-        "summary": "List Items",
-        "description": "List the marker_icons items.",
-        "tags": [
-          "Items",
-          "ItemsMarkerIcons"
-        ],
-        "operationId": "readItemsMarkerIcons",
-        "security": [
-          {
-            "Auth": []
-          }
-        ],
-        "parameters": [
-          {
-            "$ref": "#/components/parameters/Fields"
-          },
-          {
-            "$ref": "#/components/parameters/Limit"
-          },
-          {
-            "$ref": "#/components/parameters/Meta"
-          },
-          {
-            "$ref": "#/components/parameters/Offset"
-          },
-          {
-            "$ref": "#/components/parameters/Sort"
-          },
-          {
-            "$ref": "#/components/parameters/Filter"
-          },
-          {
-            "$ref": "#/components/parameters/Search"
-          }
-        ],
-        "responses": {
-          "200": {
-            "description": "Successful request",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "type": "object",
-                  "properties": {
-                    "data": {
-                      "type": "array",
-                      "items": {
-                        "type": "object",
-                        "$ref": "#/components/schemas/ItemsMarkerIcons"
-                      }
-                    },
-                    "meta": {
-                      "$ref": "#/components/schemas/x-metadata"
-                    }
-                  }
-                }
-              }
-            }
-          },
-          "401": {
-            "$ref": "#/components/responses/UnauthorizedError"
-          }
-        }
-      },
-      "patch": {
-        "summary": "Update Multiple Items",
-        "description": "Update multiple marker_icons items at the same time.",
-        "tags": [
-          "Items",
-          "ItemsMarkerIcons"
-        ],
-        "operationId": "updateItemsMarkerIcons",
-        "parameters": [
-          {
-            "$ref": "#/components/parameters/Fields"
-          },
-          {
-            "$ref": "#/components/parameters/Limit"
-          },
-          {
-            "$ref": "#/components/parameters/Meta"
-          },
-          {
-            "$ref": "#/components/parameters/Offset"
-          },
-          {
-            "$ref": "#/components/parameters/Sort"
-          },
-          {
-            "$ref": "#/components/parameters/Filter"
-          },
-          {
-            "$ref": "#/components/parameters/Search"
-          }
-        ],
-        "requestBody": {
-          "content": {
-            "application/json": {
-              "schema": {
-                "oneOf": [
-                  {
-                    "type": "array",
-                    "items": {
-                      "$ref": "#/components/schemas/ItemsMarkerIcons"
-                    }
-                  },
-                  {
-                    "$ref": "#/components/schemas/ItemsMarkerIcons"
-                  }
-                ]
-              }
-            }
-          }
-        },
-        "responses": {
-          "200": {
-            "description": "Successful request",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "properties": {
-                    "data": {
-                      "type": "array",
-                      "items": {
-                        "$ref": "#/components/schemas/ItemsMarkerIcons"
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      },
-      "delete": {
-        "summary": "Delete Multiple Items",
-        "description": "Delete multiple existing marker_icons items.",
-        "tags": [
-          "Items",
-          "ItemsMarkerIcons"
-        ],
-        "operationId": "deleteItemsMarkerIcons",
-        "responses": {
-          "200": {
-            "description": "Successful request"
-          },
-          "401": {
-            "$ref": "#/components/responses/UnauthorizedError"
-          }
-        },
-        "parameters": []
-      }
-    },
-    "/items/marker_icons/{id}": {
-      "get": {
-        "summary": "Retrieve an Item",
-        "description": "Retrieve a single marker_icons item by unique identifier.",
-        "tags": [
-          "Items",
-          "ItemsMarkerIcons"
-        ],
-        "operationId": "readSingleItemsMarkerIcons",
-        "parameters": [
-          {
-            "$ref": "#/components/parameters/Fields"
-          },
-          {
-            "$ref": "#/components/parameters/Meta"
-          },
-          {
-            "$ref": "#/components/parameters/Version"
-          },
-          {
-            "name": "id",
-            "description": "Index of the item.",
-            "in": "path",
-            "required": true,
-            "schema": {
-              "oneOf": [
-                {
-                  "type": "integer",
-                  "description": "Incremental index of the item.",
-                  "example": 1
-                },
-                {
-                  "type": "string",
-                  "description": "Unique identifier of the item.",
-                  "example": "8cbb43fe-4cdf-4991-8352-c461779cec02"
-                }
-              ]
-            }
-          }
-        ],
-        "responses": {
-          "200": {
-            "description": "Successful request",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "type": "object",
-                  "properties": {
-                    "data": {
-                      "type": "object",
-                      "$ref": "#/components/schemas/ItemsMarkerIcons"
-                    }
-                  }
-                }
-              }
-            }
-          },
-          "401": {
-            "$ref": "#/components/responses/UnauthorizedError"
-          },
-          "404": {
-            "$ref": "#/components/responses/NotFoundError"
-          }
-        }
-      },
-      "patch": {
-        "summary": "Update an Item",
-        "description": "Update an existing marker_icons item.",
-        "tags": [
-          "Items",
-          "ItemsMarkerIcons"
-        ],
-        "operationId": "updateSingleItemsMarkerIcons",
-        "parameters": [
-          {
-            "$ref": "#/components/parameters/Fields"
-          },
-          {
-            "$ref": "#/components/parameters/Meta"
-          },
-          {
-            "name": "id",
-            "description": "Index of the item.",
-            "in": "path",
-            "required": true,
-            "schema": {
-              "oneOf": [
-                {
-                  "type": "integer",
-                  "description": "Incremental index of the item.",
-                  "example": 1
-                },
-                {
-                  "type": "string",
-                  "description": "Unique identifier of the item.",
-                  "example": "8cbb43fe-4cdf-4991-8352-c461779cec02"
-                }
-              ]
-            }
-          }
-        ],
-        "requestBody": {
-          "content": {
-            "application/json": {
-              "schema": {
-                "type": "object",
-                "$ref": "#/components/schemas/ItemsMarkerIcons"
-              }
-            }
-          }
-        },
-        "responses": {
-          "200": {
-            "description": "Successful request",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "type": "object",
-                  "properties": {
-                    "data": {
-                      "type": "object",
-                      "$ref": "#/components/schemas/ItemsMarkerIcons"
-                    }
-                  }
-                }
-              }
-            }
-          },
-          "401": {
-            "$ref": "#/components/responses/UnauthorizedError"
-          },
-          "404": {
-            "$ref": "#/components/responses/NotFoundError"
-          }
-        }
-      },
-      "delete": {
-        "summary": "Delete an Item",
-        "description": "Delete an existing marker_icons item.",
-        "tags": [
-          "Items",
-          "ItemsMarkerIcons"
-        ],
-        "operationId": "deleteSingleItemsMarkerIcons",
-        "responses": {
-          "200": {
-            "description": "Successful request"
-          },
-          "401": {
-            "$ref": "#/components/responses/UnauthorizedError"
-          },
-          "404": {
-            "$ref": "#/components/responses/NotFoundError"
-          }
-        },
-        "parameters": [
-          {
-            "name": "id",
-            "description": "Index of the item.",
-            "in": "path",
-            "required": true,
-            "schema": {
-              "oneOf": [
-                {
-                  "type": "integer",
-                  "description": "Incremental index of the item.",
-                  "example": 1
-                },
-                {
-                  "type": "string",
-                  "description": "Unique identifier of the item.",
-                  "example": "8cbb43fe-4cdf-4991-8352-c461779cec02"
-                }
-              ]
-            }
-          }
-        ]
-      }
-    },
     "/items/inviteLinks": {
       "post": {
         "summary": "Create an Item",
@@ -21266,6 +21266,10 @@
       "name": "ItemsOceannomadsProfiles",
       "x-collection": "oceannomads_profiles"
     },
+    {
+      "name": "ItemsMarkerIcons",
+      "x-collection": "marker_icons"
+    },
     {
       "name": "ItemsAttestations",
       "x-collection": "attestations"
@@ -21302,10 +21306,6 @@
       "name": "ItemsGroupTypes",
       "x-collection": "groupTypes"
     },
-    {
-      "name": "ItemsMarkerIcons",
-      "x-collection": "marker_icons"
-    },
     {
       "name": "ItemsInviteLinks",
       "x-collection": "inviteLinks"
@@ -23439,6 +23439,51 @@
           "id"
         ]
       },
+      "ItemsMarkerIcons": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "nullable": false,
+            "type": "string"
+          },
+          "image": {
+            "nullable": true,
+            "oneOf": [
+              {
+                "type": "string",
+                "format": "uuid"
+              },
+              {
+                "$ref": "#/components/schemas/Files"
+              }
+            ]
+          },
+          "size": {
+            "nullable": true,
+            "type": "number"
+          },
+          "image_outline": {
+            "nullable": true,
+            "oneOf": [
+              {
+                "type": "string",
+                "format": "uuid"
+              },
+              {
+                "$ref": "#/components/schemas/Files"
+              }
+            ]
+          },
+          "size_outline": {
+            "nullable": true,
+            "type": "number"
+          }
+        },
+        "x-collection": "marker_icons",
+        "required": [
+          "id"
+        ]
+      },
       "ItemsAttestations": {
         "type": "object",
         "properties": {
@@ -23935,35 +23980,6 @@
           "id"
         ]
       },
-      "ItemsMarkerIcons": {
-        "type": "object",
-        "properties": {
-          "id": {
-            "nullable": false,
-            "type": "string"
-          },
-          "image": {
-            "nullable": true,
-            "oneOf": [
-              {
-                "type": "string",
-                "format": "uuid"
-              },
-              {
-                "$ref": "#/components/schemas/Files"
-              }
-            ]
-          },
-          "size": {
-            "nullable": true,
-            "type": "number"
-          }
-        },
-        "x-collection": "marker_icons",
-        "required": [
-          "id"
-        ]
-      },
       "ItemsInviteLinks": {
         "type": "object",
         "properties": {
@@ -24285,18 +24301,6 @@
             "type": "string",
             "format": "uuid"
           },
-          "indexIcon": {
-            "nullable": true,
-            "oneOf": [
-              {
-                "type": "string",
-                "format": "uuid"
-              },
-              {
-                "$ref": "#/components/schemas/Files"
-              }
-            ]
-          },
           "index_plus_button": {
             "nullable": true,
             "type": "boolean"
@@ -24343,18 +24347,6 @@
             "nullable": true,
             "type": "string"
           },
-          "menuIcon": {
-            "nullable": true,
-            "oneOf": [
-              {
-                "type": "string",
-                "format": "uuid"
-              },
-              {
-                "$ref": "#/components/schemas/Files"
-              }
-            ]
-          },
           "menuText": {
             "nullable": true,
             "type": "string"
@@ -24379,20 +24371,6 @@
             "nullable": true,
             "type": "boolean"
           },
-          "maps": {
-            "nullable": true,
-            "type": "array",
-            "items": {
-              "oneOf": [
-                {
-                  "type": "integer"
-                },
-                {
-                  "$ref": "#/components/schemas/ItemsLayersMaps"
-                }
-              ]
-            }
-          },
           "notifications": {
             "nullable": true,
             "type": "array",
@@ -24406,6 +24384,20 @@
                 }
               ]
             }
+          },
+          "maps": {
+            "nullable": true,
+            "type": "array",
+            "items": {
+              "oneOf": [
+                {
+                  "type": "integer"
+                },
+                {
+                  "$ref": "#/components/schemas/ItemsLayersMaps"
+                }
+              ]
+            }
           }
         },
         "x-collection": "layers",

backend/directus-config/specs/system.graphql

@@ -266,6 +266,7 @@ type Subscription {
   relations_mutated(event: EventEnum): relations_mutated
   oceannomads_events_mutated(event: EventEnum): oceannomads_events_mutated
   oceannomads_profiles_mutated(event: EventEnum): oceannomads_profiles_mutated
+  marker_icons_mutated(event: EventEnum): marker_icons_mutated
   attestations_mutated(event: EventEnum): attestations_mutated
   attestations_directus_users_mutated(event: EventEnum): attestations_directus_users_mutated
   contactInfos_mutated(event: EventEnum): contactInfos_mutated
@@ -275,7 +276,6 @@ type Subscription {
   groupSubheaders_mutated(event: EventEnum): groupSubheaders_mutated
   groupSubheaders_groupTypes_mutated(event: EventEnum): groupSubheaders_groupTypes_mutated
   groupTypes_mutated(event: EventEnum): groupTypes_mutated
-  marker_icons_mutated(event: EventEnum): marker_icons_mutated
   inviteLinks_mutated(event: EventEnum): inviteLinks_mutated
   items_mutated(event: EventEnum): items_mutated
   itemSecrets_mutated(event: EventEnum): itemSecrets_mutated
@@ -1951,7 +1951,6 @@ type junction_directus_users_tags_mutated {
 
 type layers {
   id: ID!
-  indexIcon(filter: directus_files_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): directus_files
   index_plus_button: Boolean
   itemType(filter: types_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): types
   item_presets: JSON
@@ -1961,17 +1960,16 @@ type layers {
   markerIcon(filter: marker_icons_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): marker_icons
   markerShape: String
   menuColor: String
-  menuIcon(filter: directus_files_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): directus_files
   menuText: String
   name: String
   onlyOnePerOwner: Boolean
   public_edit_items: Boolean
   sort: Int
   userProfileLayer: Boolean
-  maps(filter: layers_maps_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): [layers_maps]
-  maps_func: count_functions
   notifications(filter: layers_directus_users_1_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): [layers_directus_users_1]
   notifications_func: count_functions
+  maps(filter: layers_maps_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): [layers_maps]
+  maps_func: count_functions
 }
 
 type layers_directus_users_1 {
@@ -2060,6 +2058,8 @@ type marker_icons {
   id: ID!
   image(filter: directus_files_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): directus_files
   size: Float
+  image_outline(filter: directus_files_filter, sort: [String], limit: Int, offset: Int, page: Int, search: String): directus_files
+  size_outline: Float
 }
 
 type marker_icons_mutated {
@@ -2765,7 +2765,6 @@ input create_layers_directus_users_1_input {
 
 input create_layers_input {
   id: ID
-  indexIcon: create_directus_files_input
   index_plus_button: Boolean
   itemType: create_types_input
   item_presets: JSON
@@ -2774,15 +2773,14 @@ input create_layers_input {
   markerIcon: create_marker_icons_input
   markerShape: String
   menuColor: String
-  menuIcon: create_directus_files_input
   menuText: String
   name: String
   onlyOnePerOwner: Boolean
   public_edit_items: Boolean
   sort: Int
   userProfileLayer: Boolean
-  maps: [create_layers_maps_input]
   notifications: [create_layers_directus_users_1_input]
+  maps: [create_layers_maps_input]
 }
 
 input create_layers_maps_input {
@@ -2827,6 +2825,8 @@ input create_marker_icons_input {
   id: ID!
   image: create_directus_files_input
   size: Float
+  image_outline: create_directus_files_input
+  size_outline: Float
 }
 
 input create_Themes_input {
@@ -3726,7 +3726,6 @@ input layers_directus_users_1_quantifier_filter {
 
 input layers_filter {
   id: id_filter_operators
-  indexIcon: directus_files_filter
   index_plus_button: boolean_filter_operators
   itemType: types_filter
   item_presets: string_filter_operators
@@ -3736,17 +3735,16 @@ input layers_filter {
   markerIcon: marker_icons_filter
   markerShape: string_filter_operators
   menuColor: string_filter_operators
-  menuIcon: directus_files_filter
   menuText: string_filter_operators
   name: string_filter_operators
   onlyOnePerOwner: boolean_filter_operators
   public_edit_items: boolean_filter_operators
   sort: number_filter_operators
   userProfileLayer: boolean_filter_operators
-  maps: layers_maps_quantifier_filter
-  maps_func: count_function_filter_operators
   notifications: layers_directus_users_1_quantifier_filter
   notifications_func: count_function_filter_operators
+  maps: layers_maps_quantifier_filter
+  maps_func: count_function_filter_operators
   _and: [layers_filter]
   _or: [layers_filter]
 }
@@ -3804,6 +3802,8 @@ input marker_icons_filter {
   id: string_filter_operators
   image: directus_files_filter
   size: number_filter_operators
+  image_outline: directus_files_filter
+  size_outline: number_filter_operators
   _and: [marker_icons_filter]
   _or: [marker_icons_filter]
 }
@@ -4305,7 +4305,6 @@ input update_layers_directus_users_1_input {
 
 input update_layers_input {
   id: ID
-  indexIcon: update_directus_files_input
   index_plus_button: Boolean
   itemType: update_types_input
   item_presets: JSON
@@ -4314,15 +4313,14 @@ input update_layers_input {
   markerIcon: update_marker_icons_input
   markerShape: String
   menuColor: String
-  menuIcon: update_directus_files_input
   menuText: String
   name: String
   onlyOnePerOwner: Boolean
   public_edit_items: Boolean
   sort: Int
   userProfileLayer: Boolean
-  maps: [update_layers_maps_input]
   notifications: [update_layers_directus_users_1_input]
+  maps: [update_layers_maps_input]
 }
 
 input update_layers_maps_input {
@@ -4367,6 +4365,8 @@ input update_marker_icons_input {
   id: ID
   image: update_directus_files_input
   size: Float
+  image_outline: update_directus_files_input
+  size_outline: Float
 }
 
 input update_Themes_input {

lib/examples/2-static-layers/src/App.tsx

@@ -50,7 +50,6 @@ function App() {
       markerShape='square'
       markerDefaultColor='#700'
       data={events}
-      menuIcon="calendar"
       menuColor="#700"
       menuText="events"
       itemType={itemTypeEvent}
@@ -64,7 +63,6 @@ function App() {
       markerShape='circle'
       markerDefaultColor='#007'
       data={places}
-      menuIcon="point"
       menuColor="#007"
       menuText="places"
       itemType={itemTypePlace}

lib/src/Components/Map/Layer.tsx

@@ -21,7 +21,6 @@ export const Layer = ({
   data,
   children,
   name = 'places',
-  menuIcon = 'MapPinIcon',
   menuText = 'add new place',
   menuColor = '#2E7D32',
   markerIcon,
@@ -51,7 +50,6 @@ export const Layer = ({
         data,
         children,
         name,
-        menuIcon,
         menuText,
         menuColor,
         markerIcon,
@@ -74,7 +72,6 @@ export const Layer = ({
         data,
         children,
         name,
-        menuIcon,
         menuText,
         menuColor,
         markerIcon,

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

@@ -3,6 +3,7 @@
 import SVG from 'react-inlinesvg'
 
 import PlusSVG from '#assets/plus.svg'
+import { useAppState } from '#components/AppShell/hooks/useAppState'
 import { useLayers } from '#components/Map/hooks/useLayers'
 import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
 
@@ -13,6 +14,7 @@ export default function AddButton({
 }) {
   const layers = useLayers()
   const hasUserPermission = useHasUserPermission()
+  const appState = useAppState()
 
   const canAddItems = () => {
     let canAdd = false
@@ -49,7 +51,7 @@ export default function AddButton({
                       <div className='tw:tooltip tw:tooltip-left' data-tip={layer.menuText}>
                         <button
                           tabIndex={0}
-                          className='tw:z-500  tw:border-0 tw:pl-2 tw:p-0 tw:mb-3 tw:w-10 tw:h-10 tw:cursor-pointer tw:rounded-full tw:mouse tw:drop-shadow-md tw:transition tw:ease-in tw:duration-200 tw:focus:outline-hidden'
+                          className='tw:z-500 tw:border-0 tw:p-0 tw:mb-3 tw:w-10 tw:h-10 tw:cursor-pointer tw:rounded-full tw:mouse tw:drop-shadow-md tw:transition tw:ease-in tw:duration-200 tw:focus:outline-hidden tw:flex tw:items-center tw:justify-center'
                           style={{ backgroundColor: layer.menuColor || '#777' }}
                           onClick={() => {
                             triggerAction(layer)
@@ -60,9 +62,11 @@ export default function AddButton({
                           }}
                         >
                           <img
-                            src={layer.menuIcon}
+                            src={appState.assetsApi.url + layer.markerIcon.image}
-                            className='tw:h-6 tw:w-6 tw:text-white'
+                            style={{
-                            style={{ filter: 'invert(100%) brightness(200%)' }}
+                              filter: 'invert(100%) brightness(200%)',
+                              width: `${(layer.markerIcon.size ?? 18) * 1.3}px`,
+                            }}
                           />
                         </button>
                       </div>

lib/src/Components/Map/Subcomponents/Controls/LocateControl.spec.tsx

@@ -114,7 +114,6 @@ const mockItemType: ItemType = {
 const mockLayer: Layer = {
   id: 'layer-1',
   name: 'Users',
-  menuIcon: 'user',
   menuColor: '#ff0000',
   menuText: 'Users',
   markerIcon: mockMarkerIcon,

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

@@ -177,26 +177,26 @@ export const SearchControl = () => {
                     }
                   }}
                 >
-                  {item.layer?.menuIcon ? (
+                  {item.layer?.markerIcon.image ? (
-                    <SVG
+                    <div className='tw:w-7 tw:h-full tw:flex tw:justify-center tw:items-center'>
-                      src={item.layer.menuIcon}
+                      <SVG
-                      className='tw:text-current tw:mr-2 tw:mt-0 tw:w-5 tw:h-5'
+                        src={appState.assetsApi.url + item.layer.markerIcon.image}
-                      preProcessor={(code: string): string => {
+                        className='tw:text-current tw:mr-2 tw:mt-0'
-                        code = code.replace(/fill=".*?"/g, 'fill="currentColor"')
+                        style={{ width: `${(item.layer.markerIcon.size ?? 18) * 1.2}px` }}
-                        code = code.replace(/stroke=".*?"/g, 'stroke="currentColor"')
+                        preProcessor={(code: string): string => {
-                        return code
+                          code = code.replace(/fill=".*?"/g, 'fill="currentColor"')
-                      }}
+                          code = code.replace(/stroke=".*?"/g, 'stroke="currentColor"')
-                    />
+                          return code
+                        }}
+                      />
+                    </div>
                   ) : (
-                    <div className='tw:w-5' />
+                    <div className='tw:w-7' />
                   )}
                   <div>
                     <div className='tw:text-sm tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'>
                       {item.name}
                     </div>
-                    <div className='tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'>
-                      {item.text}
-                    </div>
                   </div>
                 </div>
               ))}

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

@@ -25,7 +25,7 @@ export const SelectPosition = ({
               Select new position of <b>{selectNewItemPosition.name}</b> on the map!
             </span>
           )}
-          {selectNewItemPosition && 'menuIcon' in selectNewItemPosition && (
+          {selectNewItemPosition && 'markerIcon' in selectNewItemPosition && (
             <span className='tw:text-lg'>Select position on the map!</span>
           )}
         </div>

lib/src/Components/Map/hooks/useSelectPosition.tsx

@@ -97,11 +97,11 @@ function useSelectPositionManager(): {
   useEffect(() => {
     if (selectPosition != null) {
       // selectPosition can be null, Layer or Item
-      if ('menuIcon' in selectPosition) {
+      if ('markerIcon' in selectPosition) {
         // if selectPosition is a Layer
         mapClicked &&
           mapClicked.setItemFormPopup({
-            layer: selectPosition,
+            layer: selectPosition as LayerProps,
             position: mapClicked.position,
           })
         setSelectPosition(null)

lib/src/Components/Profile/ItemFunctions.spec.tsx

@@ -36,7 +36,6 @@ describe('linkItem', () => {
         getItems: vi.fn(),
       },
       name: '',
-      menuIcon: '',
       menuColor: '',
       menuText: '',
       markerIcon: {

lib/src/types/LayerProps.d.ts

@@ -11,7 +11,6 @@ export interface LayerProps {
   data?: Item[]
   children?: React.ReactNode
   name: string
-  menuIcon: string
   menuColor: string
   menuText: string
   markerIcon: MarkerIcon

lib/src/types/MarkerIcon.d.ts

@@ -1,4 +1,6 @@
 export interface MarkerIcon {
   image: string
   size?: number
+  image_outline?: string
+  size_outline?: number
 }