How can I redirect a user to another page if they have denied location permission

Question

I am using code modified from examples on stackoverflow. This runs on a website in a browser.

<button onclick="getLocation()">Use Current Location</button>


<script>
var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(redirectToPosition);
    } else { 
        window.location.href = "map_text_mobile.php";
    }
}

function redirectToPosition(position) {
    window.location='weatherDemo.php?lat='+position.coords.latitude+'&lon='+position.coords.longitude;
}
</script>

This works fine as long as the user has not denied permissions in the past. If they have denied permissions I want to send them to a map where they can enter their desired location by clicking on a map. Note, I do not care what their location is, it is just a convivence to allow them to set the app up to their current location. But they can always use the map to set a location.

The "else" function never runs. If permissions have been denied, my button does nothing. Doing nothing is not an acceptable result. They won't be able to get the weather unless they can specify a location.

I think the issue is that navigator.geolocation either doesn't return or always returns a positive value so that the else is never triggered. I tried some other code that attempted to determine the status of geolocations but same thing, nothing happens when the button is clicked if permissions have been denied.

It is really difficult for a user to figure out how to switch a website permission from deny to allow so I just want to route them to the map routine rather than doing nothing.

I would appreciate some help.

UPDATE:

This code works but takes longer than desired in the case where permissions have been granted. Is there a better way or does the watchPosition just take time. I tried some code that queries the permission but could not get it to work. I am not expert on Javascript (understatement).

<button onclick="test()">Test</button> test for denied<br><br>

function test(){
    navigator.geolocation.watchPosition(function(position) {
    getLocation();
  },
  function(error) {
    if (error.code == error.PERMISSION_DENIED)
      alert("Alert message here");
  });
}

UPDATE 2: This works and is fast enough.

<button onclick="test5()">Test5</button> using query<br><br>

function test5(){
    navigator.permissions.query({ name: "geolocation" }).then((result) => {
      if (result.state === "denied") {
        alert("Permissions have been set to denied. Either change that our use the map method to set locations. You can change that in your browser settings, site settings, location, blocked.");
      } else {
        getLocation();
      }

      
    });
}

The original source of this code is https://www.w3schools.com/jsref/prop_nav_geolocation.asp. In the "Try This" section, the button does nothing and the else never runs if locations is blocked. The SO poster I used as reference had used this code as their starting point as well. — Allen Edwards, Jul 20 '23 at 02:07
It looks like this https://stackoverflow.com/questions/6092400/is-there-a-way-to-check-if-geolocation-has-been-declined-with-javascript first answer, not the accepted one, which wasn't very helpful, but the first answer, the one with the most votes will work. I just changed the "i'm tracking you" code to a call to getLocation and change the "you denied me" to an alert asking the user to either change permissions or use the map option. That said, it is very slow compared to my code that does not check first. If there is a better way, please let me know. It is probably too slow to use. — Allen Edwards, Jul 20 '23 at 14:13
OK, my app is working. Rather than just going to the map I popup an alert that tells the user how to reset permissions or go to the map if they don't want to do that for some reason. I have tested it and it is fast and works so far. Thanks to everyone who read what I wrote. I will leave it up in case it helps someone else. — Allen Edwards, Jul 20 '23 at 23:00

score 0 · Accepted Answer · answered Jul 20 '23 at 23:02

I edited my comment with the third update but this is what I found that worked. I left it called test5 because that was the version of code I tried that worked.

<button onclick="test5()">Reset Location</button>

<script>
function test5(){
    navigator.permissions.query({ name: "geolocation" }).then((result) => {
      if (result.state === "denied") {
        alert("Permissions have been set to denied. Either change that our use the map method to set locations. You can change that in your browser settings, site settings, location, blocked. Find L-36.com and change it to Allow");
      } else {
        getLocation();
      }
    });
}

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(redirectToPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function redirectToPosition(position) {
    window.location='weatherMobile.php?lat='+position.coords.latitude+'&lon='+position.coords.longitude;
}
</script>

How can I redirect a user to another page if they have denied location permission

1 Answers1