added city map

weather_app/app/components/map/MapApp.tsx

@@ -0,0 +1,46 @@
+"use client"
+import React, { useEffect } from 'react'
+import { MapContainer, TileLayer, useMap } from 'react-leaflet'
+import "leaflet/dist/leaflet.css";
+import { useGlobalContext } from '@/app/context/globalContext';
+
+
+function FlyToActiveCity({activeCityCords}){
+    const map  = useMap();
+
+    useEffect(() => {
+        if(activeCityCords){
+            const zoomLevel = 13;
+            const flyToOption = {
+                duration: 2,
+            };
+            map.flyTo([activeCityCords.lat, activeCityCords.lon], zoomLevel, flyToOption); 
+        }
+    }, [activeCityCords, map]);
+    return null;
+}
+
+
+const MapApp = () => {
+    const {forecast} = useGlobalContext();
+    const activeCityCords = forecast?.coord;
+    if(!forecast || !forecast.coord || !activeCityCords){
+        return (
+        <div>
+            <h1>Loading...</h1>
+        </div>
+        );
+    }
+
+
+  return (
+    <div className='flex-1 basis-[50%] border col-span-4 rounded-lg h-[30rem]'>
+        <MapContainer center={[activeCityCords.lat, activeCityCords.lon]} zoom = {13} scrollWheelZoom = {false} style = {{height: "calc(100% - 2rem)", width: "calc(100% - 2rem)"}} className='rounded-lg m-4'>
+            <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'/>
+            <FlyToActiveCity activeCityCords={activeCityCords}/>
+        </MapContainer>
+    </div>
+  )
+}
+
+export default MapApp

weather_app/app/page.tsx

@@ -3,6 +3,7 @@ import AirPollution from "./components/airPollution/AirPollution";
 import DailyForcast from "./components/daily_forcast/DailyForecast";
 import FeelLike from "./components/feelLike/FeelLike";
 import Humidity from "./components/humidity/Humidity";
+import MapApp from "./components/map/MapApp";
 import Pressure from "./components/pressure/Pressure";
 import Sunset from "./components/sunset/Sunset";
 import Temperature from "./components/temp/Temperature";
@@ -31,6 +32,10 @@ export default function Home() {
             <Visibility/>
             <Pressure/>
           </div>
+          {/*--- map ---*/}
+          <div className="mt-5 flex gap-4">
+            <MapApp/>
+          </div>
         </div>
       </div>
     </main>

weather_app/package-lock.json

@@ -18,17 +18,20 @@
         "clsx": "^2.1.0",
         "cmdk": "^1.0.0",
         "embla-carousel-react": "^8.0.0",
+        "leaflet": "^1.9.4",
         "lucide-react": "^0.359.0",
         "moment": "^2.30.1",
         "next": "14.1.4",
         "next-themes": "^0.3.0",
-        "react": "^18",
+        "react": "^18.2.0",
-        "react-dom": "^18",
+        "react-dom": "^18.2.0",
         "react-icons": "^5.0.1",
+        "react-leaflet": "^4.2.1",
         "tailwind-merge": "^2.2.2",
         "tailwindcss-animate": "^1.0.7"
       },
       "devDependencies": {
+        "@types/leaflet": "^1.9.8",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
@@ -931,6 +934,16 @@
         "@babel/runtime": "^7.13.10"
       }
     },
+    "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/@swc/helpers": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
@@ -939,6 +952,21 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.14",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
+      "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==",
+      "dev": true
+    },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.8",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.8.tgz",
+      "integrity": "sha512-EXdsL4EhoUtGm2GC2ZYtXn+Fzc6pluVgagvo2VC1RHWToLGlTRwVYoDpqS/7QXa01rmDyBjJk3Catpf60VMkwg==",
+      "dev": true,
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "20.11.30",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.30.tgz",
@@ -1691,6 +1719,11 @@
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
+    "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/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -2203,6 +2236,19 @@
         "react": "*"
       }
     },
+    "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-remove-scroll": {
       "version": "2.5.5",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",

weather_app/package.json

@@ -19,17 +19,20 @@
     "clsx": "^2.1.0",
     "cmdk": "^1.0.0",
     "embla-carousel-react": "^8.0.0",
+    "leaflet": "^1.9.4",
     "lucide-react": "^0.359.0",
     "moment": "^2.30.1",
     "next": "14.1.4",
     "next-themes": "^0.3.0",
-    "react": "^18",
+    "react": "^18.2.0",
-    "react-dom": "^18",
+    "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
+    "react-leaflet": "^4.2.1",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@types/leaflet": "^1.9.8",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",