From 343e0146ce0abf895b4ef87d2c11946f46ca8192 Mon Sep 17 00:00:00 2001 From: Hemant Chaudhary <104961126+hemant933@users.noreply.github.com> Date: Fri, 12 Jan 2024 23:10:58 +0530 Subject: [PATCH] add world map feature --- src/App.js | 261 +++++++++++++++++++++++++++++++---------------------- 1 file changed, 153 insertions(+), 108 deletions(-) diff --git a/src/App.js b/src/App.js index 6bea8bc..3683fbe 100644 --- a/src/App.js +++ b/src/App.js @@ -5,8 +5,12 @@ import { IoIosWater } from "react-icons/io"; import { BsWind, BsThermometerHalf } from "react-icons/bs"; import { BiMap } from "react-icons/bi"; import { FaSun } from "react-icons/fa"; -import {toast, ToastContainer} from "react-toastify" +import { toast, ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; +import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"; + +import "leaflet/dist/leaflet.css"; +import { Modal, Button } from "react-bootstrap"; const App = () => { const [latitude, setLatitude] = useState(""); @@ -19,107 +23,75 @@ const App = () => { const [description, setDescription] = useState(0); const [name, setName] = useState(0); const [windspeed, setWindspeed] = useState(0); - - // const weatherURLs = { - // clearsky: 'https://t4.ftcdn.net/jpg/05/79/25/43/360_F_579254301_VQ75mtrG9AP45Txrd76TG2xatiBqqms2.jpg', - // partlycloudy: 'https://example.com/partly-cloudy-image.jpg', - // 'rainy': 'https://example.com/rainy-image.jpg', - // 'snowy': 'https://example.com/snowy-image.jpg', - // // Add more descriptions and URLs as needed - // }; - - const determineweatherurl=()=>{ - let imurl="https://www.survivingwithandroid.com/wp-content/uploads/2014/11/android_weather_app.jpg"; // default value - - if(description.includes("clear")){ imurl="https://t4.ftcdn.net/jpg/05/79/25/43/360_F_579254301_VQ75mtrG9AP45Txrd76TG2xatiBqqms2.jpg"} - if(description.includes("thunderstorm")){ imurl="https://img.freepik.com/premium-photo/thunderstorm-with-lightnings-stormy-sky-city-dramatic-weather-background-digital-illustrati_124507-12857.jpg"} - if(description.includes("smoke")){ imurl="https://c0.wallpaperflare.com/preview/906/687/614/sky-clouds-nature-weather.jpg"} - if(description.includes("drizzle")){ imurl="https://media.istockphoto.com/id/1429701799/photo/raindrops-on-asphalt-rain-rainy-weather-downpour.webp?b=1&s=170667a&w=0&k=20&c=lXXWPQuhXI4xZRrr8d1uZGjQasuR-oRS1_GraXO9Fd0="} - if(description.includes("rain")){ imurl="https://img.freepik.com/free-photo/weather-effects-composition_23-2149853295.jpg?size=626&ext=jpg&ga=GA1.1.1412446893.1704931200&semt=ais"} - if(description.includes("snow")){ imurl="https://png.pngtree.com/background/20230525/original/pngtree-winter-scene-of-snow-covered-mountains-and-snowfall-picture-image_2729279.jpg"} - if(description.includes("clouds")){ imurl="https://t4.ftcdn.net/jpg/05/79/25/43/360_F_579254301_VQ75mtrG9AP45Txrd76TG2xatiBqqms2.jpg"} - - // console.log("description:",description); - // console.log("check:",description.includes("smoke")); - // console.log("imurl:",imurl); - return imurl; + const [showWorldMap, setShowWorldMap] = useState(false); + const [clickedLocation, setClickedLocation] = useState(null); + + const handleCloseWorldMap = () => setShowWorldMap(false); + const handleShowWorldMap = () => setShowWorldMap(true); + + const handleMapClick = async (e) => { + const { lat, lng } = e.latlng; + + try { + const { data } = await Axios.get( + `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=a9553eeffc4cfe23a2011d3fb64edc72` + ); + + toast.success(`Weather in clicked location: ${data.weather[0].description}`, { + theme: "dark", + }); + } catch (error) { + console.error("Error fetching weather for clicked location:", error); + toast.error("Unable to fetch weather data for clicked location. Please try again.", { + theme: "dark", + }); } + setClickedLocation({ lat, lng }); + }; + const callbylatlon = async () => { - if(latitude.length !== 0 && longitude.length !== 0){ - await Axios.get( - `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=a9553eeffc4cfe23a2011d3fb64edc72` - ) - .then(({ data }) => { - toast.success("SUCCESSFULLY Fetched weather", { theme: "dark" }); - setDatas(data); - }) - .catch(() => { - toast.error("ERROR, Please check & try again", { theme: "dark" }); - }); - - const igurl=determineweatherurl(); - document.body.style.background = `#f3f3f3 url('${igurl}') no-repeat`; - document.body.style.backgroundSize='cover'; - - } else{ + if (latitude.length !== 0 && longitude.length !== 0) { + try { + const { data } = await Axios.get( + `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=a9553eeffc4cfe23a2011d3fb64edc72` + ); + toast.success("SUCCESSFULLY Fetched weather", { theme: "dark" }); + setDatas(data); + } catch (error) { + toast.error("ERROR, Please check & try again", { theme: "dark" }); + } + + const igurl = determineweatherurl(); + document.body.style.background = `#f3f3f3 url('${igurl}') no-repeat`; + document.body.style.backgroundSize = "cover"; + } else { return toast.warn("Please Give location premission", { theme: "dark" }); } }; const callbyname = async () => { if (city.length !== 0 && country.length !== 0) { - await Axios.get( - `https://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=a9553eeffc4cfe23a2011d3fb64edc72` - ).then(({data}) => { + try { + const { data } = await Axios.get( + `https://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=a9553eeffc4cfe23a2011d3fb64edc72` + ); setDescription(data.weather[0].description || ""); // Ensure description is a string - toast.success("SUCCESSFULLY Fetched weather", {theme: 'dark'}) + toast.success("SUCCESSFULLY Fetched weather", { theme: "dark" }); setDatas(data); - setCity(""); - setCountry(""); - }).catch((err) => { + setCity(""); + setCountry(""); + } catch (err) { toast.error("ERROR, Please check & try again", { theme: "dark" }); - }) - - // const word=description.split(' '); - // const word=description.split(' '); - // console.log("Description:", description); - // const word = description.split(' '); -// console.log("word",word); - // console.log(word); - // const lef = word.join('').toString(); - // console.log(lef); - - // const bgurl = weatherURLs[lef]; - // console.log("a",weatherURLs); - // console.log("b",weatherURLs.lef); - - // document.body.style.background = `#f3f3f3 url('${bgurl}') no-repeat`; - // document.body.style.backgroundSize='cover'; - // console.log("Heeeelo"); - // console.log("bgurl",bgurl); - - const igurl=determineweatherurl(); - document.body.style.background = `#f3f3f3 url('${igurl}') no-repeat`; - document.body.style.backgroundSize='cover'; - - } else{ - return toast.warn("Please Enter Details !!",{theme: "dark"}); - } - }; - - useEffect(() => { - if (description) { - // const word = description.split(' '); - // console.log(word); - - // const bgurl = weatherURLs[word.join('').toLowerCase()] || weatherURLs.default; // Use a default URL if not found - document.body.style.background = `#f3f3f3 url('${determineweatherurl(description)}') no-repeat`; - // console.log("bgurl", bgurl); - document.body.style.backgroundSize='cover'; + } + const igurl = determineweatherurl(); + document.body.style.background = `#f3f3f3 url('${igurl}') no-repeat`; + document.body.style.backgroundSize = "cover"; + } else { + return toast.warn("Please Enter Details !!", { theme: "dark" }); } - }, [description]); + }; const location = () => { navigator.geolocation.getCurrentPosition((position) => { @@ -141,6 +113,43 @@ const App = () => { setWindspeed(datas.wind?.speed); } }, [datas]); + + const determineweatherurl = () => { + let imurl = + "https://www.survivingwithandroid.com/wp-content/uploads/2014/11/android_weather_app.jpg"; // default value + + if (description.includes("clear")) { + imurl = + "https://t4.ftcdn.net/jpg/05/79/25/43/360_F_579254301_VQ75mtrG9AP45Txrd76TG2xatiBqqms2.jpg"; + } + if (description.includes("thunderstorm")) { + imurl = + "https://img.freepik.com/premium-photo/thunderstorm-with-lightnings-stormy-sky-city-dramatic-weather-background-digital-illustrati_124507-12857.jpg"; + } + if (description.includes("smoke")) { + imurl = + "https://c0.wallpaperflare.com/preview/906/687/614/sky-clouds-nature-weather.jpg"; + } + if (description.includes("drizzle")) { + imurl = + "https://media.istockphoto.com/id/1429701799/photo/raindrops-on-asphalt-rain-rainy-weather-downpour.webp?b=1&s=170667a&w=0&k=20&c=lXXWPQuhXI4xZRrr8d1uZGjQasuR-oRS1_GraXO9Fd0="; + } + if (description.includes("rain")) { + imurl = + "https://img.freepik.com/free-photo/weather-effects-composition_23-2149853295.jpg?size=626&ext=jpg&ga=GA1.1.1412446893.1704931200&semt=ais"; + } + if (description.includes("snow")) { + imurl = + "https://png.pngtree.com/background/20230525/original/pngtree-winter-scene-of-snow-covered-mountains-and-snowfall-picture-image_2729279.jpg"; + } + if (description.includes("clouds")) { + imurl = + "https://t4.ftcdn.net/jpg/05/79/25/43/360_F_579254301_VQ75mtrG9AP45Txrd76TG2xatiBqqms2.jpg"; + } + + return imurl; + }; + return (
tru Weather
@@ -179,27 +188,63 @@ const App = () => { > Get Tru Weather By Current Location +
- {temp && -
-

- {temp} °C -

-

- {humidity} % -

-

- {description} -

-

- {name} -

-

- {windspeed}Km/h -

-
- } - + {temp && ( +
+

+ {temp} °C +

+

+ {humidity} % +

+

+ {description} +

+

+ {name} +

+

+ {windspeed}Km/h +

+
+ )} + + + + + World Map + + + + + {clickedLocation && ( + + Clicked Location + + )} + + + + + + ); };