added city map
This commit is contained in:
parent
78fe037e63
commit
6821d4bfca
4 changed files with 104 additions and 4 deletions
46
weather_app/app/components/map/MapApp.tsx
Normal file
46
weather_app/app/components/map/MapApp.tsx
Normal file
|
|
@ -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='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'/>
|
||||
<FlyToActiveCity activeCityCords={activeCityCords}/>
|
||||
</MapContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MapApp
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
50
weather_app/package-lock.json
generated
50
weather_app/package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue