Show the Local Weather - can't use geolocation API on insecure server (codepen.io)

with the latest Chrome they’ve finally turned off support for geolocation API on insecure networks.

getCurrentPosition() and watchPosition() are deprecated on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

i don’t know how to locate Chrome users without that API.

the example still works with my actual location, so there must be a way. but i don’t want to cheat and look at that code!

example weather app on codepen

my weather app

can anyone point me in the right direction to find an alternative to geolocation API?

3 Likes

Hello !

Somebody pointed out this URL : http://ip-api.com/json
it returns some basic info about your location, city, lat and longitude.

Use it with your $.getJSON calls. It works fine !

24 Likes

Hello! I did used freegeoip.net for that.

3 Likes

far out! thanks a lot, these will definitely solve my problem :slight_smile:

1 Like

Hi,

I tried to use freegeoip.net in my code, but the problem appeared:

Mixed Content: The page at ‘https://codepen.io/tukhtarov/pen/ONKyGK’ was loaded over HTTPS, but requested an insecure script ‘http://freegeoip.net/jsonp/callback=jQuery22409291584601496425_1463975883316?_=1463975883317’. This request has been blocked; the content must be served over HTTPS.

Are there any alternatives for freegeoip.net that work securely ?

Chrome/Chromium and Opera browsers no longer support geolocation over HTTP:

Regards,
Samir

1 Like

Use either:

http://freegeoip.net/json/

or:

http://ip-api.com/json

They are both accessible over HTTP and you can use them to get location info in JSON.

3 Likes

I will simply copypaste my comment:

 /*
 *********************************
 *** this works over HTTP only ***
 *********************************

 As of Chrome 50, there is no possibility to do 
 geolocation without HTTPS. Okay.

 HTTPS is paid service at OpenWeatherMap.org. Okay.

 Because of HTTP only then - it is freegeoip.net for geolocation.
1 Like

I’m already using freegeoip.net. Here is my code. I’m facing “Mixed Content” problem because codepen works through https while freegeoip.net doesn’t do so.

So I need to find a free service that works through https to get geo coordinates. Are there any out there?

2 Likes

It is still possible to use codepen and plain http, I just checked my app on codepen and it is still working. I’m using the service “GET”, ‘http://ipinfo.io/json’. See Rick’s Weather App on Codepen.

1 Like

I use jQuery getJSON method but it doesn’t work in my app. I see you used native javascript for ajax. Could you explain please why my code doesn’t work?

I had a look and I don’t see a problem, but that doesn’t mean there isn’t one, only that I may not have the experience to see it…

It could be a jQuery/codepen problem. As you pointed out I’m using XHR - XMLHttpRequest and that is working. I looked over the code of the original poster JSDesign and she also solved the issue using XHR. Perhaps consider XHR for your project, at least while hosted on codepen. Sorry I cannot be of more help to you. Perhaps someone else has more to offer you…

Don’t use https on codepen. Use normal http and uncomment your code, it should work !

3 Likes

Thanks! I did that and it works now!

1 Like

@Mizu can I ask you about not commenting your code on Codepen? I had not come across that before, and I don’t want to misunderstand. Were you speaking of this case in particular, or not using comments on Codepen in general? Do you know why, or is it something you have just observed while using it? Thanks a lot!

1 Like

I have seen some people trying to put https in front of codepen to “trick” google into allowing geoLocation. This works in some cases but shouldn’t be used as a solution. The code I’ve seen on codepen regarding this issue had a majority of it’s code commented out (for test purposes ?) and couldn’t work as is.

I should have been clearer about this, the problem was not with commenting stuff on codepen, it’s just that in this case, working code was commented out and the whole program couldn’t work.

1 Like

Thanks for the clarification @Mizu I appreciate you taking the time…

1 Like

It’s not a “trick” to use https on codepen to allow geolocation, it’s in fact the proper way to do it. When you use https (and you really should, for everything) then all APIs you hit must also be https. Thankfully there are plenty of weather APIs that work over https, such as forecast.io. In fact, openweathermaps looks like a lone standout in not working over https, so don’t use it.

5 Likes

Just to clear things up: there are basically two ways to do the weather project on Codepen now due to the Chrome change:

  1. Use the geolocation API and remember to put https in the Codepen URL. For this your weather API also needs to support HTTPS, because any standard HTTP endpoint will give an error about coming from an insecure origin and fail. This rules out the OpenWeatherMap API because they don’t support HTTPS (at least not on the free plan).

  2. Find some other way to get location data (user entry, IP lookup service), then you’re free to use http in your URL and therefore use OpenWeatherMap or another non-HTTPS API. Keep in mind that IP lookup tends to be less accurate, in some cases it might place people in another city/area completely (something a potential employer might notice when checking out your site), and won’t work well if using a proxy/VPN.

4 Likes

Hi,

I tried to use

$.getJSON(“http://freegeoip.net/json/”, function(json) {

			json.forEach(function(val){
			  
			});

but both chrome and firefox console say that json.forEach is not a function? i tried using a local json file using my old random quote machine local set up and the error is no more so I guess the problem is in loading the json from http://freegeoip.net/json/

I also tried http://ipinfo.io/json

same problem.

Am I doing something wrong? thanks