Weather App - Problems I want to solve!


#1

Hi guys, this is actually my first time posting! I finally created a functioning weather app but I have a few problems I cannot seem to solve by myself… Please help and thank you in advance for helping!

Problem 1. My weather app doesn’t work when opened through messaging apps and/or on some Androids.

Problem 2. How the location is displayed is inconsistent. Sometimes a detailed address. Sometimes a general neighborhood location. I don’t want to show a detail address of the user’s location. I want to show Country, State, City, and a neighborhood ALL THE TIME. I’ve read the documentation on Google Maps API and I thought I coded correctly… But I guess not… Why inconsistent though?

Problem 3. The smily icon displayed on Mac Sierra. I want to display a simple smiley not the Mac emoji… Is there anything I can do about it?

Problem 4. Loading time is too long?


#2

This can be difficult to debug. It seems you have your location hooked up correctly with success and error functions. Perhaps your alert() messages are getting blocked - you can replace those with error messages that get added to the bottom of your weather page and see if you can get more meaningful debug information.


Reverse geocoding is not an exact science unfortunately. You basically need to loop through all the data returned and:

  • country will have types: [country, political]
  • state/region/province will have types: [administrative_area_level_1, political]
  • city will have types: [locality, political] or [administrative_area_level_2, political] if [locality, political] isn’t available.

Unfortunately, some places around the world just don’t have the information we need, so that’s about the best we can do based on what I’ve tried and researched. Here is a tutorial with code comments:

https://codepen.io/skycoder/pen/KmEOeK?editors=0010


You can use more standard looking emojis by adding an emoji font to your web page. See here for more info: https://afeld.github.io/emoji-css/


Your loading time isn’t that bad for me (a little over 2 seconds). It might depend on your location, so you may want to consider using the same CDN for all of your resources. You can upload everything you need to GitHub and use https://rawgit.com to get a CDN link.

You could also chop a few milliseconds off by getting rid of your for loop that determines what icon to show. Just do icons.add("weather-icon", data.currently.icon); instead.


#3

Thank you thank you thank you!

Let me try your suggestions NOW! I’ve been wanting to solve these for a couple days.