From 9df514fcdc3279790a20312f3a50472f885bad8c Mon Sep 17 00:00:00 2001
From: gman <gman>
Date: Sun, 12 Nov 2023 17:31:04 +0300
Subject: [PATCH] feat: dynamic icons from strapi

---
 src/KartaPage.tsx | 30 ++++++++++++------------------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/KartaPage.tsx b/src/KartaPage.tsx
index 405f56c..e3a1fd3 100644
--- a/src/KartaPage.tsx
+++ b/src/KartaPage.tsx
@@ -42,12 +42,13 @@ export function KartaPage() {
     pinImage.src = pin;
     pinImage.onload = () => mapRef.current.addImage("pin-marker", pinImage);
 
-    const icons = initial ? ["prishvin", "ostrovskiy", "brusov"] : [];
-    icons.map((i) => {
-      const iconImage = new Image();
-      iconImage.src = `./markers/${i}.png`;
-      iconImage.onload = () =>
-        mapRef.current.addImage(`${i}-marker`, iconImage);
+    const markers = initial.map(article => ({markerName: `marker-${article.id}`, markerUrl: `${host}${article.attributes.marker.data.attributes.formats.thumbnail.url}`}));  
+    markers.map((m) => {
+      const markerImage = new Image();
+      markerImage.crossOrigin = "Anonymous"; // https://stackoverflow.com/questions/22097747/how-to-fix-getimagedata-error-the-canvas-has-been-tainted-by-cross-origin-data
+      markerImage.src = m.markerUrl;
+      markerImage.onload = () =>
+        mapRef.current.addImage(m.markerName, markerImage);
     });
   };
 
@@ -56,7 +57,6 @@ export function KartaPage() {
     fetch(`${host}/api/articles?populate=*`)
       .then((r) => r.json())
       .then((d) => {
-        console.log(d.data);
         setInitial(d.data);
         setArticles(d.data);
       });
@@ -265,24 +265,18 @@ export function KartaPage() {
               }
               layout={{
                 "icon-image": [
-                  "match",
-                  ["get", "id"],
-                  6,
-                  "ostrovskiy-marker",
-                  7,
-                  "brusov-marker",
-                  1,
-                  "prishvin-marker",
-                  "pin-marker",
+                  "concat",
+                  "marker-",
+                  ["get", "id"]
                 ],
                 "icon-size": [
                   "interpolate",
                   ["linear"],
                   ["zoom"],
                   12,
-                  0.05,
+                  0.4,
                   14,
-                  0.1,
+                  0.8,
                 ],
               }}
               minzoom={12}