CODEWITHSUNDEEP
javascriptjqueryjsongeolocation
myleschuahiock
myleschuahiock

Reputation: 303

Geolocation always shows Moscow Javascript/JQuery/JSON (Open Weather API)

EDIT: Just finished up the project. New link is up here! http://codepen.io/myleschuahiock/full/pyoZge/

I'm in the process of making a Weather Widget App for my Free Code Camp. Everything except the "city" is a static placeholder. I'm using the Open Weather Api, which makes us to a latitude and longitude. For debugging purposes, I placed the longitude and latitude of my area underneath the time placeholder.

My problem is that when I statically input the lat and lon on my API link, it works just fine. It returns "Mandaluyong City", a nearby city where I live: 

http://api.openweathermap.org/data/2.5/weather?lat=14.603814400000001&lon=121.04907589999999&id=524901&APPID=ca8c2c7970a09dc296d9b3cfc4d06940

But when I do this, where I dynamically add mylatitude and mylongitude, to complete the API link:

  $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + mylatitude + "&lon=" + mylongitude + "&id=524901&appid=ca8c2c7970a09dc296d9b3cfc4d06940", function(json) {
$('.city').html(json.name);

I always get "Moscow" as my city.

Please take a closer look at my Javascript/JQuery code here! http://codepen.io/myleschuahiock/pen/zqYzWm?editors=0010

Thank you very much! Much appreciated!

Upvotes: 0

Views: 466

Answers (3)

Michael
Michael

Reputation: 11904

You can use third-party IP API that provides the name of the city. With use jQuery function $.getJSON()

var openWeatherMap = 'http://api.openweathermap.org/data/2.5/weather';
var APPID = 'APPID';
var ipAPI = 'http://ip-api.com/json/';
$.getJSON(ipAPI).done(function(location) {
    $('.geo').html(location.lat + " " + location.lon);
    $('.city').html(location.city);

    $.getJSON(openWeatherMap, {
        lat: location.lat,
        lon: location.lon,
        APPID: APPID
    }).done(function(weather) {
        $('#temperature').html(weather.main.temp - 273.15);
    })

})

OpenWeatherMap provides the temperature in Kelvin on this I did weather.main.temp - 273.15 to get Celsius

Upvotes: 1

NewToJS
NewToJS

Reputation: 2772

Easy solution for you.

Move the $.getJSON() into your if condition, why attempt to query the weather if the client blocks the location?

As Jaromanda X has pointed out:

navigator.geolocation.getCurrentPosition is asynchronous. So, you're calling $.getJSON before the location is actually determined.

$(document).ready(function() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      $('.geo').html(position.coords.latitude+ " " +position.coords.longitude);
  $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat="+position.coords.latitude+"&lon="+position.coords.longitude+"&id=524901&appid=ca8c2c7970a09dc296d9b3cfc4d06940", function(json) {
    $('.city').html(json.name);
  });        
  });
  }else{
    $(".geo").html("Please turn on Geolocator on Browser.")
  }
});

I hope this helps. Happy coding!

Upvotes: 1

Want to be deleted
Want to be deleted

Reputation: 136

Added

  getName(mylatitude, mylongitude);

and changed 

 $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + mylatitude + "&lon=" + mylongitude + "&id=524901&appid=ca8c2c7970a09dc296d9b3cfc4d06940", function(json) {
       $('.city').html(json.name);
    });

to

 function getName(mylatitude, mylongitude){
    $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + mylatitude + "&lon=" + mylongitude + "&id=524901&appid=ca8c2c7970a09dc296d9b3cfc4d06940", function(json) {
       $('.city').html(json.name);
    });
 }

http://codepen.io/anon/pen/Yqzvbd?editors=0010

Upvotes: 1

Related Questions