Geolocation feature is malfunctioning on Codepen

Currently working on a weather app implementation within CodePen. The app functions properly when running on localhost, requesting permission to use navigator.geolocation and displaying the weather upon acceptance. However, I've encountered an issue where CodePen does not prompt for permission.

For those interested, here is the link:

http://codepen.io/asamolion/pen/BzWLVe

Provided below is the JavaScript function:

function getWeather() {
    'use strict';
    $('#getWeatherButton').hide();
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var url = 'http://api.openweathermap.org/data/2.5/weather?APPID=53ac88144e6ee627ad0ed85277545ff9';
            //var url = 'example.js';
            var apiCall = url + '&lat=' + position.coords.latitude + '&lon=' + position.coords.longitude;
            //window.location.href = apiCall;
            $.getJSON(apiCall, function (json) {
                setSkycon(parseInt(json.weather[0].id, 10));
                $('#location').html(json.name + ', ' + json.sys.country);
                var temp = (Math.round((json.main.temp - 273.15) * 100) / 100);
                $('#temp').html(temp + '<span id="degree">&deg;</span><span id="FC" onclick="convert()">C</span>');
                $('#condition').html(json.weather[0].main);
            });

        });
    }
};

Any insights on why CodePen fails to prompt for permission would be greatly appreciated!

Answer №1

Dealing with the same issue during the challenge, I found a simple solution. Just make sure to include "https" at the beginning of your Codepen link instead of "http." This adjustment should resolve the problem.

For example:

https://codepen.io/crownedjitter/pen/AXzdvQ

If you are using the following code snippet:

navigator.geolocation.getCurrentPosition();

it should work fine in Chrome.

Answer №2

As per the message displayed on the Chrome console:

The functions getCurrentPosition() and watchPosition() are now considered deprecated on insecure origins. To continue using this feature, it is recommended to switch your application to a secure origin like HTTPS.

For more detailed information, you can refer to: https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins. Essentially, Chrome enforces sending location data over HTTPS only. Nevertheless, developers can still test this functionality using `localhost` as a secure network. I hope this clarifies things for you!

Answer №3

As of Chrome version 50, geolocation services are no longer available on unsecured websites due to security concerns. Learn more about this change here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularJS supports asynchronous validation on blur

Using Angular JS version 1.5.6, I am looking to implement asynchronous input validation that occurs only on blur. However, I am unable to use modelOption: {debounce: 500} or modelOption: {updateOn: 'blur'} due to the directive being used with oth ...

What are the steps to transform my database object into the Material UI Table structure?

