I have been trying to alert the link with the geolocation (to check if its working ok) but i cant figure out how to do it, can you guys give me a hint with that?
Heres the code:
So, I’m new at this myself, so feel free to ignore everything I say.
When I looked at your code, it looks like most of the work is done in a function called getGeo(). But, I don’t see anywhere that you are actually calling the function. I added a simple getGeo(); at the end of your JS and when I view the console, it tells me “getCurrentPosition() and watchPosition() are deprecated on insecure origins…” You many want to experiment with another way of getting the coordinates. Once you are able to get the coordinates, you can continue to debug your app.
As for calling the function, in terms of just getting the app working, you could call getGeo() on page load, or make it work on the click of a button, or whatever you want really.
I see you’ve only asked for a hint, so I’ll leave it at that. Let me know if you have any other questions though, I’d be happy to try to help!
1 Like
you are only defining the functions but not calling them.
1 Like
Your reply helped me a lot! I am trying to figure out a way to call to alertMsg ONLY if getGeo is successful and after calling getGeo, how can I do that?
From what I can tell from your code, you are trying to show an alert that contains the newerLink variable. If that is what you want to do, I would actually just move the alert(newerLink) link into you getGeo() function. If you put it inside of your if statement, it will only run if geolocation is supported on the machine/device that is running the program. The if (navigator.geolocation) statement is just checking to make sure that geolocation is supported. If it is, then it will run everything else in the code block.
The issue that I see is that you can’t actually get the coordinates using codepen with this method (I don’t think anyway). I always get the “deprecated on insecure origins…” message. So, your longitude/latitude variables are undefined because you’re not actually pulling in the data. I had this problem too, and I ended up having to use http://ip-api.com to get the longitude/latitude. Once you are on the site, click the API documentation link (http://ip-api.com/docs) and look at the JSON format.
Once you’ve got the longitude/latitude coming in correctly, you should be able to continue to work on your program.
Hope that helps!
Use https instead of http to allow location access (at least on chrome). Also if you want to do something with function data after it’s executed use a callback, not JQuery. I made a fiddle that will produce an alert with your link with the correct values only after location is fetched, once a button is clicked. Don’t use external APIs unless you need to. It’s commented but if you need any help, give me a reply.
https://jsfiddle.net/imtoobose/dyq3f230/
P.S. You don’t need to copy paste all of font awesome to use it. Just visit this link to get a link to their CDN which you have to paste in your <head> section. In Codepen you can do this in the HTML options. Then use the icons as usual. Alternatively use my preference: Ionicons. It’s a font-icon pack like font awesome without all the email stuff involved.
—>Ionicons CDN: ( https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css )
—>Paste it in your <head> or write @import url(' CDN link ') in your CSS.
—>Look up the icons here
1 Like
Another issue you may want to look at is that the geolocation API does not play well with Codepen, especially when you’re running Chrome. To work around the issue I had to use the API from ip.api.com to get my coordinates. While this solution is not as accurate it is cross browser compatible, and for the sake of this challenge was good enough.
The only issue I’ve had with geolocation with Codepen was a chrome issue: it did not let me get data without using a https link. What other problems are there?
For some reason using the standard geolocation API for me failed right out of the box. Not in my test environment, mind you. But just in codepen itself. As a result the code that’s sitting locally on my machine is just a little bit different than the one I have live on codepen. The local server version using geolocation looks like this:
...
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
...
The one on codepen looks like this:
...
$.getJSON('http://ip-api.com/json', function(data) {
var lat = data.lat;
var lon = data.lon;
...
With the exception of where I got my coordinates from, both apps work more or less identiacally.