From 6821d4bfca0226ab453a21f3d60ee1be1494b350 Mon Sep 17 00:00:00 2001 From: Juthatip McDevitt Date: Fri, 22 Mar 2024 15:55:21 -0500 Subject: [PATCH] added city map --- weather_app/app/components/map/MapApp.tsx | 46 +++++++++++++++++++++ weather_app/app/page.tsx | 5 +++ weather_app/package-lock.json | 50 ++++++++++++++++++++++- weather_app/package.json | 7 +++- 4 files changed, 104 insertions(+), 4 deletions(-) create mode 100644 weather_app/app/components/map/MapApp.tsx diff --git a/weather_app/app/components/map/MapApp.tsx b/weather_app/app/components/map/MapApp.tsx new file mode 100644 index 0000000..6a88627 --- /dev/null +++ b/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 ( +
+

Loading...

+
+ ); + } + + + return ( +
+ + + + +
+ ) +} + +export default MapApp \ No newline at end of file diff --git a/weather_app/app/page.tsx b/weather_app/app/page.tsx index 104c40b..cd10ff5 100644 --- a/weather_app/app/page.tsx +++ b/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() { + {/*--- map ---*/} +
+ +
diff --git a/weather_app/package-lock.json b/weather_app/package-lock.json index afb90c6..7c15967 100644 --- a/weather_app/package-lock.json +++ b/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-dom": "^18", + "react": "^18.2.0", + "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", diff --git a/weather_app/package.json b/weather_app/package.json index 0d8e866..6683ccc 100644 --- a/weather_app/package.json +++ b/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-dom": "^18", + "react": "^18.2.0", + "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",