add map

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",

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",

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<ReSellerInitialValues>();
+
+    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<ReSellerInitialValues>();
+    const { lat, lng } = values as any;
+    const position: [number, number] = [lat, lng];
+
+    const [t] = useTranslation()
+    return (
+        <div className='mb-4'>
+            <div className='MapInputs '>
+                <Button onClick={() => setShowMap(!showMap)} type="primary">
+                    {showMap ? `${t("practical.Hide")} ${t("practical.Map")}` : `${t("practical.Show")} ${t("practical.Map")}`}
+                </Button>
+            </div>
+                
+            {showMap && (
+                <MapContainer
+                    center={currentPosition || position} // Use currentPosition if available, otherwise fallback to form values
+                    zoom={13}
+                    style={{ height: "200px", width: "100%" }}
+                >
+                    <TileLayer
+                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                        
+
+                    />
+                    <Marker position={currentPosition || position}>
+                 
+                    </Marker>
+                    <LocationMarker />
+                    <CenterMapOnPosition position={currentPosition || position} />
+                </MapContainer>
+            )}
+        </div>
+    );
+};
+
+export default MyMap;