feat: circle portraits

package-lock.json

@@ -58,11 +58,11 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.22.13",
+      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
-      "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==",
+      "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
       "dependencies": {
-        "@babel/highlight": "^7.22.13",
+        "@babel/highlight": "^7.23.4",
         "chalk": "^2.4.2"
       },
       "engines": {
@@ -124,12 +124,12 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.23.0",
+      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.5.tgz",
-      "integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==",
+      "integrity": "sha512-BPssCHrBD+0YrxviOa3QzpqwhNIXKEtOa2jQrm4FlmkC2apYgRnQcmPWiGZDlGxiNtltnUFolMe8497Esry+jA==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.23.0",
+        "@babel/types": "^7.23.5",
         "@jridgewell/gen-mapping": "^0.3.2",
         "@jridgewell/trace-mapping": "^0.3.17",
         "jsesc": "^2.5.1"
@@ -261,9 +261,9 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.22.5",
+      "version": "7.23.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
+      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -300,9 +300,9 @@
       }
     },
     "node_modules/@babel/highlight": {
-      "version": "7.22.20",
+      "version": "7.23.4",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
-      "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==",
+      "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.22.20",
         "chalk": "^2.4.2",
@@ -313,9 +313,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.23.0",
+      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.5.tgz",
-      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
+      "integrity": "sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ==",
       "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -380,19 +380,19 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.23.0",
+      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.0.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.5.tgz",
-      "integrity": "sha512-t/QaEvyIoIkwzpiZ7aoSKK8kObQYeF7T2v+dazAYCb8SXtp58zEVkWW7zAnju8FNKNdr4ScAOEDmMItbyOmEYw==",
+      "integrity": "sha512-czx7Xy5a6sapWWRx61m1Ke1Ra4vczu1mCTtJam5zRTBOonfdJ+S/B6HYmGYu3fJtr8GGET3si6IhgWVBhJ/m8w==",
       "dev": true,
       "dependencies": {
-        "@babel/code-frame": "^7.22.13",
+        "@babel/code-frame": "^7.23.5",
-        "@babel/generator": "^7.23.0",
+        "@babel/generator": "^7.23.5",
         "@babel/helper-environment-visitor": "^7.22.20",
         "@babel/helper-function-name": "^7.23.0",
         "@babel/helper-hoist-variables": "^7.22.5",
         "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/parser": "^7.23.0",
+        "@babel/parser": "^7.23.5",
-        "@babel/types": "^7.23.0",
+        "@babel/types": "^7.23.5",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       },
@@ -401,11 +401,11 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.23.0",
+      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.5.tgz",
-      "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
+      "integrity": "sha512-ON5kSOJwVO6xXVRTvOI0eOnWe7VdUcIpsovGo9U/Br4Ie4UVFQTboO2cYnDhAGU6Fp+UxSiT+pMft0SMHfuq6w==",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
+        "@babel/helper-string-parser": "^7.23.4",
         "@babel/helper-validator-identifier": "^7.22.20",
         "to-fast-properties": "^2.0.0"
       },

src/KartaPage.tsx

@@ -25,30 +25,65 @@ import pin from "./assets/pin.png";
 
 export function KartaPage() {
   const mapRef = useRef(null);
-  const [initial, setInitial] = useState(null);
+  const [initial, setInitial] = useState([]);
-  const [articles, setArticles] = useState(null);
+  const [articles, setArticles] = useState([]);
   const [search, setSearch] = useState("");
   const [selected, setSelected] = useState(-1);
   const [cursor, setCursor] = useState("grab");
   const [popupInfo, setPopupInfo] = useState(null);
   const [openedMenu, menuactions] = useDisclosure(false);
 
-
   const host = "https://strapi.litmusmap.ru";
 
+  const roundImage = (img) => {
+    const imgSize = img.width;
+    // const strokeWidth = 4;
+    // Create a canvas element
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+
+    const radius = imgSize / 2;
+    canvas.width = imgSize;
+    canvas.height = imgSize;
+
+    // Create a clipping path in the shape of a circle
+    ctx.beginPath();
+    ctx.arc(radius, radius, radius, 0, 2 * Math.PI);
+    ctx.closePath();
+    ctx.clip();
+
+    ctx.drawImage(img, 0, 0, imgSize, imgSize);
+
+    // Apply a border by drawing a circle with a larger radius and stroke it
+    // ctx.lineWidth = strokeWidth;
+    // ctx.strokeStyle = "white";
+    // ctx.stroke();
+
+    const modifiedImage = canvas.toDataURL(); // Get the modified image as a data URL
+    return modifiedImage;
+  };
+
   // Load icons
-  const handleMapLoad = (e) => {
+  const handleMapLoad = () => {
     const pinImage = new Image();
     pinImage.src = pin;
     pinImage.onload = () => mapRef.current.addImage("pin-marker", pinImage);
 
-    const markers = initial.map(article => ({markerName: `marker-${article.id}`, markerUrl: `${host}${article.attributes.marker.data.attributes.formats.thumbnail.url}`}));  
+    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();
+      const markerImage = new Image(100, 100);
       markerImage.crossOrigin = "Anonymous"; // https://stackoverflow.com/questions/22097747/how-to-fix-getimagedata-error-the-canvas-has-been-tainted-by-cross-origin-data
+      markerImage.onload = () => {
+        const markerImageRounded = new Image();
+        markerImageRounded.src = roundImage(markerImage);
+        markerImageRounded.onload = () => {
+          mapRef.current.addImage(m.markerName, markerImageRounded);
+        };
+      };
       markerImage.src = m.markerUrl;
-      markerImage.onload = () =>
-        mapRef.current.addImage(m.markerName, markerImage);
     });
   };
 
@@ -146,7 +181,11 @@ export function KartaPage() {
 
   return (
     <>
-      <HeaderSimple links={headerLinks.links} openedMenuKarta={openedMenu} menuactionskarta={menuactions}/>
+      <HeaderSimple
+        links={headerLinks.links}
+        openedMenuKarta={openedMenu}
+        menuactionskarta={menuactions}
+      />
       <div style={{ position: "relative" }}>
         <Map
           ref={mapRef}
@@ -246,9 +285,9 @@ export function KartaPage() {
                   ["linear"],
                   ["zoom"],
                   7,
-                  0.5,
+                  0.4,
                   12,
-                  1,
+                  0.8,
                 ],
               }}
               minzoom={7}
@@ -264,11 +303,7 @@ export function KartaPage() {
                   : ["in", "id", ...articles.map((a) => a.id)]
               }
               layout={{
-                "icon-image": [
+                "icon-image": ["concat", "marker-", ["get", "id"]],
-                  "concat",
-                  "marker-",
-                  ["get", "id"]
-                ],
                 "icon-size": [
                   "interpolate",
                   ["linear"],
@@ -300,7 +335,7 @@ export function KartaPage() {
         <Paper
           shadow={"md"}
           radius={0}
-          display={!openedMenu && 'none'}
+          display={!openedMenu && "none"}
           style={{
             position: "absolute",
             top: 0,
@@ -308,7 +343,7 @@ export function KartaPage() {
             right: 0,
             height: "340px",
             opacity: "95%",
-            padding: "55px 0 1rem 1rem"
+            padding: "55px 0 1rem 1rem",
           }}
           sx={{
             "@media (min-width: 60em)": {