From 9162b172802af37b6a26f7d7d3a2a39cd696f046 Mon Sep 17 00:00:00 2001
From: Marcin Zelent <marcin@zelent.net>
Date: Mon, 5 Dec 2022 11:21:35 +0100
Subject: Fixed loading of assets with a path other than /

---
 package.json               |  1 +
 src/components/Map/Map.tsx | 22 ++++++++++++++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 968247c..e876cf8 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
       "last 1 safari version"
     ]
   },
+  "homepage": ".",
   "devDependencies": {
     "@types/ffprobe-static": "^2.0.1",
     "@types/fluent-ffmpeg": "^2.1.20",
diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
index 6f2f469..33b9970 100644
--- a/src/components/Map/Map.tsx
+++ b/src/components/Map/Map.tsx
@@ -67,7 +67,10 @@ export default function Map({ group, handleMarkerClick }: Props): JSX.Element {
   function getClusterGroupIcon(markerCluster: MarkerCluster): DivIcon {
     const iconUrl = markerCluster
       .getAllChildMarkers()
-      .filter((m) => m.getIcon().options.iconUrl !== '/icons/thumb-placeholder.png')[0]
+      .filter(
+        (m) =>
+          m.getIcon().options.iconUrl !== `${process.env.PUBLIC_URL}/icons/thumb-placeholder.png`,
+      )[0]
       .getIcon().options.iconUrl;
 
     return new DivIcon({
@@ -95,7 +98,8 @@ export default function Map({ group, handleMarkerClick }: Props): JSX.Element {
             position={[mediaItem.latitude as number, mediaItem.longitude as number]}
             icon={
               new Icon({
-                iconUrl: mediaItem.thumbnail ?? '/icons/thumb-placeholder.png',
+                iconUrl:
+                  mediaItem.thumbnail ?? `${process.env.PUBLIC_URL}/icons/thumb-placeholder.png`,
                 iconSize: [36, 36],
                 className: styles.markerIcon,
               })
@@ -174,12 +178,22 @@ export default function Map({ group, handleMarkerClick }: Props): JSX.Element {
               <Marker
                 key={`start-marker-${group.id}-${i}`}
                 position={startCoords as [number, number]}
-                icon={new Icon({ iconUrl: '/icons/start.png', className: styles.iconShadow })}
+                icon={
+                  new Icon({
+                    iconUrl: `${process.env.PUBLIC_URL}/icons/start.png`,
+                    className: styles.iconShadow,
+                  })
+                }
               />
               <Marker
                 key={`finish-marker-${group.id}-${i}`}
                 position={finishCoords as [number, number]}
-                icon={new Icon({ iconUrl: '/icons/finish.png', className: styles.iconShadow })}
+                icon={
+                  new Icon({
+                    iconUrl: `${process.env.PUBLIC_URL}/icons/finish.png`,
+                    className: styles.iconShadow,
+                  })
+                }
               />
             </React.Fragment>
           );
-- 
cgit v1.2.3