Fixed Geolocation Issue on iPhones (Safari)

Pages/Fundvelo/CaritasServiceFundVeloFoundKeyDataPage.razor

                     </div>
                 </div>
                 @if (OnlineStatusProvider.Online) {
-            <div class="mat-layout-grid-cell mat-layout-grid-cell-span-1 justify-content-center" style="text-align: center">
-                @if (IsGeoLocationAllowed) {
-                    <div>
-                        <MatRipple class="inputfile-mat-ripple" Color="@MatRippleColor.Default" @onclick="InitializeDeviceMapPosition">
-                            <label>
-                                <svg xmlns="http://www.w3.org/2000/svg" height="48px" width="48px" viewBox="0 0 24 24" fill="#000000">
-                                    <path d="M0 0h24v24H0V0z" fill="none" />
-                                    <path d="M13 3.06V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06c-.46-4.17-3.77-7.48-7.94-7.94zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z" />
-                                    <circle cx="12" cy="12" opacity=".3" r="2" />
-                                    <path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" />
-                                </svg>
-                            </label>
-                        </MatRipple>
+                    <div class="mat-layout-grid-cell mat-layout-grid-cell-span-1 justify-content-center" style="text-align: center">
+                        @if (PermissionsProvider.IsGeoLocationAllowed) {
+                            <div>
+                                <MatRipple class="inputfile-mat-ripple" Color="@MatRippleColor.Default" @onclick="InitializeDeviceMapPosition">
+                                    <label>
+                                        <svg xmlns="http://www.w3.org/2000/svg" height="48px" width="48px" viewBox="0 0 24 24" fill="#000000">
+                                            <path d="M0 0h24v24H0V0z" fill="none" />
+                                            <path d="M13 3.06V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06c-.46-4.17-3.77-7.48-7.94-7.94zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z" />
+                                            <circle cx="12" cy="12" opacity=".3" r="2" />
+                                            <path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" />
+                                        </svg>
+                                    </label>
+                                </MatRipple>
+                            </div>
+                        }
+                        <div style="margin-top:1rem">
+                            <MatRipple class="inputfile-mat-ripple" Color="@MatRippleColor.Default" @onclick="InitializeBicycleMapPosition">
+                                <label>
+                                    <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 20 20" height="48px" viewBox="0 0 20 20" width="48px" fill="#000000">
+                                        <g><rect fill="none" height="20" width="20" /></g>
+                                        <g><g><path d="M15.5,9h-0.68l-1.58-4.34C13.1,4.26,12.72,4,12.3,4H10v1h2.3l1.46,4H8.75L8.38,8H10V7H6v1h1.32l1.46,4H7.95 C7.7,10.19,6.13,8.86,4.2,9.01c-1.64,0.13-3.01,1.46-3.18,3.1C0.8,14.25,2.41,16,4.5,16c1.79,0,3.21-1.29,3.45-3h4.1 c0.25,1.81,1.83,3.14,3.75,2.99c1.64-0.13,3.01-1.46,3.18-3.1C19.2,10.75,17.59,9,15.5,9z M6.95,13c-0.23,1.15-1.22,2-2.45,2 C3.1,15,2,13.9,2,12.5S3.1,10,4.5,10c1.23,0,2.23,0.85,2.45,2H4v1H6.95z M12.05,12H9.84l-0.73-2h3.92 C12.5,10.52,12.16,11.22,12.05,12z M15.5,15c-1.4,0-2.5-1.1-2.5-2.5c0-0.94,0.5-1.73,1.24-2.16l1.03,2.83l0.94-0.34l-1.02-2.8 C15.3,10.02,15.4,10,15.5,10c1.4,0,2.5,1.1,2.5,2.5S16.9,15,15.5,15z" /></g></g>
+                                    </svg>
+                                </label>
+                            </MatRipple>
+                        </div>
                     </div>
-                }
-                <div style="margin-top:1rem">
-                    <MatRipple class="inputfile-mat-ripple" Color="@MatRippleColor.Default" @onclick="InitializeBicycleMapPosition">
-                        <label>
-                            <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 20 20" height="48px" viewBox="0 0 20 20" width="48px" fill="#000000">
-                                <g><rect fill="none" height="20" width="20" /></g>
-                                <g><g><path d="M15.5,9h-0.68l-1.58-4.34C13.1,4.26,12.72,4,12.3,4H10v1h2.3l1.46,4H8.75L8.38,8H10V7H6v1h1.32l1.46,4H7.95 C7.7,10.19,6.13,8.86,4.2,9.01c-1.64,0.13-3.01,1.46-3.18,3.1C0.8,14.25,2.41,16,4.5,16c1.79,0,3.21-1.29,3.45-3h4.1 c0.25,1.81,1.83,3.14,3.75,2.99c1.64-0.13,3.01-1.46,3.18-3.1C19.2,10.75,17.59,9,15.5,9z M6.95,13c-0.23,1.15-1.22,2-2.45,2 C3.1,15,2,13.9,2,12.5S3.1,10,4.5,10c1.23,0,2.23,0.85,2.45,2H4v1H6.95z M12.05,12H9.84l-0.73-2h3.92 C12.5,10.52,12.16,11.22,12.05,12z M15.5,15c-1.4,0-2.5-1.1-2.5-2.5c0-0.94,0.5-1.73,1.24-2.16l1.03,2.83l0.94-0.34l-1.02-2.8 C15.3,10.02,15.4,10,15.5,10c1.4,0,2.5,1.1,2.5,2.5S16.9,15,15.5,15z" /></g></g>
-                            </svg>
-                        </label>
-                    </MatRipple>
-                </div>
-            </div>
                     <div class="mat-layout-grid-cell mat-layout-grid-cell-span-3">
                         <div class="w-100 fv-osm-tile map-wrapper">
                             <Map @ref="mapRef" MapOptions="@mapOptions" AfterRender="AfterRenderMap"></Map>
                     <div class="mat-layout-grid-inner">
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-12-desktop">
                             <MatStringField Class="w-100 form-check-label" Label="@getAddressLbl()" Outlined="true" Required="true" Type="text" @bind-Value="@bicycleGeoPosition.Address"
-                             OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync" maxlength="50"
-                             OnFocusOut="@TransformAdressToDeviceMapLocation"></MatStringField>
+                                            OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync" maxlength="50"
+                                            OnFocusOut="@TransformAdressToDeviceMapLocation"></MatStringField>
                         </div>
 
                         @if (OnlineStatusProvider.Online) {
                             <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-12-desktop">
                                 <MatStringField Class="w-100 form-check-label" Label="@getZipCityLbl()" Outlined="true" Required="true" type="text" @bind-Value="@bicycleGeoPosition.DisplayCity"
-                                OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"
-                                OnFocusOut="@TransformAdressToDeviceMapLocation"></MatStringField>
+                                                OnKeyDown="@InputCursorHandler.OnKeyDownHandlerAsync"
+                                                OnFocusOut="@TransformAdressToDeviceMapLocation"></MatStringField>
                             </div>
                         } else {
                             <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-4-desktop">
                         <div class="mat-layout-grid-cell mat-layout-grid-cell-span-4-phone mat-layout-grid-cell-span-4-tablet mat-layout-grid-cell-span-4-desktop">
                             <div>
                                 <MatCheckbox @bind-Value="@abholadresseIsNotContact" Label="@I18n["AlternatePickupContact"]"
-                                                @onkeydown="InputCursorHandler.OnKeyDownHandlerAsync"></MatCheckbox>
+                                             @onkeydown="InputCursorHandler.OnKeyDownHandlerAsync"></MatCheckbox>
                             </div>
                         </div>
                     </div>
     private string imgUrl = string.Empty;
     private Boolean loading = false;
     private ColorItem selectedColor;
-    private bool IsGeoLocationAllowed = false;
 
     private string brandStringValue;
     private Brand selectedBrand;
         StateHasChanged();
     }
 
-    private async void OnGeoLocationPermissionChanged(bool allowed) {
-        IsGeoLocationAllowed = allowed;
-        MouseEvent mouseEvent = new MouseEvent();
-        mouseEvent.LatLng = await InitializeDeviceMapPosition();
-        await OnMouseMapClicked(mouseEvent);
+    private async void OnGeoLocationPermissionChanged() {
+        if (PermissionsProvider.IsGeoLocationAllowed) {
+            MouseEvent mouseEvent = new MouseEvent();
+            mouseEvent.LatLng = await InitializeDeviceMapPosition();
+            await OnMouseMapClicked(mouseEvent);
+        }
         StateHasChanged();
     }
 
     private async void AfterRenderMap() {
+        await AddEventsToMap();
         FoundReport report = ReportDataProvider.GetFoundReport();
         MouseEvent mouseEvent = new MouseEvent();
         LatLng coordinates;

Pages/Fundvelo/CaritasServiceFundVeloFoundKeyDataPage.razor.cs

 
         protected async Task<LatLng> InitializeDeviceMapPosition() {
             CreateBicycleMarkerOptions();
-            await AddEventsToMap();
             return await ShowDeviceGeoLocation();
         }
 
         protected async Task InitializeBicycleMapPosition() {
             CreateBicycleMarkerOptions();
-            await AddEventsToMap();
             await ShowBicycleGeoLocation(false);
         }
 
         }
 
         protected async Task<LatLng> GetDeviceGeoLocation() {
-            Console.WriteLine("GetDeviceGeoLocation...");
             LatLng geoPosition = new(46.80121, 8.22669); // Centered on Swiss
             if (PermissionsProvider.IsGeoLocationAllowed) {
-                Console.WriteLine("GetDeviceGeoLocation - THEN");
                 BlazorGeolocationPosition position = await this.BlazorGeolocationService.GetPositionAsync();
                 if (position.ErrorCode != null) {
-                    Console.WriteLine("GetDeviceGeoLocation - THEN -ERROR");
                     Toaster.ShowError(I18n.GetString("Error.GeoLocation.Title", position.ErrorCode), I18n.GetString("Error.GeoLocation.Msg", position.ErrorMessage));
                 } else {
                     geoPosition = new((double)position.Latitude, (double)position.Longitude);
                 }
             } else {
-                Console.WriteLine("GetDeviceGeoLocation - ELSE");
                 Toaster.ShowWarning(I18n.GetString("Warning.Permission.GeoLocation.Title"), I18n.GetString("Warning.Permission.GeoLocation.Msg"));
             }
             return geoPosition;

Shared/Services/PermissionsProvider.cs

 
         private bool _isGeoLocationAllowed;
 
-        public delegate void GeoLocationPermissionChangeCallBack(bool allowed);
+        public delegate void GeoLocationPermissionChangeCallBack();
         private GeoLocationPermissionChangeCallBack _geoLocationPermissionChangeCallBack;
 
         public IJSRuntime JSRuntime { get; set; }
 
-        public bool IsGeoLocationAllowed { 
-            get {
-                Console.WriteLine("IsGeoLocationAllowed.Get {0}", _isGeoLocationAllowed);
-                return _isGeoLocationAllowed; 
-            }
-            set {
-                Console.WriteLine("IsGeoLocationAllowed.Set {0}", value);
-                _isGeoLocationAllowed = value; 
-            } 
+        public bool IsGeoLocationAllowed {
+            get { return _isGeoLocationAllowed; }
+            set { _isGeoLocationAllowed = value; }
         }
 
         public PermissionsProvider(IJSRuntime _jSRuntime) {
             this.JSRuntime = _jSRuntime;
-           initialize();
+            initialize();
         }
 
         [JSInvokable]
         public void GeoLocationPermissionChanged(string geoLocationStatus) {
             IsGeoLocationAllowed = (geoLocationStatus.Equals("granted") || geoLocationStatus.Equals("prompt")) ? true : false;
-            this._geoLocationPermissionChangeCallBack(IsGeoLocationAllowed);
+            _geoLocationPermissionChangeCallBack();
         }
 
         public void SetGeoLocationPermissionChangeCallBack(GeoLocationPermissionChangeCallBack callback) {
-            this._geoLocationPermissionChangeCallBack = callback;
+            _geoLocationPermissionChangeCallBack = callback;
         }
 
         public void RemoveOnlineStatusChangeCallBack() {
-            this._geoLocationPermissionChangeCallBack = null;
+            _geoLocationPermissionChangeCallBack = null;
         }
 
 
         private async void initialize() {
-            Console.WriteLine("PermissionsProvider.initialize");
             await GeoLocationAllowed();
         }
 
         private async Task<bool> GeoLocationAllowed() {
-            Console.WriteLine("PermissionsProvider.GeoLocationAllowed");
             var dotNetObjRef = DotNetObjectReference.Create(this);
             string result = await JSRuntime.InvokeAsync<string>("IsGeoLocationAllowed", dotNetObjRef);
             this.IsGeoLocationAllowed = result.Equals("granted") || result.Equals("prompt");
-            Console.WriteLine("PermissionsProvider.GeoLocationAllowed result={0}", result);
             return IsGeoLocationAllowed;
         }
 

wwwroot/index.html

         }
 
         function IsGeoLocationAllowed(dotNetObjRef) {
-            console.log("IsGeoLocationAllowed...");
             if (isSafari()) {
                 navigator.geolocation.getCurrentPosition(
                     position => {
-                        console.log("IsGeoLocationAllowed.position");
                         // this function is called only if the user grant permission so here you can handle the granted state
                         dotNetObjRef.invokeMethodAsync("GeoLocationPermissionChanged", "granted");
                         return "granted";
                     },
                     error => {
-                        console.log("IsGeoLocationAllowed.error");
                         // this function is called if the user denied permission or some other errors occurs
                         dotNetObjRef.invokeMethodAsync("GeoLocationPermissionChanged", "denied");
                         return "denied";
                     }
                 );
-            }
-            else {
+            } else {
                 navigator.permissions.query({ name: 'geolocation' }).then(function (result) {
-                    console.log("GeoLocation permission: " + result.state);
                     result.onchange = function () {
-                        console.log("GeoLocation permission: " + result.state);
                         dotNetObjRef.invokeMethodAsync("GeoLocationPermissionChanged", result.state);
                     }
                     dotNetObjRef.invokeMethodAsync("GeoLocationPermissionChanged", result.state);
         }
 
         function isSafari() {
-            console.log("isSafari...");
-            var is_safari = navigator.userAgent.toLowerCase().indexOf('safari/') > -1;
-            return is_safari;
+            //var is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+            //return is_safari;
+            return true;
         } 
 
         function isIOS() {
-            console.log("isIOS...");
             // Detects if device is on iOS
             const userAgent = window.navigator.userAgent.toLowerCase();
             return /iphone|ipad|ipod/.test(userAgent);