How TO: Secure GeoLocation iOS Chrome Browser

I have been trying to get the iOS Chrome App to locate the user’s location but kept running into an issue:

“Origin Does Not Have Permission to use Geolocation Service”

I had a valid SSL certificate, and I could get the user location using a PC browser but I could not get that to work using a Mobile Browser. If you look at the browser console, you will see mixed content error messages.

Turns out the issue is that the requests for the leaflet tile PNGs are HTTP not HTTPs.
As a result, this creates a mixed content security error in the browser, and the Browser treats the connection as insecure.

to fix this just add a header to you nginx configuration in your server block to automatically promote HTTP requests into HTTPS

add_header Content-Security-Policy “upgrade-insecure-requests;”

Then make sure to do bench restart, and clear cache.
This does not fix the issue for older browsers, but will do the trick for most modern browsers.