I have a MongoDB data array of objects stored in products. The material design format for creating data rows is as follows: const rows = [ createData('Rice', 305, 3.7, 67, 4.3), createData('Beans', 452, 25.0, 51, 4.9), createData ...

Any ideas on how I can enable rotation of SVG images within a Bootstrap 4 Accordion card with just a click?

I'm working on a Bootstrap 4 accordion card that has an SVG arrow image in each header. I am trying to make the arrow rotate 180 degrees when the header is open, and return to its initial state when it is closed or another header is opened. Currently, ...

Having trouble with dynamic path generation for router-link in Vuejs when using a v-for loop?

//main.js import Vue from "vue"; import App from "./App.vue"; import VueRouter from "vue-router"; import HelloWorld from "./components/HelloWorld.vue"; Vue.use(VueRouter); const router = new VueRouter({ routes: [{ path: "/", component: HelloWorld }] } ...

The jQuery function may encounter issues when trying to target elements within an appended HTML form

I am encountering a couple of issues. I have 2 separate JQuery functions, one for appending content and the other for displaying the selected file's name. FUNCTION 1 <script> jQuery( document ).ready(function( $ ) { $("input[name ...

Disable the smooth scroll animation when transitioning between pages using the Link component in NextJS

Not sure if this is a new feature of Next.js, as I didn't encounter this issue in my previous Next.js project. When I reach the bottom of a page and try to navigate to another page, a scroll-to-top animation appears on the destination page. I want to ...

Automatically choose options based on the value of the textbox ng-model when the page loads using Angular

Here is the design of my select element: <select onchange="getVideo()" id="region"> <option ng-repeat="items in region" ng-selected = "items.countryCode === selectedRegion" value="{{items.countryCode}}">{{items.countryItem}}</option> ...

Scroll the div until it reaches the top of the page, then make it fixed in place

Let's dive right in: The code I am working with is as follows: <div id="keep_up"> <div id="thread_menu"> <div id="new_thread"> </div> </div> </div> And here is my CSS: #keep_up { po ...

PubNub's integration of WebRTC technology allows for seamless video streaming capabilities

I've been exploring the WebRTC sdk by PubNub and so far, everything has been smooth sailing. However, I'm facing a challenge when it comes to displaying video from a client on my screen. Following their documentation and tutorials, I have writte ...

Unable to identify the pdf file using multer in node.js

const multer=require('multer'); var fileStorage = multer.diskStorage({ destination:(req,file,cb)=>{ if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/jpg' || file.mimetype==='image/png') { ...

[JSP Tutorial] Step-by-step guide to create a basic sorting algorithm

Hello, I need assistance with coding a list of years that are displayed as shown below: YEAR ==== 2014 2013 2012 Here is the corresponding code snippet: <script type="text/javascript"> jQuery(document).ready(function() { }); </script> ... ...

The issue of WordPress failing to correctly resolve logout URLs within menu items

UPDATE: Adding the code below: alert(LogoutURL); reveals that the URL is not correctly passed to the JS variable. It appears to be encoded when transferred to the JS var. I confirmed this by executing the following in my PHP: <?php echo wp_logout_ur ...

Creating a new JSON by extracting a specific branch or node from an existing JSON data

I have a Nuki Smartlock and when I make two API calls to the Nuki Bridge, I receive JSON responses. I want to apply the same logic to both responses: When requesting for current states, the JSON looks like this: [{ "deviceType": 0, "nuk ...

React Native app experiencing issue with Redux Saga call(fetch...) function failing to return any data

Having a background in Redux, I am delving into Redux-Saga for the first time. Currently, I am working on setting up a login feature using React Native with Redux and Redux-Saga. However, I'm facing an issue where I cannot retrieve the response from t ...

`Hovering over a div triggers a continuous animation loop`

I've gone through various questions and solutions related to this issue, but unfortunately, none of them seem to work for me. It's possible that I might be overlooking something or my scenario is slightly unique. The main problem I'm facing ...

Exploring the functionalities of the modulus operator in Handlebars

I am looking to implement a solution that involves adding a div container holding 4 images based on the JSON data provided below: var pictures = [ {img_path: "1/1.jpg"}, {img_path: "1/2.jpg"}, {img_path: "1/3.jpg"}, {img_path: "1/4 ...

Having trouble establishing a connection between Node.js and a MongoDB Cloud server

I'm encountering some issues trying to access MongoDB Atlas. The database name on MongoDB cloud is star and the collection name is clc. But unfortunately, I keep getting a "Cannot read property of null" error message. const MongoClient = require(&apo ...

Is there a way to restrict the number of concurrent events allowed for each resource?

Utilizing the Fullcalender Library allows for multiple events to occur simultaneously for a single resource by default. Sometimes, it may be necessary to limit the number of concurrent events (e.g. ensuring one person can only attend one event at a time). ...

Error encountered in Node.js with Mongoose: set function is not recognized

Recently delved into learning Node.js and Mongoose. Attempting a basic set operation after locating the relevant object, but encountering the following error: TypeError: {found object}.set is not a function. Here's the code triggering the error: ...

Exploring a JavaScript array of items and verifying the presence of a specific value before making updates or appending new data

Previous inquiries have delved into similar topics including Determining if an array contains a specific value and Checking for a value in an array using JavaScript, but none of them have provided a solution to my particular issue. The comments within my ...