snow snow - 1 year ago 54
Javascript Question

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

I am in the process of building a local weather app on codepen. I am using

method to get the current position, storing the respective longitude and latitude values in
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 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");


function getLocation() {
if (navigator.geolocation) {

function getPosition(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var weatherURL = "" + lat + "," + lng + ".json",
forecastURL = "" + lat + "," + lng + ".json";

$.getJSON(weatherURL, weatherJSON);

function weatherJSON(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.

Answer Source

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.

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:

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