"Stopping the execution because density of top bars is high"

Question

I am in the process of building a local weather app on codepen. I am using geolocation.getCurrentPosition() method to get the current position, storing the respective longitude and latitude values in lat and lng variables. Although when i use console.log() statements, it seems like the longitude and lat values are not returned at all. on top of which i am getting the following messages in my console:

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://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins for more details.

Stopping the execution because density of top bars is high: Object

Although i kindaa get the first error, I am a complete loss with the next two and a google search returned nothing of note. The following is my Javascript code:

    $(document).ready(function() {
  var location = document.getElementsByClassName("location");

  getLocation();

  function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(getPosition);
    }
  }

  function getPosition(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    console.log(lat);
    var weatherURL = "http://api.wunderground.com/api/c1d9333a91ec52f6/conditions/q/" + lat + "," + lng + ".json",
      forecastURL = "https://api.wunderground.com/api/c1d9333a91ec52f6/forecast/q/" + lat + "," + lng + ".json";

    $.getJSON(weatherURL, weatherJSON);

    function weatherJSON(jsonVal) {
      console.log(jsonVal);
      var currentLocation = jsonVal.currentObservation.display_location.full;
      location.innerHTML = currentLocation;

    }
  }
});

I would like the reader to kindly explain the errors and present a solution so that the final log statement displays to the console the complete JSON file thats being fetched by the getJSON method.

Possible duplicate of [Uncaught ReferenceError: $ is not defined?](http://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined) — , Aug 03 '16 at 22:51
the fix that that error is the same as every error of that type, you have a reference called `navi` that does not exist. There is no magic interpretation of this. — , Aug 03 '16 at 22:52
did you read the entire Help Section before posting? I clearly states [one question per question](http://stackoverflow.com/help/how-to-ask). — , Aug 03 '16 at 22:57
The biggest problem with your question is that it's a wall of code -- much of which isn't necessary to debug your problem. Can you reproduce your issue with only a few lines of code? Post that instead. — Lynn Crumbling, Aug 03 '16 at 22:57
@LynnCrumbling my bad. edited the question. Also provided a new codepen link. — snow, Aug 03 '16 at 23:12
@snow Much better. Always post a [mcve]. Have a +1 for bettering your question. More importantly, you got something far better -- a useful answer. — Lynn Crumbling, Aug 03 '16 at 23:38

score 2 · Accepted Answer · answered Aug 03 '16 at 23:19

Ok, I have succesfully debugged your code.

1) getCurrentPosition() and watchPosition() are deprecated on insecure origins This is because Chrome forbids to get location if the site that is requesting is using HTTP and not HTTPS. Solution: load codepen via https://

2) Because of the above issue, you have to load wunderground also with HTTPS. https://api.wunderground.com/api/(...)

X) Stopping the execution because density of top bars is high: Object I didn't see that error in the console.

X) pen.js:95 Uncaught ReferenceError: navi is not defined Same as above.

4) You had a typo, where lon should be lng

5) You had another typo(s), where you were accessing the JSON with this property .currentObservation which doesn't exist, should be .current_observation

6) Don't use location for a variable name, it references the browser's internal window.location object. Solution: change it to something like locationDiv

6.1) In the second line of your code you have var locationDiv = document.getElementsByClassName("location") with this you retrieve an array. If you want to actually assign an element you have to add an index: document.getElementsByClassName("location")[0] Apply the same to the other elements you have at the top of your code.

With all the above, here you have a codepen which works: https://codepen.io/anon/pen/jAvgRX

Note: Now I see that you updated with a shorter codepen. I was working in your first codepen.

two typos... i am ashamed of myself. whats strange is i am still getting the `Stopping the execution because density of top bars is high: Object` error although its not breaking anything. here: http://imgur.com/a/FxOGN — snow, Aug 03 '16 at 23:35
Guessing that the message is being generated by the real-time view created via codepen. — Lynn Crumbling, Aug 03 '16 at 23:40

"Stopping the execution because density of top bars is high"

1 Answers1