Geolocation HTML5 Custom Tooltip

Question

Since I'm testing one of the features of HTML5 - geolocation for my project, I realized that users can close the invitation without allowing or denying it, which defeats the whole purpose of the tooltip.

And since in my project I want to dynamically display data for users depending on the user's location, this cannot be done simply because, not knowing the user's response, it does not cause either of the two callbacks - success / error.

so I started looking for if there is any solution for this, and there are a lot of suggestions about this - set a timeout, I tried, and everything works fine. However, one small flaw here, by the time it reaches the timeout, all the data is already displayed, and when I say everything, I mean EVERYTHING because there is no space found.

So, I came up with two solutions that can work, 1) create a custom geolocation tooltip that forces users to enable / disable placement, and send a response to the browser to establish a location preference 2) pause page loading (stop the material from rendering) and wait until it will not expire after a timeout, or it will receive a response from users

Does anyone know how to implement one of these two solutions?

PS: sorry, if this is not entirely clear to you, I know that my English sucks, but I can explain in more detail.

Thanks guys!

Answer 1

You should not use the Geolocation custom hint if your project is browser-based because attackers can use this method to trick a user. Also, since the geolocation API is an asynchronous event, it will continue to load the rest of the page while it waits.

I recommend using a conditional statement instead of an else clause. Thus, your script functions should only be executed after the location has been split, and you will again abandon what should happen if the geolocation information is not provided (which I highly recommend as situations arise when data is not provided)

An example of a conditional statement for checking geolocation using JS:

if (navigator.geolocation) { // code to run if there is geolocation information } else{ // code to run if no geolocation info is given to the browser }