Hello. Some time ago, I completed the local weather app project, but soon realized that the API had far more potential than I thought.
Introducing… The global weather app!
It basically fetches the weather for a bunch of locations and displays the data on a map.
However, it’s quite inefficient to say the least and takes a while to load depending on your internet connection.
Any feedback on how to make it better, or optimizations for the code would be appreciated.
Hello @c0d1ng_ma5ter! Looks like it has some potential, but the app isn’t quite functioning on my end. It shows weather for Shuzenji, Japan upon landing, and the temperature digits glitch and tremble for a long time (3+ minutes). Also, I am not able to change locations by clicking on the map during that time, and I don’t quite understand how the different colored tiles on the map work.
As you say, optimizing the code is necessary. It’s too laggy to be even usable, IMO. That being said, other than that, it’s a cool project. I have seen multiple projects of yours, @c0d1ng_ma5ter, and I must say I am always impressed. You are a talented programmer.
Maybe others could help you more with the loading and efficiency optimization if you specified a suspicious area in your code, or maybe a short explanation pointing to what you suspect is the issue. Just a suggestion.
Nice work, as always. Looking forward to experiencing the more efficient version.
Hello!
As for the Shuzenji situation, it’s apparently what happens if you fetch the API with slow internet connection or do it too fast.
The thing then relies on fetching over and over again until it no longer gets data from Shuzenji. It’s slow, but if that isn’t done, the whole map could end up with Shuzenji weather. Sadly, I’m not sure on how to fix that.
As for the weather, basically, the whiter the cloudier, ocean blue is clear skies, and gray is rain, darker gray is a thunderstorm. Snow is light blue.
Thanks for the feedback!
Alright, makes sense. When you made the local version of the weather app, did you have such glitches? If not, maybe you could use that to figure out how to fix this global version.
I’m not well-versed in API use, so forgive me if my feedback isn’t very helpful.
The local version has no issues, somehow.
My guess is I’m making too many requests in a short period of time (idk how to fix that tho)
That’s probably it. I don’t know how to fix it either, lol, but maybe you could try some of these ideas.
How about changing how the program works? Instead of loading data for a bunch of locations at once and thus overloading the API, how about you only load a few? Here are a couple of ideas with that:
Use random location selection: load the map of the world and set it up in such a way so that every time the page is visited, the program chooses, say 10 or 5 random locations across the world on the map and displays their weather data. The user can then also find weather data for a specific place of his choice by selecting a point on the map. This limits the loading to only a handful of locations while still preserving the idea of a global weather app, and also allows, of course, for the user to find the weather for any location of their choice if requested.
Use hover-activated loading on the map: one cool idea that occurred to me is hover activated loading. In other words, if a user has hovered over a certain region on the map (I would recommend dividing it into a grid and then going by what square the mouse coordinates are in) for more than 2 or 3 seconds (to prevent wild loading every time the user moves their mouse), the program loads several of the top 3, 4 or 5 most major cities in that grid region on the map. Also include, of course, the ability for the user to select their own custom location by clicking a point on the map.
I really don’t think it’s very practical to load a ton of locations for a weather app. The whole purpose of a person visiting a weather app is to find the weather for specific locations. It’s inefficient.
But I still like the idea of the map with the global weather. I think it’s cool to see weather across the globe like that, to compare different climates.
It’s actually a problem in general to load massive amounts of weather data. Have you ever visited weather.com or accuweather.com? They’re always so glitchy, so slow. So you’re not the only one struggling with it.
I’m sure there are technical solutions to the problem too. Maybe by not allowing the next load to begin without the first one finishing. Or using setTimout() somehow. Or a much better solution that I’m sure exists.
You are practically preforming a DoS attack on the API. Last test, I counted well over 15,000 requests before it started to send “429 Too Many Requests” responses. Open the network tab and filter it for fetch, you can see the total count of requests in the footer on the bottom left.
Even if this was a commercial API you had paid for, you would get blocked and likely have your API key revoked.
For this to work, you need an API that returns some sort of “world weather” object you can fetch down and work on locally.
yikes. Now that’s bad.
I was unaware of that when I made this project. Do you recommend shutting it down?
That would probably be best.
The API is protecting itself to some degree, which is what happens when it starts to send 429 responses. Any API worth its salt will do that.
I’m not sure, but I think it might also be behind a cloudflare CDN. It might cause protective measures as well, such as banning IPs, or blackholing the requests. Not sure.
This is also, in part, why we mock APIs when developing, so we don’t hit the real API. It is useful for many reasons, one of which is when we inevitably screw up and do some infinite looping or recursive calling.
You should look at a proper weather API and see if it doesn’t provide a better way of getting world weather.
openweathermap has map collections which might do it, they also have bulk API and downloads. Not sure what is free and what isn’t. Just make sure not to make the same mistake, because I’m pretty sure it will just revoke your API key.
Edit: Don’t feel too bad about it.
Anyone who has worked with APIs have made a mistake that caused them to request way too much. It usually just causes the API to send back 429, and you get to correct the error. But it does also use up your max request limit, which means you can’t use the API for the rest of the day. Or worse, if you pay per # requests you now have to pay for it in cash, which could be bad.