Merge branch 'main' into serverside-geocoding

2025-12-13 07:46:10 +00:00 · 2025-11-17 17:26:28 +01:00 · 2025-11-17 17:26:28 +01:00 · a20123cb5d
commit a20123cb5d
parent 9e5141b9df 5cf49cfcd3
18 changed files with 147 additions and 198 deletions
--- a/app/src/App.tsx
+++ b/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,
--- a/backend/directus-config/development/snapshot/fields/layers/markerIcon.json
+++ b/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"
--- a/backend/directus-config/development/snapshot/fields/layers/markerShape.json
+++ b/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,
--- a/backend/directus-config/development/snapshot/fields/marker_icons/image_outline.json
+++ b/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"
-  }
-}
--- a/backend/directus-config/development/snapshot/fields/marker_icons/size_outline.json
+++ b/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
-  }
-}
--- a/backend/directus-config/development/snapshot/relations/marker_icons/image_outline.json
+++ b/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"
-  }
-}
--- a/lib/src/Components/AppShell/SideBar.tsx
+++ b/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}
--- a/lib/src/Components/Map/Layer.tsx
+++ b/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,
      }}
--- a/lib/src/Components/Map/Subcomponents/AddButton.tsx
+++ b/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
-                            src={appState.assetsApi.url + layer.markerIcon.image}
-                            style={{
-                              filter: 'invert(100%) brightness(200%)',
-                              width: `${(layer.markerIcon.size ?? 18) * 1.3}px`,
-                            }}
-                          />
+                          {layer.markerIcon?.image ? (
+                            <img
+                              src={appState.assetsApi.url + layer.markerIcon.image}
+                              style={{
+                                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>
--- a/lib/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
+++ b/lib/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
@ -11,7 +11,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 import FlagIcon from '@heroicons/react/24/outline/FlagIcon'
-import MagnifyingGlassIcon from '@heroicons/react/24/outline/MagnifyingGlassIcon'
+import MapPinIcon from '@heroicons/react/24/outline/MapPinIcon'
 import axios from 'axios'
 import { LatLng, LatLngBounds, marker } from 'leaflet'
 import { useRef, useState } from 'react'
@ -167,56 +167,85 @@ export const SearchControl = () => {
              {itemsResults.length > 0 && tagsResults.length > 0 && (
                <hr className='tw:opacity-50'></hr>
              )}
-              {itemsResults.slice(0, 5).map((item) => (
-                <div
-                  key={item.id}
-                  className='tw:cursor-pointer tw:hover:font-bold tw:flex tw:flex-row'
-                  data-cy='search-item-result'
-                  onClick={() => {
-                    const marker = Object.entries(leafletRefs).find((r) => r[1].item === item)?.[1]
-                      .marker
-                    if (marker) {
-                      navigate(`/${item.id}?${new URLSearchParams(window.location.search)}`)
-                    } else {
-                      navigate(
-                        'item/' + item.id + '?' + new URLSearchParams(window.location.search),
-                      )
-                    }
-                  }}
-                >
-                  {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'
-                    >
-                      <SVG
-                        src={appState.assetsApi.url + item.layer.markerIcon.image}
-                        className='tw:text-current tw:mr-2 tw:mt-0'
-                        style={{ width: `${(item.layer.markerIcon.size ?? 18) * 1.2}px` }}
-                        preProcessor={(code: string): string => {
-                          code = code.replace(/fill=".*?"/g, 'fill="currentColor"')
-                          code = code.replace(/stroke=".*?"/g, 'stroke="currentColor"')
-                          return code
-                        }}
+              {itemsResults.slice(0, 5).map((item) => {
+                // Calculate color using the same logic as PopupView
+                const itemTags =
+                  item.text
+                    ?.match(/#[^\s#]+/g)
+                    ?.map((tag) =>
+                      tags.find((t) => t.name.toLowerCase() === tag.slice(1).toLowerCase()),
+                    )
+                    .filter(Boolean) ?? []
+
+                let color1 = item.layer?.markerDefaultColor ?? '#777'
+                if (item.color) {
+                  color1 = item.color
+                } else if (itemTags[0]) {
+                  color1 = itemTags[0].color
+                }
+
+                return (
+                  <div
+                    key={item.id}
+                    className='tw:cursor-pointer tw:hover:font-bold tw:flex tw:flex-row tw:items-center tw:gap-2'
+                    data-cy='search-item-result'
+                    onClick={() => {
+                      const marker = Object.entries(leafletRefs).find(
+                        (r) => r[1].item === item,
+                      )?.[1].marker
+                      if (marker) {
+                        navigate(`/${item.id}?${new URLSearchParams(window.location.search)}`)
+                      } else {
+                        navigate(
+                          'item/' + item.id + '?' + new URLSearchParams(window.location.search),
+                        )
+                      }
+                    }}
+                  >
+                    {item.layer?.markerIcon?.image ? (
+                      <div
+                        className='tw:p-1.5 tw:rounded-selector tw:text-white tw:h-7 tw:w-7 tw:flex tw:items-center tw:justify-center tw:flex-shrink-0 tw:overflow-hidden'
+                        style={{ backgroundColor: color1 }}
+                        data-cy='search-item-icon'
+                      >
+                        <SVG
+                          src={appState.assetsApi.url + item.layer.markerIcon.image}
+                          className='tw:text-current tw:max-w-full tw:max-h-full'
+                          style={{
+                            width: `${item.layer.markerIcon.size ?? 18}px`,
+                            height: `${item.layer.markerIcon.size ?? 18}px`,
+                          }}
+                          preProcessor={(code: string): string => {
+                            code = code.replace(/fill=".*?"/g, 'fill="currentColor"')
+                            code = code.replace(/stroke=".*?"/g, 'stroke="currentColor"')
+                            return code
+                          }}
+                        />
+                      </div>
+                    ) : (
+                      <div
+                        className='tw:w-7 tw:h-7 tw:flex-shrink-0'
+                        data-cy='search-item-icon-placeholder'
                      />
-                    </div>
-                  ) : (
-                    <div className='tw:w-7' data-cy='search-item-icon-placeholder' />
-                  )}
-                  <div>
-                    <div className='tw:text-sm tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'>
-                      {item.name}
+                    )}
+                    <div className='tw:flex tw:flex-col tw:min-w-0'>
+                      <div className='tw:text-sm tw:font-bold tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap'>
+                        {item.name}
+                      </div>
+                      <div className='tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap'>
+                        {item.text}
+                      </div>
                    </div>
                  </div>
-                </div>
-              ))}
+                )
+              })}
              {Array.from(geoResults).length > 0 &&
                (itemsResults.length > 0 || tagsResults.length > 0) && (
                  <hr className='tw:opacity-50'></hr>
                )}
              {Array.from(geoResults).map((geo) => (
                <div
-                  className='tw:flex tw:flex-row tw:hover:font-bold tw:cursor-pointer'
+                  className='tw:flex tw:flex-row tw:items-center tw:hover:font-bold tw:cursor-pointer tw:gap-2'
                  data-cy='search-geo-result'
                  key={Math.random()}
                  onClick={() => {
@ -249,19 +278,21 @@ export const SearchControl = () => {
                    hide()
                  }}
                >
-                  <MagnifyingGlassIcon
-                    className='tw:text-current tw:mr-2 tw:mt-0 tw:w-5'
-                    data-cy='search-geo-icon'
-                  />
-                  <div>
+                  <div className='tw:h-7 tw:w-7 tw:flex tw:items-center tw:justify-center tw:flex-shrink-0'>
+                    <MapPinIcon
+                      className='tw:text-current tw:w-5 tw:h-5'
+                      data-cy='search-geo-icon'
+                    />
+                  </div>
+                  <div className='tw:flex tw:flex-col tw:min-w-0'>
                    <div
-                      className='tw:text-sm tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'
+                      className='tw:text-sm tw:font-bold tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap'
                      data-cy='search-geo-name'
                    >
                      {geo?.properties.name ? geo?.properties.name : value}
                    </div>
                    <div
-                      className='tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'
+                      className='tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap'
                      data-cy='search-geo-details'
                    >
                      {geo?.properties?.city && `${capitalizeFirstLetter(geo?.properties?.city)}, `}{' '}
@ -281,7 +312,7 @@ export const SearchControl = () => {
              ))}
              {isGeoCoordinate(value) && (
                <div
-                  className='tw:flex tw:flex-row tw:hover:font-bold tw:cursor-pointer'
+                  className='tw:flex tw:flex-row tw:items-center tw:hover:font-bold tw:cursor-pointer tw:gap-2'
                  data-cy='search-coordinate-result'
                  onClick={() => {
                    marker(
@ -306,19 +337,21 @@ export const SearchControl = () => {
                    )
                  }}
                >
-                  <FlagIcon
-                    className='tw:text-current tw:mr-2 tw:mt-0 tw:w-4'
-                    data-cy='search-coordinate-icon'
-                  />
-                  <div>
+                  <div className='tw:h-7 tw:w-7 tw:flex tw:items-center tw:justify-center tw:flex-shrink-0'>
+                    <FlagIcon
+                      className='tw:text-current tw:w-5 tw:h-5'
+                      data-cy='search-coordinate-icon'
+                    />
+                  </div>
+                  <div className='tw:flex tw:flex-col tw:min-w-0'>
                    <div
-                      className='tw:text-sm tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'
+                      className='tw:text-sm tw:font-bold tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap'
                      data-cy='search-coordinate-text'
                    >
                      {value}
                    </div>
                    <div
-                      className='tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'
+                      className='tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap'
                      data-cy='search-coordinate-label'
                    >
                      {'Coordiante'}
--- a/lib/src/Components/Map/Subcomponents/Controls/TagsControl.tsx
+++ b/lib/src/Components/Map/Subcomponents/Controls/TagsControl.tsx
@ -6,7 +6,7 @@ export const TagsControl = () => {
  const removeFilterTag = useRemoveFilterTag()

  return (
-    <div className='tw:flex tw:flex-wrap tw:mt-4 tw:w-[calc(100vw-2rem)] tw:max-w-xs'>
+    <div className='tw:flex tw:flex-wrap tw:mt-4 tw:w-[calc(100vw-2rem)] tw:max-w-xs tw:relative'>
      {filterTags.map((tag) => (
        <div
          key={tag.id}
--- a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/hooks.ts
+++ b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/hooks.ts
@ -33,9 +33,10 @@ export const useNavigationUrl = (coordinates?: [number, number]) => {
 export const useShareLogic = (item?: Item) => {
  const shareUrl = window.location.href
  const shareTitle = item?.name ?? 'Utopia Map Item'
-  const inviteLink = item?.secrets
-    ? `${window.location.origin}/invite/${item.secrets[0].secret}`
-    : shareUrl
+  const inviteLink =
+    item?.secrets && item.secrets.length > 0
+      ? `${window.location.origin}/invite/${item.secrets[0].secret}`
+      : shareUrl

  const copyLink = () => {
    navigator.clipboard
--- a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/index.tsx
+++ b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/index.tsx
@ -85,7 +85,9 @@ export function HeaderView({
        onConfirm={deleteCallback ?? (() => undefined)}
      />

-      <QRModal item={item} isOpen={qrModalOpen} onClose={() => setQrModalOpen(false)} />
+      {showQrButton && (
+        <QRModal item={item} isOpen={qrModalOpen} onClose={() => setQrModalOpen(false)} />
+      )}
    </>
  )
 }
--- a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
+++ b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
@ -5,6 +5,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 import Markdown from 'react-markdown'
+import { Link as RouterLink } from 'react-router-dom'
 import remarkBreaks from 'remark-breaks'

 import { useAddFilterTag } from '#components/Map/hooks/useFilter'
@ -46,7 +47,9 @@ export const TextView = ({
    innerText = replacedText = rawText
  } else if (text === undefined) {
    // Field was omitted by backend (no permission)
-    innerText = replacedText = `Login to see this ${item?.layer?.item_default_name ?? 'item'}`
+    innerText = replacedText = `[Login](/login) to see this ${
+      item?.layer?.item_default_name ?? 'item'
+    }`
  } else if (text === null || text === '') {
    // Field is not set or empty - show nothing
    innerText = ''
@ -127,7 +130,12 @@ export const TextView = ({
      else return children
    }

-    // Default: Link
+    // Internal Link (React Router)
+    if (href.startsWith('/')) {
+      return <RouterLink to={href}>{children}</RouterLink>
+    }
+
+    // External Link
    return (
      <a href={href} target='_blank' rel='noreferrer'>
        {children}
--- a/lib/src/Components/Map/UtopiaMap.tsx
+++ b/lib/src/Components/Map/UtopiaMap.tsx
@ -133,6 +133,7 @@ function UtopiaMap({
          maplibreStyle={maplibreStyle}
          zoomOffset={zoomOffset}
          tileSize={tileSize}
+          showZoomControl={showZoomControl}
        >
          {children}
        </UtopiaMapInner>
--- a/lib/src/Components/Map/UtopiaMapInner.tsx
+++ b/lib/src/Components/Map/UtopiaMapInner.tsx
@ -64,6 +64,7 @@ export function UtopiaMapInner({
  maplibreStyle,
  zoomOffset = 0,
  tileSize = 256,
+  showZoomControl,
 }: {
  children?: React.ReactNode
  geo?: GeoJsonObject
@ -81,6 +82,7 @@ export function UtopiaMapInner({
  maplibreStyle?: string
  zoomOffset?: number
  tileSize?: number
+  showZoomControl?: boolean
 }) {
  const selectNewItemPosition = useSelectPosition()
  const setSelectNewItemPosition = useSetSelectPosition()
@ -285,7 +287,9 @@ export function UtopiaMapInner({
      <Outlet />
      <Control position='topLeft' zIndex='1000' absolute>
        <SearchControl />
-        <TagsControl />
+        <div className={`${showZoomControl ? 'tw:pl-14' : ''}`}>
+          <TagsControl />
+        </div>
      </Control>
      <Control position='bottomLeft' zIndex='999' absolute>
        {showFullscreenControl && <FullscreenControl />}
--- a/lib/src/Utils/MarkerIconFactory.ts
+++ b/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),
--- a/lib/src/types/LayerProps.d.ts
+++ b/lib/src/types/LayerProps.d.ts
@ -13,8 +13,8 @@ export interface LayerProps {
  name: string
  menuColor: string
  menuText: string
-  markerIcon: MarkerIcon
-  markerShape: string
+  markerIcon?: MarkerIcon
+  markerShape?: string
  markerDefaultColor: string
  markerDefaultColor2?: string
  api?: ItemsApi<Item>