# Show Local Weather - coordinates in darksky API request

**URL:** <https://forum.freecodecamp.org/t/show-local-weather-coordinates-in-darksky-api-request/136558>\
**Category:** General\
**Tags:** weatherapp, localweather, javascript\
**Created:** [July 16, 2017, 7:26pm UTC](https://forum.freecodecamp.org/t/show-local-weather-coordinates-in-darksky-api-request/136558 "2017-07-16T19:26:11Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![wallwalker](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/wallwalker/32/116596_2.png) [@wallwalker](https://forum.freecodecamp.org/u/wallwalker)\
**Post date:** [July 16, 2017, 7:26pm UTC](https://forum.freecodecamp.org/t/show-local-weather-coordinates-in-darksky-api-request/136558/1 "2017-07-16T19:26:11Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![PortableStick](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/portablestick/32/65591_2.png) [@PortableStick](https://forum.freecodecamp.org/u/PortableStick)\
**Post date:** [July 16, 2017, 7:28pm UTC](https://forum.freecodecamp.org/t/show-local-weather-coordinates-in-darksky-api-request/136558/2 "2017-07-16T19:28:28Z")

</div>

Make your AJAX call inside of your `getCurrentPosition` callback.

---

<div class="post-metadata">

**Author:** ![wallwalker](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/wallwalker/32/116596_2.png) [@wallwalker](https://forum.freecodecamp.org/u/wallwalker)\
**Post date:** [July 16, 2017, 8:40pm UTC](https://forum.freecodecamp.org/t/show-local-weather-coordinates-in-darksky-api-request/136558/3 "2017-07-16T20:40:00Z")

</div>

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);
    });
      
    });
  }
  
  
  

  
});
```

---

<div class="post-metadata">

**Author:** ![N4thyra](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/n4thyra/32/60035_2.png) [@N4thyra](https://forum.freecodecamp.org/u/N4thyra)\
**Post date:** [July 16, 2017, 9:09pm UTC](https://forum.freecodecamp.org/t/show-local-weather-coordinates-in-darksky-api-request/136558/4 "2017-07-16T21:09:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![wallwalker](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/wallwalker/32/116596_2.png) [@wallwalker](https://forum.freecodecamp.org/u/wallwalker)\
**Post date:** [July 16, 2017, 9:22pm UTC](https://forum.freecodecamp.org/t/show-local-weather-coordinates-in-darksky-api-request/136558/5 "2017-07-16T21:22:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![wallwalker](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/wallwalker/32/116596_2.png) [@wallwalker](https://forum.freecodecamp.org/u/wallwalker)\
**Post date:** [July 16, 2017, 10:05pm UTC](https://forum.freecodecamp.org/t/show-local-weather-coordinates-in-darksky-api-request/136558/7 "2017-07-16T22:05:43Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 5:59pm UTC](https://forum.freecodecamp.org/t/show-local-weather-coordinates-in-darksky-api-request/136558/8 "2021-01-16T17:59:40Z")

</div>

Closed on January 16, 2021, 5:59pm UTC