Freecodecamp: Show the Local Weather - getCurrentPosition not working over http

Created on 15 Jun 2016  Â·  20Comments  Â·  Source: freeCodeCamp/freeCodeCamp

Challenge Name

Show the Local Weather

https://www.freecodecamp.com/challenges/show-the-local-weather

Issue Description

getCurrentPosition does not work over http. I think that changing the url to codepen.io in that particular challenge would help others campers not thinking their code isn't correct.

Browser Information

  • Browser Name, Version: Chrome 51.0.2704.84 m
  • Operating System: Windows 10
  • Mobile, Desktop, or Tablet: Desktop

Your Code

// If relevant, paste all of your challenge code in here

Screenshot

image

help wanted projects-frontend

Most helpful comment

Google will not allow you to get geo location anymore over http. And unfortunately the free version of the suggested API to use (Openweathermap) cannot use https unless you pay for it. Instead I would suggest bypassing google altogether to get geolocation and use http://ip-api.com/json to get the information you need based off the IP address.

All 20 comments

You're right, that message is little confusing. Usually you label something as "deprecated" to communicate to your users that it still works, but may be removed in the future. Here these two functions just don't work over http. However, I expect anyone reading this message will figure out themselves to change their url to "https".

I think that changing the url to codepen.io in that particular challenge would help others campers not thinking their code isn't correct.

The pen in the challenge uses a resource that itself is served over http. Hence the URL to the pen is kept as http.

Although it would be great if someone can point us to a https resource. Or an alternate pen that does the job.

Google will not allow you to get geo location anymore over http. And unfortunately the free version of the suggested API to use (Openweathermap) cannot use https unless you pay for it. Instead I would suggest bypassing google altogether to get geolocation and use http://ip-api.com/json to get the information you need based off the IP address.

@stricknein that is precisely the resource that is used in the pen

@raisedadead Ok? Point is people are trying to complete the challenge going off what they were taught prior to the challenge and they will not be able to unless the pay for open weather map and know that the issue is from using http and not https. Some one with some time on their hands should add that as a note on the challenge in order to ease people's frustration. I was just pointing out another API that would work with OWM. That was the only one out of several that I tried that was free and got the job done.

@stricknein There are some other weather APIs available, but they seem to have the same http issue. I think an easy fix to this issue would be to tell people not to use Chrome just for this challenge. Otherwise, is there some API provider that could donate resources to FreeCodeCamp?

As I said earlier just use the one I mentioned. Free and works well. No
need to worry if that is the one used in the example project. Obviously
right your own implementation.

On Monday, June 20, 2016, sthodup1 [email protected] wrote:

@stricknein https://github.com/stricknein There are some other weather
APIs available, but they seem to have the same http issue. I think an easy
fix to this issue would be to tell people not to use Chrome just for this
challenge. Otherwise, is there some API provider that could donate
resources to FreeCodeCamp?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/9145#issuecomment-227213352,
or mute the thread
https://github.com/notifications/unsubscribe/AH_RHI1CfzGATQE4KHjla5Xp5ATLcNLMks5qNtA9gaJpZM4I17Sb
.

As @sthodup1 said, to complete this challenge, avoid Chrome. I used Firefox and set the urls to http and everything was fine for now.

I'm not installing Mozilla just to complete a challenge and many others
will not either. Good thing the API I linked will work as well. I'm not
sure why you guys are making a big deal out of nothing.

On Monday, June 20, 2016, Pedro [email protected] wrote:

As @sthodup1 https://github.com/sthodup1 said, to complete this
challenge, avoid Chrome. I used Firefox and set the urls to http and
everything was fine for now.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/9145#issuecomment-227216021,
or mute the thread
https://github.com/notifications/unsubscribe/AH_RHFclwdFGNm1Q2sYmh_4sXnOGjwFwks5qNtKRgaJpZM4I17Sb
.

