diff --git a/frontend/package.json b/frontend/package.json
index 924f8d715ef203e05dfaa2c04366173b40678373..778a2b8851cb4ee93c3d66a2b2de465f08f65769 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,10 +14,14 @@
"@testing-library/user-event": "^13.5.0",
"@types/react": "^18.0.26",
"axios": "^1.2.2",
+ "leaflet": "^1.9.3",
+ "leaflet.markercluster": "^1.5.3",
"moment": "^2.29.4",
"next": "^13.1.1",
"react": "^18.2.0",
+ "react-device-detect": "^2.2.2",
"react-dom": "^18.2.0",
+ "react-leaflet": "^4.2.0",
"styled-components": "^5.3.6",
"web-vitals": "^2.1.4"
},
@@ -49,6 +53,8 @@
},
"devDependencies": {
"@next/eslint-plugin-next": "^12.2.5",
+ "@types/leaflet": "^1.9.0",
+ "@types/react-leaflet": "^2.8.2",
"@typescript-eslint/eslint-plugin": "^5.47.1",
"@typescript-eslint/parser": "^5.47.1",
"eslint": "^8.31.0",
diff --git a/frontend/src/components/dataInteface.ts b/frontend/src/components/dataInteface.ts
index d0d3d51cba250bf2389452912fc6de9ca635463e..1a4dfafaf382b008f27221e2e4293bb000c457b5 100644
--- a/frontend/src/components/dataInteface.ts
+++ b/frontend/src/components/dataInteface.ts
@@ -12,4 +12,11 @@ interface Data {
closestDistance: number;
}
+export interface DataMap {
+ [x: string]: any;
+ firstName: string;
+ positionX: number;
+ positionY: number;
+}
+
export default Data;
diff --git a/frontend/src/components/map.tsx b/frontend/src/components/map.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..217f200be80c78ad7a391836266a175cd24c74b1
--- /dev/null
+++ b/frontend/src/components/map.tsx
@@ -0,0 +1,48 @@
+import { MapContainer, TileLayer, Circle } from 'react-leaflet';
+import { latLng } from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import Data from './dataInteface';
+
+type PageProps = {
+ data: Data;
+};
+
+const Map = (coords: PageProps) => {
+ const center2 = [63.15391166185023, 29.87943304958616];
+
+ const newData = coords.data.map((item: Data) => {
+ const dx = center2[0] - item.positionX;
+ const dy = center2[1] - item.positionY;
+
+ return {
+ position: [
+ 1.00000001 * dx + 0.0015 + 1.000000004 * item.positionX,
+ 1.000000015 * dy + 0.0035 + item.positionY,
+ ],
+ name: `${item.firstName} ${item.lastName}`,
+ };
+ });
+
+ if (typeof window === 'undefined') {
+ return <p>moi</p>;
+ }
+
+ const center = latLng([63.15391166185023, 29.87943304958616]);
+
+ return (
+ <MapContainer center={center} zoom={18} scrollWheelZoom={false} style={{ height: '100%', width: '100%' }}>
+ <TileLayer
+ url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+ attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+ />
+ <Circle center={center} radius={100} color={'red'} fillColor={'blue'} />
+ <Circle center={center} radius={0.2} color={'red'} fillColor={'red'} />
+
+ {newData.map((item: { position: [number, number]; name: string }) => {
+ return <Circle center={latLng(item.position)} radius={2} color={'yellow'} fillColor={'yellow'} />;
+ })}
+ </MapContainer>
+ );
+};
+
+export default Map;
diff --git a/frontend/src/components/violatorsInfo.tsx b/frontend/src/components/violatorsInfo.tsx
index 1a83f605f2167e2d7a98639dc5b6a988f1df7b2a..49ee5e0538d7279f32e1dac9d7dd469d8be80ad8 100644
--- a/frontend/src/components/violatorsInfo.tsx
+++ b/frontend/src/components/violatorsInfo.tsx
@@ -8,6 +8,9 @@ import moment from 'moment';
import { Hidden } from '@mui/material';
import { NextPage } from 'next';
+const LazyMap = dynamic(() => import('./map'), { ssr: false });
+import dynamic from 'next/dynamic';
+
type PageProps = {
data: Data;
};
@@ -126,7 +129,7 @@ export const Violators: NextPage<PageProps> = (ssrData) => {
<Hidden smDown>
<Box sx={{ float: 'left', width: '60%', height: '100vh' }}>
- <p style={{ textAlign: 'center' }}>TÄHÄN TULEE PLOT</p>
+ <LazyMap data={data}></LazyMap>
</Box>
</Hidden>
</Box>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 8ac30040171aad72b3d70c38c364c5c556ad3f7f..0b5eda5b812ea27e9f02e3e793e4e5057de2ac23 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -559,6 +559,11 @@
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
+"@react-leaflet/core@^2.1.0":
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/@react-leaflet/core/-/core-2.1.0.tgz#383acd31259d7c9ae8fb1b02d5e18fe613c2a13d"
+ integrity sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==
+
"@sinclair/typebox@^0.24.1":
version "0.24.51"
resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.51.tgz#645f33fe4e02defe26f2f5c0410e1c094eac7f5f"
@@ -621,6 +626,11 @@
resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.1.tgz#3286741fb8f1e1580ac28784add4c7a1d49bdfbc"
integrity sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q==
+"@types/geojson@*":
+ version "7946.0.10"
+ resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.10.tgz#6dfbf5ea17142f7f9a043809f1cd4c448cb68249"
+ integrity sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==
+
"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
version "2.0.4"
resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@@ -653,6 +663,13 @@
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
+"@types/leaflet@*", "@types/leaflet@^1.9.0":
+ version "1.9.0"
+ resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.9.0.tgz#8caf452255e16cb15e0eabcb0d2a26793da0a6a2"
+ integrity sha512-7LeOSj7EloC5UcyOMo+1kc3S1UT3MjJxwqsMT1d2PTyvQz53w0Y0oSSk9nwZnOZubCmBvpSNGceucxiq+ZPEUw==
+ dependencies:
+ "@types/geojson" "*"
+
"@types/node@*":
version "18.11.18"
resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.18.tgz#8dfb97f0da23c2293e554c5a50d61ef134d7697f"
@@ -682,6 +699,14 @@
dependencies:
"@types/react" "*"
+"@types/react-leaflet@^2.8.2":
+ version "2.8.2"
+ resolved "https://registry.yarnpkg.com/@types/react-leaflet/-/react-leaflet-2.8.2.tgz#85b8d82d5204eee792dedd45ccb555c35b8ae2ac"
+ integrity sha512-Iel8Vd1bSCD38Yhiqcmm/+9hjPEdd39LFE3tBMbOytq3QAQsC3LDrbo6ifoh8JbpqPbCsQPo9Wx5OELHixEShg==
+ dependencies:
+ "@types/leaflet" "*"
+ "@types/react" "*"
+
"@types/react-transition-group@^4.4.5":
version "4.4.5"
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416"
@@ -2032,6 +2057,16 @@ json-stable-stringify-without-jsonify@^1.0.1:
array-includes "^3.1.5"
object.assign "^4.1.3"
+leaflet.markercluster@^1.5.3:
+ version "1.5.3"
+ resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz#9cdb52a4eab92671832e1ef9899669e80efc4056"
+ integrity sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==
+
+leaflet@^1.9.3:
+ version "1.9.3"
+ resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.3.tgz#52ec436954964e2d3d39e0d433da4b2500d74414"
+ integrity sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ==
+
levn@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
@@ -2394,6 +2429,13 @@ queue-microtask@^1.2.2:
resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+react-device-detect@^2.2.2:
+ version "2.2.2"
+ resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-2.2.2.tgz#dbabbce798ec359c83f574c3edb24cf1cca641a5"
+ integrity sha512-zSN1gIAztUekp5qUT/ybHwQ9fmOqVT1psxpSlTn1pe0CO+fnJHKRLOWWac5nKxOxvOpD/w84hk1I+EydrJp7SA==
+ dependencies:
+ ua-parser-js "^1.0.2"
+
react-dom@^18.2.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
@@ -2417,6 +2459,13 @@ react-is@^18.0.0, react-is@^18.2.0:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+react-leaflet@^4.2.0:
+ version "4.2.0"
+ resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-4.2.0.tgz#6c2ee4b576209d9fe40e78006cfa37196c216eaa"
+ integrity sha512-9d8T7hzYrQA5GLe3vn0qtRLJzQKgjr080NKa45yArGwuSl1nH/6aK9gp7DeYdktpdO1vKGSUTGW5AsUS064X0A==
+ dependencies:
+ "@react-leaflet/core" "^2.1.0"
+
react-transition-group@^4.4.5:
version "4.4.5"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
@@ -2733,6 +2782,11 @@ typescript@4.9.4:
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.4.tgz#a2a3d2756c079abda241d75f149df9d561091e78"
integrity sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==
+ua-parser-js@^1.0.2:
+ version "1.0.32"
+ resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.32.tgz#786bf17df97de159d5b1c9d5e8e9e89806f8a030"
+ integrity sha512-dXVsz3M4j+5tTiovFVyVqssXBu5HM47//YSOeZ9fQkdDKkfzv2v3PP1jmH6FUyPW+yCSn7aBVK1fGGKNhowdDA==
+
unbox-primitive@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"