From c3edef43d50c755acdf3765ec76eef241c8d0193 Mon Sep 17 00:00:00 2001 From: karimaldeen Date: Tue, 24 Sep 2024 15:22:41 +0300 Subject: [PATCH] add map --- package-lock.json | 49 ++++++++++++++ package.json | 2 + src/Pages/Admin/Reseller/field/MyMap.tsx | 81 ++++++++++++++++++++++++ 3 files changed, 132 insertions(+) create mode 100644 src/Pages/Admin/Reseller/field/MyMap.tsx diff --git a/package-lock.json b/package-lock.json index 140b5e8..7d07037 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "i18next": "^23.11.5", "install": "^0.13.0", "katex": "^0.16.11", + "leaflet": "^1.9.4", "lottie-react": "^2.4.0", "mathjax": "^3.2.2", "mathjax-full": "^3.2.2", @@ -41,6 +42,7 @@ "react-katex": "^3.0.1", "react-latex": "^2.0.0", "react-latex-next": "^3.0.0", + "react-leaflet": "^4.2.1", "react-mathjax": "^1.0.1", "react-mathjax-preview": "^2.2.6", "react-mathjax2": "^0.0.2", @@ -3020,6 +3022,16 @@ "react-dom": ">=16.9.0" } }, + "node_modules/@react-leaflet/core": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz", + "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==", + "peerDependencies": { + "leaflet": "^1.9.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, "node_modules/@remix-run/router": { "version": "1.19.0", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.0.tgz", @@ -8124,6 +8136,11 @@ "node": ">=6" } }, + "node_modules/leaflet": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", + "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==" + }, "node_modules/leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -12896,6 +12913,19 @@ "katex": "cli.js" } }, + "node_modules/react-leaflet": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz", + "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==", + "dependencies": { + "@react-leaflet/core": "^2.1.0" + }, + "peerDependencies": { + "leaflet": "^1.9.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, "node_modules/react-markdown": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-9.0.1.tgz", @@ -17392,6 +17422,12 @@ "rc-util": "^5.38.0" } }, + "@react-leaflet/core": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz", + "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==", + "requires": {} + }, "@remix-run/router": { "version": "1.19.0", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.0.tgz", @@ -21187,6 +21223,11 @@ "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==", "dev": true }, + "leaflet": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", + "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==" + }, "leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -24356,6 +24397,14 @@ "katex": "^0.16.0" } }, + "react-leaflet": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz", + "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==", + "requires": { + "@react-leaflet/core": "^2.1.0" + } + }, "react-markdown": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-9.0.1.tgz", diff --git a/package.json b/package.json index 75fcf51..f349b28 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "i18next": "^23.11.5", "install": "^0.13.0", "katex": "^0.16.11", + "leaflet": "^1.9.4", "lottie-react": "^2.4.0", "mathjax": "^3.2.2", "mathjax-full": "^3.2.2", @@ -36,6 +37,7 @@ "react-katex": "^3.0.1", "react-latex": "^2.0.0", "react-latex-next": "^3.0.0", + "react-leaflet": "^4.2.1", "react-mathjax": "^1.0.1", "react-mathjax-preview": "^2.2.6", "react-mathjax2": "^0.0.2", diff --git a/src/Pages/Admin/Reseller/field/MyMap.tsx b/src/Pages/Admin/Reseller/field/MyMap.tsx new file mode 100644 index 0000000..cec20df --- /dev/null +++ b/src/Pages/Admin/Reseller/field/MyMap.tsx @@ -0,0 +1,81 @@ +import React, { useState, useEffect } from 'react'; +import { MapContainer, TileLayer, Marker, Popup, useMapEvents, useMap } from 'react-leaflet'; +import 'leaflet/dist/leaflet.css'; +import L from 'leaflet'; +import { Input, Button } from 'antd'; +import { useFormikContext } from 'formik'; +import { ReSellerInitialValues } from '../../../../types/ReSeller'; +import { useTranslation } from 'react-i18next'; + +// Fix for marker icon issue +//@ts-ignore +delete L.Icon.Default.prototype._getIconUrl; +L.Icon.Default.mergeOptions({ + iconRetinaUrl: 'https://unpkg.com/leaflet/dist/images/marker-icon-2x.png', + iconUrl: 'https://unpkg.com/leaflet/dist/images/marker-icon.png', + shadowUrl: 'https://unpkg.com/leaflet/dist/images/marker-shadow.png', +}); + +const LocationMarker: React.FC = () => { + const { setFieldValue } = useFormikContext(); + + useMapEvents({ + click(e) { + const { lat, lng } = e.latlng; + setFieldValue('lat', lat); // Update latitude in Formik + setFieldValue('lng', lng); // Update longitude in Formik + }, + }); + + return null; +}; + +const CenterMapOnPosition: React.FC<{ position: [number, number] }> = ({ position }) => { + const map = useMap(); + + useEffect(() => { + map.setView(position, map.getZoom()); + }, [position, map]); + + return null; +}; + +const MyMap: React.FC = () => { + const [showMap, setShowMap] = useState(false); // State to control map visibility + const [currentPosition] = useState<[number, number] | null>(null); // State to hold current position + const { values } = useFormikContext(); + const { lat, lng } = values as any; + const position: [number, number] = [lat, lng]; + + const [t] = useTranslation() + return ( +
+
+ +
+ + {showMap && ( + + + + + + + + + )} +
+ ); +}; + +export default MyMap;