Show Local Weather - coordinates in darksky API request

1

Hello,

How do I take the coordinates I get from my HTML5 Geolocation request and plug them automatically into my darksky API request string?

Working on the Show Local Weather API, I’m able to get a successful response from the darksky API and log it in the console. Also, I’m successfully able to use navigator.geolocation.getCurrentPosition.

What I’m stuck on is how do I add the my latitude & longitude that I get from HTML5 Geolocation to my darksky API request using this format https://api.darksky.net/forecast/[key]/[latitude],[longitude]' ?

I left out my [key]/[latitude],[longitude] for obvious reasons in the below example of my working code :

$(document).ready(function(){
  var long;
  var lat;
 
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      long = position.coords.longitude;
      lat = position.coords.latitude;
      $('#data').html('latitude: ' + lat + '<br>longitude: ' + long);
    });
  }
  
  var api = 'https://crossorigin.me/https://api.darksky.net/forecast/[key]/[latitude],[longitude]';
  
  
 $.getJSON(api, function(data){
    console.log(data.currently);
    })
  
});

Thanks for any and all help!

2

Make your AJAX call inside of your getCurrentPosition callback.

3

Thank you.

I made the AJAX call inside the getCurrentPosition callback. I’m still able to get a successful response from the darksky API and log it in the console however…

Now I’m trying to figure out how to concatenate my coordinates to my API request string :

var api = 'https://crossorigin.me/https://api.darksky.net/forecast/93c9ccf24d15846ad9482aa3a59728d0/' + lat + ' , ' + long;

The above url did not work. Can I get a hint on how to add the coordinates to the string?

Here’s my revised code :

$(document).ready(function(){
  var long;
  var lat;
  var api = 'https://crossorigin.me/https://api.darksky.net/forecast/93c9ccf24d15846ad9482aa3a59728d0/'+lat + ' , ' + long;
  
 
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      long = position.coords.longitude;
      lat = position.coords.latitude;
      $('#data').html('latitude: ' + lat + '<br>longitude: ' + long);
      
      $.getJSON(api, function(data){
    console.log(data.currently);
    });
      
    });
  }
  
  
  

  
});
4

You should have tried printing out the value of api, you would’ve been surprised. Why did you move it at the top?

$(document).ready(function(){
  var long;
  var lat;
  var api = 'https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/93c9ccf24d15846ad9482aa3a59728d0/';
  
 
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      long = position.coords.longitude;
      lat = position.coords.latitude;
	  api += lat + ',' + long;
      $('#data').html('latitude: ' + lat + '<br>longitude: ' + long);
      
      $.getJSON(api, function(data){
    console.log(data);
    });
      
    });
  }
});
  1. avoid using crossorigin, it’s causing trouble. You can read my today’s post - weather app.
  2. you cannot assign long and lat to your api at the top, since the two variables are undefined
  3. you had some spaces in your string and that’s why it wasn’t working
5

Thanks! It’s working.

So it looks like adding api += lat + ',' + long; inside the getCurrentPosition callback function was the trick.

Thanks for clearing that up.

7

Thanks SkyC. There’s certainly lots of confusion about how to handle the cross origin errors.

So, I’ll declare all my variables inside the getCurrentPosition callback function. Also, I’ll avoid using https://cors-anywhere.herokuapp.com/ as well as https://crossorigin.me/ .

I used JSONP in the previous challenge Random Quote Machine. I was not aware of ?callback=?! Seems like a ninja trick from my perspective.

Hey, so will we be running into more cross origin error issues going forward with the next two intermediate front end development projects?