Skip to content
Home
Categories
Blog
Home
Categories
Blog
About Us
Country Shapes Map
Contact Us
About Us
Country Shapes Map
Contact Us
$
0.00
0
Cart
$
0.00
0
Cart
Home
About Us
Categories
Blog
Country Shapes
Contact Us
Home
About Us
Categories
Blog
Country Shapes
Contact Us
{ const [selectedCountry, setSelectedCountry] = useState(null); const [weather, setWeather] = useState(null); const handleCountryClick = async (geo) => { const countryName = geo.properties.name; setSelectedCountry(countryName); // Fetch weather details (Replace with an actual API key and URL) try { const response = await fetch( `https://api.openweathermap.org/data/2.5/weather?q=${countryName}&appid=YOUR_API_KEY&units=metric` ); const data = await response.json(); setWeather({ temp: data.main.temp, description: data.weather[0].description, }); } catch (error) { console.error("Error fetching weather data:", error); setWeather(null); } }; return (
Select a Country
{({ geographies }) => geographies.map((geo) => (
handleCountryClick(geo)} style={{ default: { fill: "#DDD", stroke: "#000", outline: "none" }, hover: { fill: "#F53", stroke: "#000", outline: "none" }, pressed: { fill: "#E42", stroke: "#000", outline: "none" }, }} /> )) }
{selectedCountry && (
{selectedCountry}
{weather ? (
Temperature: {weather.temp}°C, {weather.description}
) : (
Loading weather...
)}
)}
); }; export default WorldMap; frameborder="0">
Scroll to Top