I know this isn't the best solution. And in my opinion you won't be installing just to complete a challenge but as a frontend developer you have to be sure that your code will work exactly the same in all the major browsers.

If you're using OS X/Windows, you should have Safari/IE available. I agree that the ip-based geolocation is a good solution for people that want to use Chrome.

Right... Which mine does... Like I said not sure why you guys are so
against using that API. Works well for on browsers and gets the job done
for free. No need to try and make it more complicated then it needs to be.
I mean technically your guys approach will only work for Mozilla. Meanwhile
everyone with chrome will not be able to use your app. And with cross
browser compatabilty being important to web developers I don't see how how
can say just use Mozilla as an answer. Pretty hypocritical statement
considering your suggestion.

On Monday, June 20, 2016, Pedro [email protected] wrote:

I know this isn't the best solution. And in my opinion you won't be
installing just to complete a challenge but as a frontend developer you
have to be sure that your code will work exactly the same in all the major
browsers.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/9145#issuecomment-227219187,
or mute the thread
https://github.com/notifications/unsubscribe/AH_RHAYn1ivTG-1xsAXJ8FqHpF_f2aXLks5qNtUigaJpZM4I17Sb
.

I have found another weather api that is free and works over https.
https://developer.forecast.io/docs/v2
I found it after doing some research but have no idea how reputable the website is. However, the api seems to work well.

In my opinion, it would be better to encourage campers to use the geolocation tools over https and then a secure api rather than having them use a workaround (the ip lookup api).

Edit: That api doesn't have a city name. This could be used to find city if necessary.
https://maps.googleapis.com/maps/api/geocode/json?latlng=40.714224,-73.961452

@RayBB thanks a lot for finding these for us.

Just in case if you have been able to use them in a project, we could quickly fork that and replace the existing one.

Let us know!

@raisedadead I managed to make a simple working example.
https://codepen.io/RayBB/full/ZOQpoN/

As discussed in #9079, forecast.io (Dark Sky) doesn't have city/country in the API, which limits some appeal by showing the user where it's pulling weather from. Also, I'm getting a 500 error on your example @RayBB.

So far, the workaround I've found to work best is to prepend: https://crossorigin.me/ to the openweather API as shown in this quickly thrown together example: https://codepen.io/dhcodes/pen/RRaGjG?editors=1111

Disregard what I just said as I see in the thread for issue #7853 that FCC won't recommend using https://crossorigin.me/ so maybe forecast.io is the only option. As mentioned, forecast.io does lack a city record so the best users could get is a timezone unless they want to use the Google geocoder API too. Here's a quick example I made with forecast.io: https://codepen.io/dhcodes/pen/GqWEaQ

Note that users will also need to add ?callback=? to the end of the URL (similar to the wikipedia project) in order to avoid a 'Access-Control-Allow-Origin' header error.

Hi, just finished the code (will now start the design), the solution was easy enough, https://www.wunderground.com API, it's free (but requires registration to get the API Key ... 500 free connections a day if I remember well) and you can get the weather conditions using coordinates with an address like this (but I didn't find it on their instructions):
https://api.wunderground.com/api/YOUR_KEY_HERE/conditions/q/38.72187429,-9.2286898.json
... and I'll have to include their logo too with very precise instructions for doing it.
Best regards,

@raisedadead, update on this in regards to updating codepen?

For any of my friends having trouble with this:

I was using the IP api and using openweathermap.org, and when i ran it locally as a file saved on my computer it worked fine, when i tried to run it off of codepen, it threw errors at me.

Mixed Content: The page at 'https://codepen.io/jaketripp/full/gWdKXz/' was loaded over HTTPS, but requested an insecure script 'http://ip-api.com/json/?callback=blah blah blah'. This request has been blocked; the content must be served over HTTPS.

Guess what worked? I went up to the url bar of my codepen and MANUALLY REMOVED THE S from the url. Now it works. go figure. good enough for me.

Was this page helpful?
0 / 5 - 0 ratings