fix: load icons from public links

src/KartaPage.tsx

@@ -16,11 +16,8 @@ import Fuse from "fuse.js";
 import mapstyle from "./assets/basemap-mapbox.json";
 import plus from "./assets/plus.png";
 import minus from "./assets/minus.png";
-
 import pin from "./assets/pin.png";
-import prishvin from "./assets/prishvin.png";
+
-import ostrovskiy from "./assets/ostrovskiy.png";
-import brusov from "./assets/brusov.png";
 
 export function KartaPage() {
   const mapRef = useRef(null);
@@ -35,22 +32,16 @@ export function KartaPage() {
 
   // Load icons
   const handleMapLoad = (e) => {
-    const icons = ["pin", "prishvin", "ostrovskiy", "brusov"];
     const pinImage = new Image();
     pinImage.src = pin;
     pinImage.onload = () => mapRef.current.addImage("pin-marker", pinImage);
-    const prishvinImage = new Image();
+
-    prishvinImage.src = prishvin;
+    const icons = initial ? ["prishvin", "ostrovskiy", "brusov"] : [];
-    prishvinImage.onload = () =>
+    icons.map(i => {
-      mapRef.current.addImage("prishvin-marker", prishvinImage);
+      const iconImage = new Image();
-    const ostrovskiyImage = new Image();
+      iconImage.src = `./markers/${i}.png`
-    ostrovskiyImage.src = ostrovskiy;
+      iconImage.onload = () => mapRef.current.addImage(`${i}-marker`, iconImage);
-    ostrovskiyImage.onload = () =>
+    })
-      mapRef.current.addImage("ostrovskiy-marker", ostrovskiyImage);
-    const brusovImage = new Image();
-    brusovImage.src = brusov;
-    brusovImage.onload = () =>
-      mapRef.current.addImage("brusov-marker", brusovImage);
   };
 
   // Load articles
@@ -58,6 +49,7 @@ export function KartaPage() {
     fetch(`${host}/api/articles?populate=*`)
       .then((r) => r.json())
       .then((d) => {
+        console.log(d.data)
         setInitial(d.data);
         setArticles(d.data);
       });