diff --git a/package-lock.json b/package-lock.json index d1cb017..fd6c510 100644 --- a/package-lock.json +++ b/package-lock.json @@ -58,11 +58,11 @@ } }, "node_modules/@babel/code-frame": { - "version": "7.22.13", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz", - "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==", + "version": "7.23.5", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz", + "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", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz", - "integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==", + "version": "7.23.5", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.5.tgz", + "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", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz", - "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==", + "version": "7.23.4", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz", + "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==", "engines": { "node": ">=6.9.0" } @@ -300,9 +300,9 @@ } }, "node_modules/@babel/highlight": { - "version": "7.22.20", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz", - "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==", + "version": "7.23.4", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz", + "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", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz", - "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==", + "version": "7.23.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.5.tgz", + "integrity": "sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ==", "dev": true, "bin": { "parser": "bin/babel-parser.js" @@ -380,19 +380,19 @@ } }, "node_modules/@babel/traverse": { - "version": "7.23.0", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.0.tgz", - "integrity": "sha512-t/QaEvyIoIkwzpiZ7aoSKK8kObQYeF7T2v+dazAYCb8SXtp58zEVkWW7zAnju8FNKNdr4ScAOEDmMItbyOmEYw==", + "version": "7.23.5", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.5.tgz", + "integrity": "sha512-czx7Xy5a6sapWWRx61m1Ke1Ra4vczu1mCTtJam5zRTBOonfdJ+S/B6HYmGYu3fJtr8GGET3si6IhgWVBhJ/m8w==", "dev": true, "dependencies": { - "@babel/code-frame": "^7.22.13", - "@babel/generator": "^7.23.0", + "@babel/code-frame": "^7.23.5", + "@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/types": "^7.23.0", + "@babel/parser": "^7.23.5", + "@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", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz", - "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==", + "version": "7.23.5", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.5.tgz", + "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" }, diff --git a/public/markers/brusov.png b/public/markers/brusov.png deleted file mode 100644 index 1e65fc1..0000000 Binary files a/public/markers/brusov.png and /dev/null differ diff --git a/public/markers/ostrovskiy.png b/public/markers/ostrovskiy.png deleted file mode 100644 index 22573a8..0000000 Binary files a/public/markers/ostrovskiy.png and /dev/null differ diff --git a/public/markers/prishvin.png b/public/markers/prishvin.png deleted file mode 100644 index 867775f..0000000 Binary files a/public/markers/prishvin.png and /dev/null differ diff --git a/src/KartaPage.tsx b/src/KartaPage.tsx index e3a1fd3..b1808fd 100644 --- a/src/KartaPage.tsx +++ b/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 [articles, setArticles] = useState(null); + const [initial, setInitial] = useState([]); + 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 ( <> - +
a.id)] } layout={{ - "icon-image": [ - "concat", - "marker-", - ["get", "id"] - ], + "icon-image": ["concat", "marker-", ["get", "id"]], "icon-size": [ "interpolate", ["linear"], @@ -300,7 +335,7 @@ export function KartaPage() {